前回までのあらすじ。
好きな言葉や明言を表示してくれるWebページをつくった筆者。
ほぼ使う用途のないツールをつくること、十数個目とかの筆者はめずらしくこのツールはプロダクション環境へデプロイすることを思いつく。
というか、開発環境とプロダクション環境の切り分け方法を勉強したくてやってみることにする。
はたして、目論見通りデプロイできるのだろうか……。
結論
デプロイできました。
開発環境とプロダクション環境の切り分けもできました。
開発環境とプロダクション環境で違う要素は、
- フロントエンド側から見たリクエスト先のAPIのURL
- API側から見たリクエストオリジンのURL
です。
これを切り分けて、デプロイ前後でコードの書き換えを不要にしました。
では、これの実現方法です。
これが正解の方法かは不明です。実用的かもわかりません。
コードの書き換え
フロントエンド
フロントエンド側はstaticなHTMLファイルですので、Node.js環境であれば使えるprocess.envは使えません。
よって、環境を判断する要素として、window.location.hostnameを用いました。
const isDevelopment = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
これを用いて、APIのURLを切り替えます。
const apiUrl = {
development: "http://127.0.0.1:8787",
production: "https://****.****.workers.dev"
}
const url = isDevelopment ? apiUrl.development : apiUrl.production;
production時のURLはWorkersアプリをnpx wrangler deployでデプロイして発行されたURLが必要ですので、デプロイしておきましょう。
フロントは以上です。
サーバーサイド（API実装側）
For local development with wrangler dev, variables in wrangler.toml are automatically overridden by any values defined in a .dev.vars file located in the root directory of your worker. This is useful for providing values you do not want to check in to source control.
こちらを参考にdev.vars`ファイルを作成し、そちらへ以下を記述します。
IS_DEVELOPMENT="true"
そして、これをコードから参照します。
interface Env {
DB: D1Database;
IS_DEVELOPMENT: string;
}
export default {
async fetch(request, env, ctx): Promise<Response> {
const isDevelopment = env.IS_DEVELOPMENT === 'true';
const allowOrigin = isDevelopment ? '*' : 'https://****.pages.dev';
console.log("allowOrigin -> ", allowOrigin);
if (request.method === 'GET') {
if (request.url.endsWith('/v1/words')) {
/* 略 */
}
}
return new Response('Hello World!');
}
} satisfies ExportedHandler<Env>;
production環境時のURLはフロントエンドをCloudflare Pagesにデプロイして発行されたURLとなるので、一度デプロイしておきます。
フロントエンドとサーバーサイドで互いのURLが必要ですので、簡易的な実装状態でデプロイして、それぞれを再デプロイする必要があります。
デプロイ
フロントエンドとサーバーサイドのそれぞれのデプロイ方法は以下のドキュメント等をご参考に。
フロントエンド
https://developers.cloudflare.com/pages/get-started/git-integration/
サーバーサイド
https://developers.cloudflare.com/workers/wrangler/commands/#deploy
また、--remoteフラグをつけたSQLコマンド実行でプロダクション環境のデータベースへデータを流しこんでおく必要もあります。
npx wrangler d1 execute prod-d1-tutorial --remote --file=./schema.sql
動作確認
ローカルで動作確認したときと同様の動きをすることを確認しました。
コンソールにもエラー文などはありませんでした。
終わりに
これでデプロイ完了です。
かつ、開発環境とプロダクション環境でAPIのURLを変更することもできましたので、開発がしやすくなりますね。
では、ここまで読んでいただきありがとうございました。