この記事は公開されてから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 wranglerWorkers CLIとCloudflareアカウントの紐付け
CLIを利用してCloudflare WorkersへデプロイするにはWrangler経由でCloudflareアカウントにログインして認証する必要があります。wrangler loginコマンドを利用してOAuth経由でのログインを行い、アカウントの紐付けを行います。
$ wrangler login
⛅️ wrangler 2.0.5
-------------------
Attempting to login via OAuth...OAuthでの認証を行うためブラウザが立ち上がうのでCloudflareのアカウントでログインして完了画面とともにターミナルに下記メッセージが出れば紐付け完了です。
Successfully logged in.ログイン状況の確認
念の為指定したアカウントで紐付けれているか確認しておきます。
$ wrangler whoami
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-boilerplateRemixテンプレートからのインストール
$ 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依存のライブラリはそのまま利用できないので開発時には注意が必要です。
１つの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とあわせて試してみてください。そのほかのサービスとの連携についてはまた改めて紹介させていただきます。
3
