Netlify

Squid と Netlify でアプリケーションのデプロイを効率化

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

Benefits

• Squid はあらゆるデータベースや API に数分で接続でき、統合された client SDK でまとめて管理できます。
• アプリケーションはリアルタイムで更新を受け取れます。
• アプリケーションは Server Side Rendering (SSR) の恩恵を受けられます。
• Squid により、クライアントとサーバーの両方で制限なくアプリを拡張できます
• ロックインを恐れずに、好きなだけ深く掘り下げられます。Squid は設計上、柔軟で unopinionated です。

Use cases

• 既存の MongoDB、PostgresDB、MySQL、または任意のデータベースを使って、ボイラープレートやグルーコードなしでリアルタイムなフルスタック Web アプリケーションを作成する。
• 数分で POC やプロトタイプを構築し、必要な best of breed のリソースを使って世界に共有する — Squid はそれらすべてと統合できます。（必要なものが見当たりませんか？お知らせください！）

Integrate with Netlify

Note

以下の手順では、GitHub 経由で Netlify と連携して Continuous Deployment を実装する方法を説明します。Netlify 上で Squid を手動デプロイする方法については、このチュートリアルをご覧ください。

GitHub からフルスタックアプリケーションを Netlify に接続するには、次の手順に従います。

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

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

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

   Netlify に新しい site を追加する詳細は、Netlify のドキュメントをご覧ください。

3. Netlify コンソールで Integrations ページに移動し、Squid integration を検索します。Enable from a site をクリックし、次に Web サイトを選択します。

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

5. Environment variable prefix には、フロントエンド構成に応じて必要な prefix を入力します。たとえば Vite を使用している場合、envar prefix として “VITE_” を入力します。

6. 設定フォームの Auto-Deploy セクションで、Auto deploy enabled を Enabled に切り替えます。Squid バックエンドのデプロイがトリガーされるのは production (prod) build のみである点に注意してください。この設定はいつでも無効化できます。

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

8. 設定を保存します。これで Squid と Netlify にデプロイされたフルスタックアプリケーションが稼働します。アプリケーションの repo に変更が加えられるたびに、Netlify が更新されたフロントエンドと Squid バックエンドを自動的にビルドおよびデプロイします。