フロントエンドとバックエンドのセットアップ
1つのコマンドでアプリケーションのフロントエンドとバックエンドを作成して実行する
フロントエンドとバックエンドをセットアップすると、あらかじめ設定されたデフォルトを備えた、すぐに実行できる完全なプロジェクト構成が用意されるため、すぐにカスタムロジックやユーザー体験の構築を開始できます。
なぜフロントエンドとバックエンドをセットアップするのか？
フロントエンドとバックエンドの両方のコンポーネントをセットアップすることで、アプリケーションに合わせたカスタム体験を構築できます。
作成スクリプト（下記参照）は、事前設定済みのデフォルトを含む両コンポーネントを生成し、追加のセットアップなしで即座にデプロイできるようにします。
- Frontend: Squid Client SDK を使って、要件にぴったり合うパーソナライズされたユーザーインターフェースを作成します。
- Backend: Squid Backend SDK を使用して、カスタムビジネスロジックやセキュリティルールから、サードパーティ連携や自動化ワークフローまで、高度な機能を実装します。
前提条件
開始する前に、以下を用意してください。
- Node.js がインストールされていること（バージョン16以上推奨）
- npm または yarn パッケージマネージャー
- Squid CLI - npm でインストールできます:
npm install -g @squidcloud/cli
権限エラーが発生した場合は、権限の問題を解決するための npm 公式ガイドを参照してください。
フロントエンドとバックエンドを初期化する
-
Application Overview page に移動します
-
Backend Project セクションを見つけます
-
Initialize Project をクリックし、Backend and Frontend を選択します
-
フロントエンドとバックエンドの両方のプロジェクトを生成するコマンドをコピーします
- アプリケーション用の新しいディレクトリを作成します
mkdir ExampleApp
- コピーしたコマンドを実行してバックエンドとフロントエンドのプロジェクトを作成します。コマンドは次の形式になります:
npx @squidcloud/cli init-sample -t backend-and-frontend example-app --appId YOUR_APP_ID
--apiKey YOUR_API_KEY --environmentId dev --squidDeveloperId YOUR_DEVELOPER_ID --region us-east-1.aws
バックエンドとフロントエンドを起動する
スクリプトの実行が完了すると、アプリのディレクトリが作成されているはずです。その中には、以下の主要ディレクトリを含む完全なプロジェクト構成が入っています。 /frontend /backend
バックエンドを起動する
cd backend
バックエンドの開発サーバーを起動します:
squid start
フロントエンドを起動する
cd frontend
フロントエンドの開発サーバーを起動します:
npm run dev
フロントエンドは http://localhost:5173（またはターミナルに表示された別のポート）で実行されているはずです。
セットアップを理解する
スクリプトにより、以下のファイルが自動的に作成されました:
- .env.local: frontend のルートフォルダ内
- .env: backend のルートフォルダ内
どちらにも、以下のアプリケーション変数が含まれています:
appId: Squid Console にあるアプリケーション固有の識別子region: アプリがホストされているクラウドリージョン（例:us-east-1.aws）environmentId: 開発にはdev、本番にはprodを使用squidDeveloperId: ローカル開発用の developer ID
これらの環境変数は、Squid の SDKs およびデプロイで使用されます。
ローカルで実行中のバックエンドのバージョンを使ってフロントエンドを動かすには、フロントエンドの Squid Client SDK 設定に Squid Developer ID を含める必要があります:
<SquidContextProvider
options={{
appId: import.meta.env.VITE_SQUID_APP_ID,
region: import.meta.env.VITE_SQUID_REGION,
environmentId: import.meta.env.VITE_SQUID_ENVIRONMENT_ID,
squidDeveloperId: import.meta.env.VITE_SQUID_DEVELOPER_ID,
}}
>
<App />
</SquidContextProvider>
次にやること
フロントエンドとバックエンドのセットアップが完了したら、次のことができます:
- 最初の executable を作成する - Executables セクションを参照して、フロントエンドがバックエンドロジックをどのように呼び出すかを学びます。
- データを扱う - Database Docs を確認して、統合データベースを使ったデータの読み書き方法を学びます。