Remixアプリを、wranglerでCloudflare Pagesへデプロイする方法と環境変数を利用したNodeのバージョン制御

Shopifyが買収したことでも話題になったRemix。

エッジホスティングとHeadless Commerceの組み合わせは、個人的にアツいなと思ったので、両者の勉強がてら触ってみました。

npx create-remixコマンドでRemixアプリをセットアップする

Remixアプリのセットアップは、create-remixを利用します。

https://www.npmjs.com/package/create-remix

最新版の利用が推奨されていますので、@latestをつけましょう。

% npx create-remix@latest

ディレクトリ名を設定します。

? Where would you like to create your app? (./my-remix-app) 

プロジェクトタイプを聞かれます。今回はBasicsにしましょう。

? What type of app do you want to create? (Use arrow keys)
❯ Just the basics 
  A pre-configured stack ready for production 

デプロイ先のサービスを選びます。ここでは、Cloudflare Pagesを選びましょう。

? Where do you want to deploy? Choose Remix App Server if you're unsure; it's 
easy to change deployment targets. (Use arrow keys)
❯ Remix App Server 
  Express Server 
  Architect (AWS Lambda) 
  Fly.io 
  Netlify 
  Vercel 
❯ Cloudflare Pages 
  Cloudflare Workers 
  Deno 

Cloudflare Workersを選んだ場合との違いは、おいおい調べようと思います。

TypeScriptで開発したい方は、次のステップでTypeScriptを選びましょう。

? TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript 
  JavaScript 

このままnpm installを実行するか聞かれます。ディレクトリ構造を変更したいなど、特別な理由がなければyでOKです。

? Do you want me to run `npm install`? (Y/n) 

完了したら、次のステップの案内が表示されます。

found 0 vulnerabilities
💿 That's it! `cd` into "/Users/okamotohidetaka/remix-cf-pages" and check the README for development and deploy instructions!

wrangler CLIでデプロイする

生成されたアプリのREADME.mdを読むと、「Gitプロバイダー経由でデプロイしてね」と書かれています。

Cloudflare Pages are currently only deployable through their Git provider integrations.

が、wranglerでデプロイできましたので、そちらの方法を紹介します。

まずはwranglerでCloudflareへログインしましょう。

% npx wrangler login

OAuthの認証画面がでますので、Allowsimasyou.

次の画面がでれば成功です。ブラウザを閉じましょう。

CLI側にもメッセージが表示されます。

-------------------------------------------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&XXXX&
Successfully logged in.
? Would you like to help improve Wrangler by sending usage metrics to Cloudflare? › (Y/n)

Your choice has been saved in the following file: ../../.wrangler/metrics.json.

  You can override the user level setting for a project in `wrangler.toml`:

   - to disable sending metrics for a project: `send_metrics = false`
   - to enable sending metrics for a project: `send_metrics = true`

不要かもですが、とりあえずRemixアプリをビルドしておきましょう。

% npx remix build

wrangler pages publishでデプロイしましょう。Remixの場合、デプロイするディレクトリは./publicです。

% npx wrangler pages publish ./public 

? Enter the name of your new project: › 

? Enter the production branch name: › main

Gitのブランチ名やPagesのプロジェクト名を指定すると、デプロイが始まります。

✨ Successfully created the 'first-remix-pages' 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
POST /pages/assets/upload
POST /pages/assets/upload
POST /pages/assets/upload
🌏  Uploading... (7/7)

✨ Success! Uploaded 7 files (3.91 sec)

✨ Uploading _headers
✨ Uploading Functions bundle
✨ Uploading _routes.json

成功すると、アクセスするURLが表示されます。

✨ Deployment complete! Take a peek over at https://xxxx.first-remix-pages.pages.dev

ただ、2023/03時点ではまだページが表示できません。

PagesのNode versionを変更する

デプロイしたRemixアプリが動かない理由は、Pagesで利用するNode.jsのバージョンに起因します。

Currently Cloudflare uses Node 12.18.0 in the Pages build environment, but Remix requires a newer node version greater than 14.0.0 to build on Cloudflare Pages. To set the Node version, go to your Pages project > Settings > Environment Variables > Production and add NODE_VERSION environment variable with a value of 14 or greater in your Production option.

https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/

NODE_VERSIONSの環境変数を、管理画面から設定しましょう。

これで動くようになります。

参考資料

https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/