自分用のツールなどはいつもローカルでサーバを起動しているが、PCの電源をつけるたびにサーバを起動するのも面倒だな…と思っていた
どこかにホストして自分だけアクセスできるようにしたい
ということで、今回はCloudflare Pagesに自分用のWebアプリケーションをデプロイし、CloudflareAccessで自分のみアクセスできるように設定した
そのときのメモを残しておく
Cloudflare Pages
Git連携してデプロイ設定をする
今回はNext.jsを使った
ドキュメント読みながらやればできるのと本題ではないので割愛
Cloudflare Accessの設定
GoogleやGitHubなどと連携して連携対象にログインしていればアクセスできるというような前処理を挟むことができる
Auth Methodの追加
Settings -> Authentication
でLogin Methodを追加する
Select an identity providerにさまざまなIdPのリストがある
選択して登録処理へ移る
今回はGitHubを選択した
画面上はName,App ID,Client Secretを登録するフォームがある
また、画面上にキャプチャ付きで丁寧にGitHub Appsの登録方法が載っているのでそれに従い設定した
- your-team-name
このチーム名はSettings -> Generalで設定できる
デフォルトだと最初に登録したPagesのドメインが設定されるよう
- 確認
ログインして認証させたら次のような画面へ遷移した
このemailやnameをPolicyの条件に追加していくことでユーザーの制限をかけられる
Applicationの登録
Add an Applicationで新規にCloudFlareAccessを利用するApplicationという概念を作成する
今回はSelf-Hostedを選択して各種設定項目を埋めていく
Policy
公式のドキュメントは下記
Access policies · Cloudflare Zero Trust docs
ここではさきほど作成したApplicationにアクセスできる人、できない人を定義する
Rule TypeとしてInclude, Required, Excludeがある
例でも取り上げられているが、IdPで検証したメールアドレスを条件に含めることができる
今回は次のような設定にした
- Include
- Selector: Login Methods
- Value: GitHub/sample app(設定したGitHubApps)
LoginMethodでGitHubのsample appというApplicationで認証した人
- Required
- Selector: Emails
- Value: ${自身のメールアドレス}
Emailsに${自身のメールアドレス}が設定されているひと(=自分)
Requireなので条件を満たしていないと連携しても閲覧できない
- ポリシー例
このあたり、さまざまな設定が可能でドキュメントの例にも出ていたように
Emails ending inでメールアドレスの@以降のドメインがマッチしているユーザー指定するということも可能
Identity providers
すでにIDプロバイダを設定している場合は複数設定されているIDプロバイダが表示される
今回は特定のGitHubAppを対象としたいのでAccept all available identity providersのチェックを外し対象のIDプロバイダを選択する
確認してみる
本アカとは別のアカウントでアクセスしようと試みた
しっかり拒否されることを確認した
これで最低限自分だけがアクセスできる状態にできそう
ほか雑多なメモ
詳しくは追えていないが、Cloudflareのネームサーバを経由しないとself-hostedなアプリケーションを追加できないみたい
そりゃそうか
ということで、swfz.devドメインをGoogleCloudで買って作業をした
また、先にApplicationを追加してからあとでPagesを追加、カスタムドメインの設定という手順でやるといつまで立っても(24時間以上待った)カスタムドメインが有効にならなかった
で、一度Applicationの設定を消してからPagesのカスタムドメインを設定、Applicationの追加という順序で設定したらサクッと設定できた
この辺はApplicationでもDNS設定を変えるはずなので競合してしまったように見えた
まとめ
- Cloudflare AccessでGitHubAppsと連携してアクセスできるユーザーを制限した
なんといってもアプリケーション側に手を入れなくて良いのが楽で良いですね
