RemixをCloudflare Pagesにデプロイしてみる

はじめに

前回はRemixをBunで動かしてみました。

• RemixをBunで動かしてみる | DevelopersIO

今回はCloudflare Pagesにデプロイしてみます。

Cloudflare Pagesにデプロイ

Cloudflare Pagesは、JAMstackプラットフォームで、フルスタックアプリケーションを構築しデプロイできます。

• Cloudflare Pages

無料利用（Freeプラン）である程度利用することもでき、リクエスト、帯域幅は全プラン無制限で使えます。

Remixもエッヂでも動かすことができるのでCloudflare Pagesとの相性も良いので、ここにデプロイしてみます。

Cloudflare作成

Cloudflareのアカウント作成は割愛し、すでに取得指定あるとします。 - ウェブサイトのセキュリティとパフォーマンス改善 | Cloudflare

Wranglerをインストール

WranglerはCloudflare製品のビルド用のCLIです。

Wrangler is a command-line tool for building with Cloudflare developer products.

• Install/Update Wrangler · Cloudflare Workers docs

前回はRemixをCloudflareテンプレートで作成したので、すでにWranglerにdevDependenciesが追加してあります。

globalにはインストールせずにlocalのWranglerを使います。

WranglerでCloudflareにログイン

Nodeの場合はnpxで実行できますが、bunの場合はbunxで実行できます。

$ bunx wrangler login

• Login - Wrangler · Cloudflare Workers docs

WranglerでCloudflare Pagesを作成

WranglerでCloudflare Pagesを作成します。

$ bunx wrangler pages project create [project name]

• project create - Wrangler · Cloudflare Workers docs

WranglerでCloudflare Pagesにデプロイ

すでに、package.jsonのscripsにpages:deployがあります。

package.json

"scripts": {
  "pages:deploy": "npm run build && wrangler pages deploy ./public"
},

npmをbunに変更、作成したプロジェクト名を一応指定しておきます。

package.json

"scripts": {
  "pages:deploy": "bun run build && wrangler pages deploy ./public --project-name [project name]"
},

デプロイを実行します。

$ bun run pages:deploy

• deploy - Wrangler · Cloudflare Workers docs

[project name].pages.devにアクセスすると無事に表示されました。

まとめ

特にハマることもなくbunのままでCloudflare Pagesにデプロイできました。