こんにちは。齋藤（@wtoddev）です。

はじめに

今回はJSフレームワークのAstroとヘッドレスCMSのNewtを組み合わせた開発環境をNetlifyでデプロイしようとしたら躓いたのでデプロイ方法を備忘録的に記します。

環境

├── @types/node@20.4.2
├── astro@2.8.3
├── newt-client-js@3.2.5
└── sass@1.63.6

AstroはReactやVueなどの他のUIフレームワークと合わせて開発ができる優れものなのですが、今回の環境ではピュアなAstroを使用しています。

他のフレームワークとの組み合わせについて詳しく知りたい方はこちらをご覧ください。

また、ブログのようにコンテンツ配信をするために、ヘッドレスCMSのNewtを使用しています。こちらも詳しくは公式ページをご覧ください。

デプロイ手順

1: `the Netlify Adapter`をインストール

npx astro add netlify

2: `astro.config.mjs`でoutputを変更

the Netlify Adapterをインストールした段階でastro.config.mjsに以下が追加されます。

astro.config.mjs

import netlify from '@astrojs/netlify/functions';

export default defineConfig({
  output: 'server',
  adapter: netlify(),
});

Netlify’s experimental Edge Functionsを使用する場合

import netlify from '@astrojs/netlify/edge-functions';

デフォルトではoutputの値がSSRモードであるserverに指定されていますが、SSRの事前レンダリングを反転させるhybridを指定します。

output: 'hybrid',と指定しないと、デプロイ時にビルドの段階でエラーになり失敗する現象が発生します。

最終的なastro.config.mjsはこちら。

astro.config.mjs

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
  output: "hybrid",
  adapter: netlify()
});

3: pushしてデプロイ

NetlifyとGitHubのリポジトリの連携をすることで、事前に設定したブランチにpushするだけで自動的にデプロイされます。
設定方法は公式ドキュメントをご覧ください。

4: デプロイ成功

以上の手順で無事にデプロイすることができました。

さいごに

今回はAstro + Newtな環境をNetlifyでデプロイする手順についてご紹介しました。Newtが国産CMSであることからなのか、この組み合わせの情報が少なかったので書いてみました。Astroユーザーの皆さんの一助となれば幸いです。

誤りなどがありましたらご指摘頂けますと幸いです。
ご精読ありがとうございました。

Astro + Newtな環境をNetlifyでデプロイする