メインコンテンツまでスキップ

環境

Squid は作業用に 2 つの環境(dev と prod)を提供します。

新しいアプリケーションを作成すると、Squid は自動的に devprod の環境をセットアップします。開発とテストには dev 環境を使用してください。prod 環境は、アプリケーションを本番公開する準備ができたときに使用します。

devprod で共有されるものdevprod で共有されないもの
App IDConnectors
RegionSecrets
OrganizationBuilt-in database
Developer IDBackend deployments
API Keys

環境と connector

Squid Console でアプリの dev 版と prod 版を切り替えると、それぞれに異なる connector セットがあることに気づくはずです。 本番アプリの機能に対する望ましくない変更を防ぐため、devprod 環境の connector は同期されません。Squid アプリに connector を追加する際は、追加先が目的の環境であることを確認してください。

ベストプラクティス

dev 環境は、connector の開発版と接続してください。これにより、アプリケーションの本番版を変更することなく、機能の構築とテストを行えます。

特定の connector について、devprod の両環境で同じ connector ID を選択した場合、dev で開発してから、コード内の変数を変更することなく prod にプッシュできます。

dev 環境

dev 環境は、prod 環境のアプリケーションとは分離された、完全なバックエンドアプリケーションです。

dev バックエンドをローカルで実行する

Squid Console のアプリケーション概要ページから Squid バックエンドを初期化する際、dev モードへ切り替えるよう促されます。

表示されるターミナルコマンドは、.env ファイルを含む新しいバックエンドを作成します。このファイルには、ローカルでバックエンドを実行するために必要な属性(SQUID_ENVIRONMENT_ID を含む)が含まれます。この値によって、バックエンドがどの環境で動作するかが決まります。

バックエンドをローカルで実行するには、バックエンドディレクトリで次のコマンドを実行します。

squid start

ローカルで実行しているバックエンドのバージョンでフロントエンドを動かすには、フロントエンドの Squid Client SDK 設定に Squid Developer ID を含める必要があります。

Client code
<SquidContextProvider
options={{
appId: 'YOUR_APP_ID',
region: 'YOUR_REGION', // example: 'us-east-1.aws'
environmentId: 'dev',
squidDeveloperId: 'YOUR_SQUID_DEVELOPER_ID',
}}
>
<App />
</SquidContextProvider>
注意

Squid Developer ID はローカル開発専用です。フロントエンドアプリに developer ID を含めないでください。

prod 環境

Squid アプリケーションの production 環境は、ユーザーが操作するべきバージョンです。Squid の prod バージョンに connector を追加する際は、サービスの本番版を使用してください。

Squid バックエンドのデプロイ

Squid バックエンドをデプロイする際、どの環境にデプロイするかを選択する必要があります。

dev へデプロイすると、共同作業者が機能をテストできる staging 環境を提供します。dev バックエンドをデプロイすると、それはライブになり、Squid context の squidDeveloperId パラメータを使用せずにアプリのフロントエンドからアクセスできます。

prod へデプロイすると、ユーザーが操作するライブ版のバックエンドが作成されます。これは、以前にデプロイされたバックエンドのバージョンを上書きします。

Squid バックエンドを dev 環境へデプロイするには、バックエンドプロジェクトのディレクトリから次のコマンドを実行します。

squid deploy # OR npm run deploy

バックエンドのバージョンを prod にプッシュする準備ができたら、次のコマンドを使用します。

squid deploy --environmentId prod --apiKey YOUR_PROD_API_KEY

squid deploy コマンドの実行に失敗する場合は、システムに Squid CLI がインストールされていることを確認してください。

prod の deploy コマンドと prod API key は Squid Console で確認できます。Backend project セクションの Deploy backend ボタンをクリックして、コマンドを確認してください。

環境の選択

Console 上の環境

Console で connector を追加または管理する前に、正しい環境にいることを確認してください。Squid Console で環境を切り替えるには、Console 上部の環境名を選択し、表示したい環境を選択します。

Console 上の環境

開発中の環境

デフォルトでは、.env ファイル内の environmentIdapiKeydev に設定されています。そのため、これらのフラグなしでコマンドを実行すると、コマンドはデフォルトで dev 環境になります。

バックエンドで環境を変更するには、Squid CLI コマンドで適切なフラグを使用してください。

squid deploy # deploys to dev
squid deploy --environmentId prod --apiKey YOUR_PROD_API_KEY # deploys to prod

アプリのフロントエンドで環境を変更するには、Squid context で適切な environmentId 値を使用してください。

<SquidContextProvider
options={{
appId: 'YOUR_APP_ID',
region: 'YOUR_REGION', // example: 'us-east-1.aws'
environmentId: 'dev', // or 'prod'
}}
>
<App />
</SquidContextProvider>

主要な環境変数

環境変数("envars" とも呼ばれます)は、開発環境と本番環境の両方でアプリケーションを設定・運用するために不可欠です。

  • SQUID_APP_ID: 一意の Squid アプリケーション識別子。(コマンドラインで使用する場合は --appId
  • SQUID_REGION: 'us-east-1.aws' などのリージョンを指定します。(コマンドラインで使用する場合は --region
  • SQUID_ENVIRONMENT_ID: 作業環境を示します。'dev' または 'prod'。(コマンドラインで使用する場合は --environmentId
  • SQUID_API_KEY: API アクセス用の固有キーで、環境ごとに異なります。(コマンドラインで使用する場合は --apiKey
  • SQUID_DEVELOPER_ID: Squid バックエンドをローカルで実行するために必要で、.env ファイルまたは Squid Console から参照できます。(コマンドラインで使用する場合は --squidDeveloperId

Netlify や GitHub Actions などのツールを用いた自動デプロイでは、これらの環境変数をデプロイマシン上、またはデプロイツールの設定内に直接設定することを推奨します。この方法により、API Key のような機密情報をより安全に管理できます。

また、デプロイマシンやプロセスで変数を設定することで、開発用と本番用の設定を明確に分離できます。

セキュリティ上の注意事項

機密性の高い変数、特に API Key の取り扱いには注意してください。セキュリティリスクを避けるため、クライアントサイドコードで API Key を公開してはいけません。こうした重要情報は常に、サーバー側または保護された環境変数として安全に管理してください。

Console で envars を確認する

管理を容易にするために、Squid Console から環境変数をコピーできます。この機能は、開発とデプロイの両方で変数を正確に設定するのに役立ちます。 Squid Console の Show env vars ボタンは、これらの変数へアクセスするための便利なツールです。

また、ローカル開発用の .env ファイルを生成するために、"Create .env file" ボタンをクリックするとよいでしょう。

バックエンドの undeploy

必要に応じて、アプリからバックエンドを削除できます。Squid Console で Application overview ページに移動し、ページの下部までスクロールして Undeploy Backend をクリックします。