Netlify

Squid と Netlify を利用してアプリケーション展開を効率化

Squid Netlify 統合を使用すると、アプリケーションのビルドとデプロイを自動化できます。フロントエンドと Squid バックエンドの両方への変更は、アプリケーションリポジトリを更新すると自動的にデプロイされます。

Benefits

• Squid は数分で任意のデータベースや API に接続し、統一されたクライアント SDK を通じてそれらを管理します。
• アプリケーションはリアルタイムでの更新を受け取ります。
• アプリケーションは Server Side Rendering (SSR) の利点を享受します。
• Squid は、クライアント側・サーバー側の両方に制限なくアプリを拡張できるようにします。
• ロックインを懸念することなく、必要な深さまで拡張可能です。Squid は柔軟で意見に左右されない設計になっています。

Use cases

• 既存の MongoDB、PostgresDB、MySQL、または好みの任意のデータベースを使用し、ボイラープレートやグルーコードなしでリアルタイムのフルスタック Web アプリケーションを作成します。
• POC やプロトタイプを数分で作成し、必要なベスト・オブ・ブリードのリソースを使用して世界と共有できます ― Squid はそれらすべてと統合可能です。 (必要なものが見当たらない場合は、Let us know! よりご連絡ください)

Integrate with Netlify

Note

以下の手順は、GitHub を通じて Continuous Deployment を実装するために Netlify と統合する方法を示しています。Netlify 上で Squid を手動でデプロイする方法を知りたい場合は、view this tutorial をご覧ください。

GitHub からフルスタックアプリケーションを Netlify に接続するには、以下の手順を実行してください:

1. フルスタックアプリケーションを GitHub のリポジトリにプッシュします。

2. Netlify コンソールで、GitHub リポジトリからインポートすることで新しいサイトを追加します。アプリの build settings を設定する際は、フロントエンドの設定に基づいて適切なディレクトリとビルドコマンドを入力してください。たとえば、Vite を使用する場合、以下の設定を使用します:

   • Base directory: "frontend"
   • Build command: "npm run build"
   • Publish directory: "frontend/dist"

   Netlify への新しいサイトの追加に関する詳細は、view the Netlify documentation をご覧ください。

3. Netlify コンソールで Integrations ページに移動し、Squid の統合を検索します。Enable from a site をクリックし、対象のウェブサイトを選択します。

4. Squid アプリの Region、API key、および Environment ID を入力します。これらの値は Squid Console で確認できます。dev 環境と prod 環境で API key が個別に用意されているため、選択した環境に対応する Squid API key を使用してください。

5. Environment variable prefix には、フロントエンド設定に基づいた任意のプレフィックスを入力します。たとえば、Vite を使用している場合、「VITE_」を envar プレフィックスとして入力します。

6. 設定フォームの Auto-Deploy セクションで、Auto deploy enabled を Enabled に切り替えます。なお、production (prod) ビルドのみが Squid バックエンドのデプロイをトリガーします。この設定はいつでも無効化できます。

7. ベースディレクトリに対する相対パスとして、Squid バックエンドディレクトリへのパスを Backend directory として入力します。たとえば、「../backend」となります。

8. 設定を保存します。これで Squid と Netlify にデプロイされたフルスタックアプリケーションの準備が整いました！アプリケーションのリポジトリに変更が加わるたびに、Netlify が自動的にフロントエンドと Squid バックエンドのビルドおよびデプロイを実行します。