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

Netlify

Squid と Netlify で application deployment を効率化します​

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

メリット​

  • Squid は数分で任意の database または API に接続し、統一された client SDK を通じてすべてを管理します。
  • application は update を real-time で受け取ります。
  • application は Server Side Rendering（SSR）のメリットを得られます。
  • Squid により、client と server の両方で制限なく app を拡張できます。
  • lock-in を恐れずに、必要なだけ深く利用できます。Squid は柔軟で opinionated ではない設計です。

ユースケース​

  • boilerplate や glue code なしで、既存の MongoDB、PostgresDB、MySQL、または任意の database を使用した real-time full-stack web application を作成する。
  • POC や prototype を数分で構築し、必要な best-of-breed resource を使用して世界に共有する。Squid はそれらすべてと integrate できます。（必要なものが見つかりませんか？お問い合わせください）

Netlify との Integration​

注記

以下の step は、Continuous Deployment を実装するために GitHub を介して Netlify と integrate する方法を説明します。Netlify 上で Squid を使用して手動 deploy する方法については、この tutorialを参照してください。

GitHub から full-stack application を Netlify に接続するには、以下の step に従います。

  1. full-stack application を GitHub の repository に push します。

  2. Netlify console で、GitHub repository から import して新しい site を追加します。app の build settings を構成する際は、frontend configuration に基づいて正しい directory と build command を入力してください。たとえば、Vite を使用している場合は、次の configuration を使用します。

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

    Netlify に新しい site を追加する詳細については、Netlify documentationを参照してください。

  3. Netlify console で Integrations page に移動し、Squid integration を検索します。Enable from a site を click し、website を選択します。

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

  5. Environment variable prefix には、frontend configuration に必要な prefix を入力します。たとえば、Vite を使用している場合は、envar prefix として VITE_ を入力します。

Netlify 上の Environment variable

  1. configuration form の Auto-Deploy section で、Auto deploy enabled を Enabled に toggle します。Squid backend deploy を trigger するのは production（prod）build のみであることに注意してください。この setting はいつでも disable できます。

  2. base directory からの相対 path として、Squid backend directory の path を Backend directory に入力します。たとえば、"../backend" です。

  3. configuration を保存します。これで Squid と Netlify に deploy された full-stack application を利用できます。application repo に変更があるたびに、Netlify が更新された frontend と Squid backend を自動的に build・deploy します。