Create React Appで作ったReactアプリをCloudflare Workers Sitesにデプロイする
2021/11/29
Cloudflare WorkersはReactアプリも動かせるということでやってみた
ReactとTypeScriptの勉強のために、ポートフォリオ兼サンプル置き場のReactアプリを作った（この記事を公開した時点では全然できていないけど）ので、それをCloudflare Workersにデプロイする
手順
Wranglerのインストールと認証は事前に済ませておく（Cloudflare Workersを試すを参照）
Workersの初期化
Reactアプリのルートディレクトリに移動して、以下コマンドを実行
$ wrangler init --sitewrangler.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 namespaceReactアプリをデプロイ
$ wrangler publish