Cloudflareアカウントの作成

R2/D1/Pub/SubでCloudflareが盛り上がってきたので改めてRemixをCloudflare Workersで動かす最初の一歩をまとめておく。

何はともあれCloudflareのアカウントを作成しておく。
https://www.cloudflare.com/

Cloudflare Workersのサブドメイン取得

Workersは、アプリケーション名.アカウントのサブドメイン.workers.devでデプロイできるのでサブドメインをダッシュボードから設定しておきます。

Hi MORISHIGE 2022/05/14に更新

Cloudflare Workersを利用するにはWorkers CLI（Wranlerのインストール）が必要。
Wrangler v2になり色々と変更点あり。

Wranglerをグローバルにインストールしておく。

$ npm install -g wrangler

Hi MORISHIGE 2022/05/14に更新

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

Hi MORISHIGE 2022/05/14

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]

Hi MORISHIGE 2022/05/14

ログインの確認

wrangler whoamiでログインしているアカウントの確認ができる。

$ wrangler whoami

Hi MORISHIGE 2022/05/14に更新

デプロイの準備

Remixのテンプレートの記載が古く、デプロイに利用するwrangler.tomlのフォーマットがWrangler v1の仕様のため現在のv2と異なるので書き換える必要がある。

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"

v2からcompatibility_dataの記載が追加になっている。

Hi MORISHIGE 2022/05/14に更新

デプロイ

$ 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 2022/05/14

型定義ファイルのパス変更

型情報へのパスが古いままなのでこちらも修正。

remix.env.d.ts

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

このスクラップは2022/05/14にクローズされました