RemixをCloudflare Workersで動かす
Hi MORISHIGECloudflareアカウントの作成
R2/D1/Pub/SubでCloudflareが盛り上がってきたので改めてRemixをCloudflare Workersで動かす最初の一歩をまとめておく。
何はともあれCloudflareのアカウントを作成しておく。
Cloudflare Workersのサブドメイン取得
Workersは、アプリケーション名.アカウントのサブドメイン.workers.devでデプロイできるのでサブドメインをダッシュボードから設定しておきます。
Hi MORISHIGECloudflare Workersを利用するにはWorkers CLI（Wranlerのインストール）が必要。
Wrangler v2になり色々と変更点あり。
Wranglerをグローバルにインストールしておく。
$ npm install -g wrangler
Remixのインストール
RemixにはCloudflare Workersで動かすためのボイラーテンプレートが用意されているので、それを使ってアプリケーションを用意する。まだWrangler v1ベースのテンプレートのため一部修正が必要。
$ 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
CLIとCloudflareアカウントの紐付け
CLIを利用してCloudflareへデプロイするにはWrangler経由でCloudflareアカウントにログインして認証する必要がある。
$ wrangler login
⛅️ wrangler 2.0.5
-------------------
Attempting to login via OAuth...
OAuthでの認証を行うためブラウザが立ち上がる。Cloudflareのアカウントでログインして完了画面とともにターミナルに下記メッセージがでて完了。
Successfully logged in.
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]
ログインの確認
wrangler whoamiでログインしているアカウントの確認ができる。
$ wrangler whoami
Hi MORISHIGEデプロイの準備
Remixのテンプレートの記載が古く、デプロイに利用するwrangler.tomlのフォーマットがWrangler v1の仕様のため現在のv2と異なるので書き換える必要がある。
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"
v2からcompatibility_dataの記載が追加になっている。
Hi MORISHIGEデプロイ
$ 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.**サブドメイン**.workers.dev
デプロイが成功するとURLが発行される。
https://remix-cloudflare-workers.****.workers.dev
Hi MORISHIGE型定義ファイルのパス変更
型情報へのパスが古いままなのでこちらも修正。
/// <reference types="@remix-run/dev" />
- /// <reference types="@remix-run/cloudflare-workers/globals" />
+ /// <reference types="@remix-run/cloudflare/globals" />
/// <reference types="@cloudflare/workers-types" />