RemixをCloudflare Workersで動かす最初の一歩

RemixをCloudflare Workersを動かす最初の一歩について、まずはデプロイまでの手順をご紹介します。(Wrangler v2版)
2022.05.14

はじめに

こんにちは、CX事業本部MAD事業部の森茂です。
最近ビックニュース続きのCloudflare使っていますか?とくにCDN エッジを利用したサービスが話題になっており私もわくわくがとまりません:)
RemixはCloudflareのCDN エッジサービスであるWorkersでSSRを使って動かすことのできるReactベースのフレームワークのひとつです。そこで、今回は、これを機にCloudflare Workersを使ってみようという方向け、RemixをCloudflare Workersで動かす最初の一歩を紹介させていただきます。

環境情報

  • Remix v1.5.1
  • Wrangler v2

Cloudflare アカウントの作成

何はともあれまずはCloudflareのアカウントが必要になります。無料のアカウントから利用ができるので、まだ登録されていない方はこの機会ぜひ登録しましょう。

Cloudflare Workersのサブドメインを取得

Cloudflare Workersはアプリケーション名.アカウントのサブドメイン.workers.devというURLでデプロイされます。ダッシュボードでサブドメインを取得、設定しておきましょう。

サブドメインの登録

Workers CLIのインストール

Cloudflare WorkersへデプロイするためにWorkers CLI(Wrangler)のインストールが必要です。(ダッシュボードからもある程度は可能)

Wrangler v2をグローバルにインストールしておきます。

$ npm install -g wrangler

Workers CLIとCloudflareアカウントの紐付け

CLIを利用してCloudflare WorkersへデプロイするにはWrangler経由でCloudflareアカウントにログインして認証する必要があります。wrangler loginコマンドを利用してOAuth経由でのログインを行い、アカウントの紐付けを行います。

$ wrangler login

⛅️ wrangler 2.0.5
-------------------
Attempting to login via OAuth...

OAuthでの認証を行うためブラウザが立ち上がうのでCloudflareのアカウントでログインして完了画面とともにターミナルに下記メッセージが出れば紐付け完了です。

oauth認証

Successfully logged in.

ログイン状況の確認

念の為指定したアカウントで紐付けれているか確認しておきます。

$ wrangler whoami

login状況

Wranglerコマンドの一覧

Commands:
wrangler init [name]       📥 Create a wrangler.toml configuration file
wrangler dev [script]      👂 Start a local server for developing your worker
wrangler publish [script]  🆙 Publish your Worker to Cloudflare.
wrangler tail [name]       🦚 Starts a log tailing session for a published Worker.
wrangler secret            🤫 Generate a secret that can be referenced in the worker script
wrangler kv:namespace      🗂️  Interact with your Workers KV Namespaces
wrangler kv:key            🔑 Individually manage Workers KV key-value pairs
wrangler kv:bulk           💪 Interact with multiple Workers KV key-value pairs at once
wrangler pages             ⚡️ Configure Cloudflare Pages
wrangler r2                📦 Interact with an R2 store
wrangler login             🔓 Login to Cloudflare
wrangler logout            🚪 Logout from Cloudflare
wrangler whoami            🕵️  Retrieve your user info and test your auth config

Flags:
-c, --config   Path to .toml configuration file  [string]
-h, --help     Show help  [boolean]
-v, --version  Show version number  [boolean]

Remixのインストール

Remixのインストールを行います。RemixにはCloudflare Workersで動かすためのボイラーテンプレートが用意されているので、それを使ってアプリケーションを用意しましょう。ただしWrangler v1を利用したテンプレートとなっているので少し調整が必要になります。

配布されているテンプレートに調整を追加したボイラープレートも用意していますのでこちらもご利用ください。

ボイラープレートからのインストール

$ npx create-remix@latest --template himorishige/remix-cloudflare-workers-boilerplate

Remixテンプレートからのインストール

$ npx create-remix@latest

? Where would you like to create your app?
remix-cloudflare

? What type of app do you want to create?
Just the basics

? Where do you want to deploy? Choose Remix if you're unsure; it's easy to change deployment targets.
Cloudflare Workers

? Do you want me to run `npm install`?
Yes

? TypeScript or JavaScript?
TypeScript

設定ファイルの修正

RemixのテンプレートがWrangler v1(今回はv2を使用)を利用したテンプレートになっているため設定ファイルの仕様が変更になっています。不要な箇所を削除し、必要な項目を追記しておきます。なおOAuth認証を行っているCLI環境からのデプロイはaccount_idの記載は不要です。(CI/CD環境での利用時にはaccount_idの他にトークンの用意も必要となります)

wrangler.toml

name = "remix-cloudflare-workers"
main = "./build/index.js"
compatibility_date = "2022-04-05"

account_id = ""
workers_dev = true

[site]
bucket = "./public"

[build]
command = "npm run build"

型定義ファイルも一部名称が変更になっているため修正しておきます。

remix.env.d.ts

/// <reference types="@remix-run/dev" />
/// <reference types="@remix-run/cloudflare/globals" />
/// <reference types="@cloudflare/workers-types" />

ローカル開発サーバーでの動作確認

Remixのテンプレートではminiflareというライブラリを使いローカル環境でCloudflare Workers環境をエミュレートできます。サービス開始が間もないサービスなどはminiflare上でまだ動作しないものもあります。(2022年5月現在だとR2など)

$ npm run dev

デフォルトの設定ではhttp://localhost:8787で起動するのでブラウザで確認してみましょう。なおポートを変更したい場合はwrangler.tomlファイルで指定することができます。

デプロイ

CLI、設定ファイルの準備ができたところで早速デプロイしてみましょう。

$ npm run deploy

> deploy
> npm run build && wrangler publish

> build
> remix build

Building Remix app in production mode...
Built in 274ms
⛅️ wrangler 2.0.5
-------------------
🌀 Created namespace for Workers Site "__remix-cloudflare-workers-workers_sites_assets"
...
...
↗️  Done syncing assets
Uploaded remix-cloudflare-workers (4.21 sec)
Published remix-cloudflare-workers (3.58 sec)

remix-cloudflare-workers.subdomain.workers.dev

アプリケーションが小さいこともありますがものの数秒でデプロイが完了しました。このデプロイの速さもCloudflare Workersの特徴のひとつです。

デプロイに成功すると最後にアプリケーション名、サブドメインが反映されたURLが発行されるのでアクセスします。

remix-cloudflare-workers.subdomain.workers.dev

Cloudflare Workersのはまりどころ

Node.js依存のライブラリなど動作しないライブラリがある

Cloudflare Workersのはまりどころとして、ServiceWorker環境で動作していること、つまりESMであり、Node.jsではないことがあげられます。Cloudflare Workersは、AWS LambdaのようにESMを実行するサーバーレス環境ではありますが、Node.jsの代わりにV8を使用しています。そのためNode.js依存のライブラリはそのまま利用できないので開発時には注意が必要です。

1つのWorkerで動作できるサイズは1MB以内

動作させるスクリプトのサイズは1MB以内である必要があります。静的なファイルやクライアントサイドで読み込ませるjsについてはCloudflare siteにデプロイされるため1MBの対象外です。UIライブラリなどを利用するとそれなりの容量になるのでTailwind CSSなど外部CSSファイルを利用する方がサイズ的には安全かもしれません。

実行時間が50ms以内

無料で利用できるBundledモデルではCPUの利用時間が50ミリ秒以内である必要があります。なお、外部への通信時間などは含みません。有料プランにすることでUnboundモデルが利用できこちらは30秒の稼働時間を利用可能です。ただしこちらは外部への通信時間を含みます。

Pricing · Cloudflare Workers docs

さいごに

いかがでしょうか?あっという間にRemixを利用したSSRなサイトをCloudflare Workersへデプロイできました。Cloudflareを試してみようという方、ぜひRemixとあわせて試してみてください。そのほかのサービスとの連携についてはまた改めて紹介させていただきます。