高木のブログ

Create React Appで作ったReactアプリをCloudflare Workers Sitesにデプロイする

2021/11/29

Cloudflare WorkersはReactアプリも動かせるということでやってみた

ReactとTypeScriptの勉強のために、ポートフォリオ兼サンプル置き場のReactアプリを作った(この記事を公開した時点では全然できていないけど)ので、それをCloudflare Workersにデプロイする

https://takagi.dev/

ytkg/takagi-dev - GitHub

手順

Wranglerのインストールと認証は事前に済ませておく(Cloudflare Workersを試すを参照)

Workersの初期化

Reactアプリのルートディレクトリに移動して、以下コマンドを実行

$ wrangler init --site

wrangler.toml ファイルと workers-site ディレクトリが生成される

静的ファイル出力ディレクトリの設定を wrangler.toml に追記

Reactアプリをビルドすると、build ディレクトリに静的ファイルができるのでそれを指定する

wrangler.toml
 usage_model = ''
 compatibility_flags = []
 workers_dev = true
-site = {bucket = "",entry-point = "workers-site"}
+site = {bucket = "./build",entry-point = "workers-site"}
 compatibility_date = "2021-11-25"

SPAの設定を workers-site/index.js に追記(ルーティング機能付きの場合)

React Routerを利用した複数ページを持つReactアプリは設定が必要で、シングルページの場合はスキップでOK

workers-site/index.js
-import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+import { getAssetFromKV, mapRequestToAsset, serveSinglePageApp } from '@cloudflare/kv-asset-handler'

 /**
  * The DEBUG flag will do two things that help during development:
@@ -41,8 +41,6 @@ async function handleEvent(event) {
         bypassCache: true,
       };
     }
+
+    options.mapRequestToAsset = serveSinglePageApp;
     const page = await getAssetFromKV(event, options);

この設定をしないとどうなるか

例えば https://example.net/about みたいなページに直接アクセスした時にエラーが返る

could not find about/index.html in your content namespace

Reactアプリをデプロイ

$ wrangler publish

ytkg

Written by ytkg, Twitter, GitHub