個人開発の成果物、公開する場所どうしてますか
個人開発でツールやサービスを作ったとき、地味に悩むのが「これ、どこでホスティングするか」問題です。VPSを借りて自分でNginxを設定するのは面倒ですし、費用もかかります。かといって無料枠のあるホスティングサービスは、独自ドメインが有料オプションだったり、HTTPS化に一手間かかったりすることが少なくありません。
自分がQRコードでURLを送るChrome拡張「QR Send」の紹介ページ(qrsend.app)を作ったときも、同じところで悩みました。今回はそのときに使った構成、Cloudflare Pagesで静的サイトを無料で公開して、独自ドメインとHTTPSまで持っていくやり方を紹介します。
Cloudflare Pagesって何なのか
Cloudflare Pagesは、Cloudflareが提供する静的サイトホスティングサービスです。HTML/CSS/JSなどの静的ファイル一式をアップロードするだけで、Cloudflareの持つ世界中のCDNネットワークを通じて配信してくれます。
個人開発の公開先として魅力的なポイントは次の3つです。
- 無料枠が太い: 個人のサイト程度のアクセス数であれば、帯域やビルド回数の制限に引っかかることはまずありません
- HTTPSが自動: 証明書の発行・更新を意識する必要がなく、デプロイした瞬間からhttpsでアクセスできます
- CDN配信: 世界中のエッジサーバーから配信されるため、静的サイトであれば体感速度も十分速いです
似たサービスにNetlifyやVercelもあります。独自ドメインをすでにCloudflareでDNS管理しているなら、Cloudflare Pagesに寄せたほうが設定が一本化されて楽です。
公開する静的ファイルを用意しましょう
まずは公開したいディレクトリを用意します。今回のような紹介ページ程度であれば、最小構成はこれだけです。
site/
├── index.html
├── style.css
└── favicon.icoサーバーサイドの処理は一切不要です。ビルドツールを使っている場合は、distのような出力先ディレクトリを、Cloudflare Pagesにアップロードする対象として指定してください。
wranglerでデプロイしてみましょう
Cloudflareが提供するCLIツールwranglerを使うと、ダッシュボードを開かずにコマンド一発でデプロイできます。ローカルへのインストールも不要で、npx経由でそのまま実行できます。
npx wrangler pages deploy site --project-name=qrsend --branch=main初回実行時はCloudflareアカウントへのログインを求められるので、ブラウザで認証すればOKです。--project-nameに指定した名前でプロジェクトが作成されます(すでにあれば、そのプロジェクトへのデプロイになります)。数十秒でデプロイが完了し、https://<project-name>.pages.devのようなURLが発行されます。このURLにアクセスして自分の作ったページが表示されたら成功です。
更新したいときも同じコマンドを実行するだけです。差分だけがアップロードされるので、静的ファイルの更新であれば数秒〜十数秒で反映されます。瞬殺ですね。
# 更新するときも同じコマンドを叩くだけ
npx wrangler pages deploy site --project-name=qrsend --branch=main独自ドメインを割り当てましょう
pages.devのサブドメインでも公開自体はできますが、個人開発のサービスとして見せるなら独自ドメインを割り当てたいところです。手順はシンプルです。
- 対象ドメインをCloudflareのネームサーバーに向けておく(すでにCloudflareでDNS管理していれば不要)
- Cloudflareダッシュボードで対象のPagesプロジェクトを開き、「カスタムドメイン」から使いたいドメイン(サブドメインでも可)を追加する
- DNSレコードが自動で追加され、数分でHTTPS込みでアクセスできるようになる
証明書の発行やリダイレクト設定を自分で書く必要はなく、httpからhttpsへのリダイレクトもデフォルトで有効になります。ドメインをすでにCloudflareで管理しているなら、この画面をぽちぽち押すだけで完了する体感です。簡単ですね。
日常の更新フローはこうしています
日常的な更新は、ファイルを直して同じwrangler pages deployコマンドを打つだけです。リポジトリと連携してpushをトリガーに自動デプロイする方法も用意されています。ただ個人開発の小さな静的サイトであれば、手元で内容を確認してからコマンド一発で反映できるこのやり方のほうが、むしろシンプルで気に入っています。
実際、自作のChrome拡張「QR Send」の紹介ページ(qrsend.app)も、この構成のままCloudflare Pagesで運用しています。更新頻度はそれほど高くありませんが、コマンド一つで即座に反映されますし、費用もかかっていません。
おわりに
静的サイト1枚を公開するためだけにサーバーを構えたり、有料プランに入ったりする必要はありません。Cloudflare Pagesであれば、無料枠の範囲でCDN配信・HTTPS・独自ドメインまで一通り揃います。
コメント