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

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

Clock Icon2023.09.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

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

Cloudflare Pagesにデプロイ

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

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

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

Cloudflare作成

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

Wranglerをインストール

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

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

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

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

WranglerでCloudflareにログイン

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

$ bunx wrangler login

WranglerでCloudflare Pagesを作成

WranglerでCloudflare Pagesを作成します。

$ bunx wrangler pages project create [project name]

WranglerでCloudflare Pagesにデプロイ

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

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

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

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

デプロイを実行します。

$ bun run pages:deploy

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

まとめ

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

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.