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

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

#Remix

#React

#Cloudflare

#Cloudflare Workers

森茂洋

2022.05.14

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

はじめに

こんにちは、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

Cloudflare Workers documentation · Cloudflare Workers docs

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 · Cloudflare Workers docs

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を利用したテンプレートとなっているので少し調整が必要になります。

Remix - Build Better Websites

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

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

$ 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の他にトークンの用意も必要となります）

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"

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

/// <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ファイルで指定することができます。

Configuration · Cloudflare Workers docs

デプロイ

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依存のライブラリはそのまま利用できないので開発時には注意が必要です。

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

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