App の Deploy

backend を Squid に、frontend を Netlify に push します

frontend と backend がローカルで実行できたら、次の step は他の人が application を使用できるように deploy することです。この guide では、Squid backend を cloud に、frontend を Netlify に deploy する方法を説明します。

Component の接続方法

frontend と backend は、同じ application credential、つまり App ID、Region、Environment ID を共有します。これらの value が両者を接続します。

• backend は deploy 時に .env file からこれらを読み取ります。
• frontend は build 時に environment variable からこれらを読み取ります（Vite を使用する場合は VITE_ prefix が付きます）。

両方に同じ appId、region、environmentId が設定されている場合、frontend は正しい deployed backend と自動的に communication します。

まずは dev から開始

まず dev に deploy します。これにより、本番公開前に team が test できる shared staging environment を利用できます。確認できたら、prod に対して step を繰り返します。

---

ステップ 1: Backend を Squid に Deploy する

backend directory から、次を実行します。

squid deploy

これにより backend が dev environment に deploy されます。必要な credential（appId、region、apiKey、environmentId）は backend の .env file から自動的に読み取られます。

deploy が完了すると、backend は cloud 上で live になります。frontend では、ローカル開発専用の squidDeveloperId parameter が不要になります。

Production への Deploy

本番公開の準備ができたら、prod に deploy します。

squid deploy --environmentId prod --apiKey YOUR_PROD_API_KEY

prod API key と完全な deploy command は Squid Console で確認できます。Application Overview page に移動し、Backend project section の Deploy backend をクリックします。

注記

squid deploy が失敗する場合、Squid CLI が install されていることを確認してください: npm install -g @squidcloud/cli

---

ステップ 2: Frontend を Netlify に Deploy する

Squid と Netlify で application deployment を効率化します。Squid Netlify integration を使用すると、application build と deployment を自動化できます。application repository を update すると、frontend と Squid backend の両方の変更が自動的に deploy されます。

Repository を接続する

1. project を GitHub repository に push します。
2. Netlify console で Add new site、次に Import an existing project をクリックし、repository を選択します。
3. frontend の build setting を設定します。Vite-based frontend の場合:
   • Base directory: frontend
   • Build command: npm run build
   • Publish directory: frontend/dist

Squid Integration を追加する

1. Netlify で Integrations に移動し、Squid を検索します。Enable from a site をクリックして site を選択します。
2. Squid の Region、API key、Environment ID を入力します。これらは deploy する environment と一致する必要があります（production site には prod API key を使用します）。
3. Environment variable prefix を VITE_ に設定します（Vite app では必須）。

Auto-deploy を有効にする

1. Auto-Deploy section で Auto deploy を有効にします。以降、repository に変更を push すると frontend と Squid backend の両方が自動的に redeploy されます。
2. Backend directory を、base directory からの backend の相対 path（例: ../backend）に設定します。
3. Save をクリックします。app が live になります。

注記

Squid backend deploy を trigger するのは production（prod）build のみです。この setting はいつでも disable できます。

---

Production で squidDeveloperId を削除する

ローカル開発中、frontend には request をローカル実行中 backend に route するための squidDeveloperId が含まれます。

<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, // local dev only
  }}
>

deployed environment では、squidDeveloperId を設定してはいけません。この value は .env.local file 内の VITE_SQUID_DEVELOPER_ID から取得されます。明示的に追加しない限り Netlify build には存在しないため、deployed frontend は deployed backend に自動的に接続します。

注意

production build で squidDeveloperId を公開したり、version control に commit したりしないでください。これはローカル開発専用です。

---

Backend の Undeploy

必要に応じて、app から backend を削除できます。Squid Console で Application Overview page に移動し、page の下部まで scroll して Undeploy Backend をクリックします。

environment と environment variable の詳細については、Environmentsを参照してください。