【Astrojs】AstrojsのサイトをCloudflareにデプロイする

pnpmを使用したbuild方法について

下記のようにbuildのコマンドの前にpnpmをインストールすればOKという記事を見かけました。

npm install -g pnpm && ...

私の環境だと上記コマンドはすでにpnpmがインストールされているようでエラーとなりました。 面倒なことはせずそのままpnpm buildを実行すれば問題なく動作するようです。

package.json内で下記の指定を行っているのですが、恐らくこちらを見てCloudflare側がよしなにやってくれているようです。

{
    "packageManager": "[email protected]+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
}

（packageManagerの指定はcorepack enable pnpmを実行すれば追加される…？）

build時のSyntaxError

pnpmの件の修正を行ったものの、下記のようなSyntaxErrorが出てしまいbuildが失敗してしまいました。

09:31:18.909	SyntaxError: Unexpected token 'with'
09:31:18.910	    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
09:31:18.910	    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)

こちらは既知の問題のようで、astrojsが想定しているNode.jsのバージョンとCloudflareでデフォルトで使用されるNode.jsのバージョンが異なることが問題となっているようでした。

https://community.Cloudflare.com/t/my-static-astro-build-fail/686652/6

こちらは記事の通りに、 環境変数の設定欄「Environment variables (advanced)」で、NODE_VERSIONを22として指定すればOKでした。

終わりに

ややデフォルトから外れたことや新しいバージョンを使っても、ちゃちゃっと解決できるような状態なのはとてもありがたいです。 これも人気サービスにあやかることの大きな恩恵ですね。

また、buildがかなり高速だったりデプロイ後のページ読み込みも高速だったりで現状は言う事なしです。 次はCloudflareのアクセス解析機能を導入してみようと思います。