Cloudflare Pagesで静的サイトをホスティングする
概要
仕事で静的サイトをホスティングする必要があったので、Cloudflare Pagesを使用してホスティングした。ホスティングサービスはいくつかあるが、他サービスと比較して無料プランでも制限なくホスティングできるので今回選択した。
手順
あらかじめCloudflareのアカウントを作成しておく必要がある。
1 作成開始
アカウント作成が完了したら、左のメニューよりCloudflare Pagesにアクセスして、「アプリケーション作成」を選択する。
2 Pages選択
タブでPagesに切り替え、「Gitに接続」を選択しGitHub等と接続する。
GitHubに接続しなくてもファイルを直接アップロードすることでホスティングすることも可能。その場合は「アセットをアップロードする」を選択する。
3 リポジトリ選択
接続したGitHubアカウントからホスティングするリポジトリを選択し「セットアップ開始」を選択し進む。
4 ビルド設定
必要に応じて内容を埋めていく。
プロジェクト名
デフォルトだとリポジトリ名がそのまま入る。この名前がそのままプロジェクトのURLになる。(プロジェクト名.pages.dev)
もちろん後で独自ドメインを割り当てることも可能。
プロダクションブランチ
本番環境のブランチを設定する。
ビルドの設定 / フレームワークプリセット
もし使用している環境がプリセットの中にあれば該当するビルドコマンドを自動で選択することが可能。
今回はフレームワークは使用していないのでスキップ。
ビルドの設定 / ビルドコマンド
ビルドするコマンドを入力する。もし環境がビルド不要であればスキップ。
ビルド設定 / ビルド出力ディレクトリ
ビルドされたデータが出力されるディレクトリを選択。
ルードディレクトリ
プロジェクトのルートディレクトリを設定可能。
今回は特に設定していない。
環境変数
各種環境変数を設定可能。今回はNode.jsのバージョンとyarnのバージョンを指定している。
ここを特に設定していなかった場合、yarn 3.x系が動き、1.x系環境の本プロジェクトではビルドが失敗したので、設定。
今回はNode.jsはv20.11.0をyarnはv1.22.21を選択。
5 ビルド / 確認
上記を設定し次に進むと実際にビルドが動き、成功すれば先ほど設定したドメインにホスティングされる。
6 ステージング環境
デフォルトだとPull Requestごとにプレビュー環境が作成されるが、ビルドが走って面倒という場合は設定から特定のブランチにmergeされたときにプレビュー環境が作成されるように設定可能。今回はdevelopブランチを設定。
まとめ
意外と簡単に設定ができた。無料版が無制限で利用できることも魅力的なので改悪されないことを祈るばかり。
Discussion