Cloudflare pagesとgithub.comのリポジトリを連携すると簡単にコンテンツを公開できる。というのを見かけ、面白そうだと思ったがやった事はなかった。のでやってみたメモ
実現したい事
- githubのリポジトリにコンテンツをPushすると自動で公開サイトにデプロイされる状態にしたい
- 自動デプロイやろうとするとCIなどの用意が必要になるけど自分で用意したく無い。幸せになりたい。楽して生きていたい。
やった事サマリ
- Cloudflare の無料アカウントを取得する
- github.com でコンテンツ用リポジトリを用意し index.htmlを pushしておく
- Cloudflare Pagesとリポジトリを連携させる
- 動作確認する
Cloudflare の無料アカウントを取得する
- アカウントを持っていなければ Cloudflare のサイトからサインアップ。
- https://pages.cloudflare.com/ または https://www.cloudflare.com/ja-jp/plans/ などから行ける
- Freeプランで検証は可能
github.com でコンテンツ用リポジトリを用意し index.htmlを pushしておく
-
github.com にコンテンツ管理用のリポジトリを作成。
- Publicでなくても特に問題無し。
- リポジトリ名は後で出てくるデフォルトのプロジェクト名となるので、可能なら推測されにくい物にしたほうが良さそう？
-
テスト用に簡単な index.htmlファイルを作成してリポジトリのTOP階層にpush しておく。
<html>
<head></head>
<body>
hello world!
</body>
</html>
Cloudflare Pagesとリポジトリを連携させる
- 公式のTutorial https://developers.cloudflare.com/pages/get-started/ を参考にして進める。
- Cloudflare ダッシュボードにログインします。
- [アカウント ホーム] > [ページ] でアカウントを選択します。
- [プロジェクトの作成] > [ Git に接続] を選択します。
↓
GitHub リポジトリを選択します
個人のアカウントから GitHub プロジェクトを選択するか、Pages へのアクセスを許可した組織を選択できます。これにより、Pages を使用してデプロイする GitHub リポジトリを選択できます。プライベート リポジトリとパブリック リポジトリの両方がサポートされています。
-
github.com にログインし、ログインしたアカウントに Cloudflare Pagesアプリを追加する。
-
Cloudflare pages にアクセスを許可するリポジトリの範囲を選択できます。All repositoriesはさすがに広いので、先に用意した検証用リポジトリを一つだけ選択するのが良さそう。
-
追加されたアプリは https://github.com/settings/installations で確認できた。変更や不要になった場合に消すのもここから。
-
選択したリポジトリを使ってデプロイを構成
-
先ほど選択した範囲のリポジトリが表示されるので選択して「セットアップの開始」
-
プロジェクト名、本番用ブランチを設定。
-
プロジェクト名にはデフォルトでリポジトリ名が適用されるっぽい。変更も可能。が、このプロジェクト名は自動で発行されるURLの一部として使われるので気をつけたい。
-
フレームワークの選択項目では Next.js等のフレームワークを選択する事もできた。が、今回は使っていないので
None -
その他もデフォルトのままとりあえず「保存してデプロイ」でOK
-
さくっと初めてのビルド&デプロイは完了
-
「プロジェクトに進む」の先の画面で設定を管理できるようになっていた
動作確認
- プロジェクト画面、プロダクションの
ドメインに記載されている https://%{プロジェクト名}.pages.dev でアクセスできます。 - 「サイトにアクセス」からもリンクが貼られています。
- その後は github へPushすると、数秒でCIが動作して自動でリポジトリの内容が公開されるようになった。すごい。簡単。
制限事項
- 公式のDocに記載があった。 https://developers.cloudflare.com/pages/platform/limits/
- Freeプランでは、月に500回までデプロイできるらしい。個人で使う範囲であれば充分か
感想
- とても簡単に自動デプロイできる環境作る事ができて良い体験だった。全て無料で自動デプロイまでできてしまうなんてすごいなあ。
- 小規模なサイトだったら使い方次第でレンタルサーバーすら無しでこの無料プランでも賄えるところもあるのでは...と思った。
- 他にも色々機能もあり、独自ドメインでアクセスさせるといった方法やフレームワークの利用も今後試してみるか...
- 気になる点としては調べた限りではこのデフォルトドメインに対してはアクセス制限を適用できないっぽいのは気にはなった。使い方次第かフレームワーク側でなんとかする感じなのか。
- 以上