🦴
Cloudflare Pagesとwranglerを使ってWebサイトを公開したメモ
以下の経緯により極低コストでウェブサイトを公開する良い手段がないか模索したところ、色々サービスがありましたがCloudflare Pagesを使用することにしました。ビルドは自分の計算資源を使用したかったのでGitHub連携せず直接アップロードする方法を使用しています。それまでの経緯と設定等の備忘メモです。
背景と経緯
- Cloudflare Tunnelと自宅のラズパイ上でAxumを使って小さなウェブサイトを公開していた
- サイト更新のタイミングでラズパイの諸々をアップデート
- アップデート後の再起動で起動しなくなる
- 色々調査したところ起動SSDを接続していたUSBポートが使用不能になっていた
- ケース形状から別ポートに接続するのも面倒なのでラズパイ運用を断念
- 趣味レベルで初期コストをかけたくないため、代替案としてサービスを使用することにした
- 技術的な事以外の運用上の外因リスク(価格等)が増えるためあまり使いたくなかった
サービス選定
GitHubやVercel,Netlify等色々あるが、あまり比較していない。以下要因により自動的にCloudflareのPagesになった。
- (基本要件) 無料で静的サイトを公開可能
- (基本要件) GitHub連携せず静的サイトを直接アップロード可能
- 独自ドメインをCloudflareで管理している
- 今のところそんなに高度な連携等をする予定はない
- Workers連携があるので将来的な拡張性も他と同等程度な気がした
- ドメイン取得時にクレカを登録しており最悪何らかの支払いも可能
- クレカ情報を色々な場所に登録したくない
実際の公開手順
アカウントID確認
公式の手順に従いIDを確認・メモする。
APIトークン作成
公式の手順に従いUser API Tokensの画面を開き、以下操作で作成・メモする。
-
Create Token
ボタンを押す - 一番下の
Create Custom Token
でGet started
ボタンを押す- 名前は何でもいいので設定
-
Permissions
でAccount
,Cloudflare Pages
,Edit
を選択する -
Account Resources
で対象のアカウントを選択する -
Client IP Address Filtering
でフィルタすると少し安心-
xxx.xxx.0.0/16
のように範囲指定可能
-
- フィルタしない場合は
TTL
で有効期限を設定した方がいい気がする
- 次の画面でしかトークンは表示されないので閉じないよう注意する
wrangler
設定
- ウェブサイトのプロジェクトディレクトリに以下
.env
ファイルを作成する
.env
CLOUDFLARE_ACCOUNT_ID=your_account_id_confirmed_above
CLOUDFLARE_API_TOKEN=api_token_created_above
-
wrangler
をインストールする
npm install wrangler --save-dev
npx wrangler --version
Pagesへアップロード
- 初回の場合、Pagesプロジェクトを作成する
- 標準では
project-name.pages.dev
で公開される - プロジェクト名の制約:
Project names can be 1-58 lowercase characters with dashes, but cannot start/end with a dash
- 標準では
npx wrangler pages project create project-name --production-branch main
- プロジェクトにアップロードする
- Pagesにgit機能がありそうだが、詳しく調べていないため
--commit-dirty=true
を使用 - ビルド後に自動実行する場合は
package.json
のscripts
内にpostbuild
を作成し指定
- Pagesにgit機能がありそうだが、詳しく調べていないため
npx wrangler pages deploy ./build --project-name project-name --branch main --commit-dirty=true
独自ドメイン設定
- Cloudflareダッシュボードから
Workers & Pages
を開き、対象プロジェクトを選択 -
Custom domains
タブを選択し、設定したいドメインを入力後Activate domain
- 適用に最大48時間かかると表示されるが、今回は数分でアクティブになった
所感
Cloudflare Pagesは非常に簡単に公開できて良いですね。ただ自分でAxum使って色々したかったのができないのだけ心残りです。Workersを使うにもWASM化しないといけませんし。しょうがないのでそれ以外でRust使っていきたいと思います。
Discussion