Cloudflare Pagesにデプロイする
最後に、Cloudflare Pagesにデプロイして、Webサイトを公開してみましょう。まずは、リスト4のWranglerコマンドを実行して、CLIからCloudflareにログインします。
$ 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）。
許可すると、コンソールにログイン成功のメッセージ「Successfully logged in.」が表示されます。
次に、リスト5のように npm run deploy コマンドを実行して、Cloudflare Pagesへのデプロイを実行します。 npm run deploy の内訳は package.json を見ていただけると分かるのですが、 npm run build によるRemixのビルドを行った後、Cloudflare Pagesにデプロイするための wrangler pages deploy が実行されます。
$ 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のプロジェクト名（remix-on-cloudflare-sample）をクリックすると、プロジェクトの詳細が確認できます（図10）。
プロジェクトの詳細のトップには、公開用のURLやデプロイ履歴などが記載されています。公開用URLをクリックして、デプロイされた内容を確認してみましょう（図11）。
RemixのデフォルトらしいWebサイトが表示されました。これで、Cloudflare PagesにRemixのWebサイトをデプロイできました。おめでとうございます！
まとめ
今回は、Cloudflare Pagesの解説とアカウント作成を行い、Cloudflare Pages向けに調整されたRemixプロジェクトの作り方と、デプロイの方法を解説しました。
次回は、Cloudflare Pages向けのRemixプロジェクトがどんなファイル・フォルダで構成されているのかを解説します。お楽しみに！
