RemixのWebサイトをCloudflare Pagesにデプロイする方法を解説

Remixを通じてWebを学ぶ 第9回

Cloudflare Pagesにデプロイする

　最後に、Cloudflare Pagesにデプロイして、Webサイトを公開してみましょう。まずは、リスト4のWranglerコマンドを実行して、CLIからCloudflareにログインします。

［リスト4］wrangler loginを実行する

 $ npx wrangler login
  ⛅️ wrangler 3.57.1 (update available 3.60.3)
 -------------------------------------------------------
 Attempting to login via OAuth...
 Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth...

　途中、ブラウザが立ち上がり、Cloudflareへのアクセスを許可するかどうかを訊かれます（図8）。

図8：Cloudflareへのアクセス許可

　許可すると、コンソールにログイン成功のメッセージ「Successfully logged in.」が表示されます。

　次に、リスト5のように npm run deploy コマンドを実行して、Cloudflare Pagesへのデプロイを実行します。 npm run deploy の内訳は package.json を見ていただけると分かるのですが、 npm run build によるRemixのビルドを行った後、Cloudflare Pagesにデプロイするための wrangler pages deploy が実行されます。

［リスト5］デプロイコマンドを実行する

 $ npm run deploy
 （npm run buildの実行ログを省略）
 The project you specified does not exist: "remix-on-cloudflare-sample". Would you like to create it?"
 ❯ Create a new project
 ✔ Enter the production branch name: … main
 ✨ Successfully created the 'remix-on-cloudflare-sample' project.
 ▲ [WARNING] Warning: Your working directory is a git repo and has uncommitted changes

   To silence this warning, pass in --commit-dirty=true


 ✨ Compiled Worker successfully
 🌎  Uploading... (8/8)

 ✨ Success! Uploaded 8 files (2.76 sec)

 ✨ Uploading _headers
 ✨ Uploading Functions bundle
 ✨ Uploading _routes.json
 🌎 Deploying...
 ✨ Deployment complete! Take a peek over at https://f19ec890.remix-on-cloudflare-sample.pages.dev

　初めてデプロイする際には、プロジェクトがまだ存在しないため、新規作成するかどうかを訊かれます。 Create a new project を選択してエンターキーを押してください。

　Git管理下で作業している場合は、次に「Enter the production branch name」というメッセージで、デプロイするGitブランチ名を訊かれます。デフォルトでは手元のメインブランチ名（今回の例では main ）が指定されていますが、もし main 以外のブランチを使っている場合は、そのブランチ名を入力してください。

　その後、デプロイが開始され、最後にデプロイが完了したら、デプロイ先のURLが表示されます。初めてデプロイした場合は、DNSの設定が完了するまで少し時間がかかる場合があるので、少し待ってからアクセスしてみてください。

デプロイされたプロジェクトを確認する

　さて、デプロイが完了したら、改めてCloudflareのダッシュボードを見に行きましょう。リスト5の最中に作成したプロジェクトが作成されているはずですね（図9）。

図9：Cloudflare Pagesのプロジェクト

　図9のプロジェクト名（remix-on-cloudflare-sample）をクリックすると、プロジェクトの詳細が確認できます（図10）。

図10：Cloudflare Pagesのプロジェクト詳細

　プロジェクトの詳細のトップには、公開用のURLやデプロイ履歴などが記載されています。公開用URLをクリックして、デプロイされた内容を確認してみましょう（図11）。

図11：デプロイされたWebサイト

　RemixのデフォルトらしいWebサイトが表示されました。これで、Cloudflare PagesにRemixのWebサイトをデプロイできました。おめでとうございます！

まとめ

　今回は、Cloudflare Pagesの解説とアカウント作成を行い、Cloudflare Pages向けに調整されたRemixプロジェクトの作り方と、デプロイの方法を解説しました。

　次回は、Cloudflare Pages向けのRemixプロジェクトがどんなファイル・フォルダで構成されているのかを解説します。お楽しみに！