notebook

都内でWEB系エンジニアやってます。

CloudFlare Access + Pagesで自分のみアクセスできるようにする

自分用のツールなどはいつもローカルでサーバを起動しているが、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のドメインが設定されるよう

  • 確認

ログインして認証させたら次のような画面へ遷移した

このemailnameをPolicyの条件に追加していくことでユーザーの制限をかけられる

Applicationの登録

Add an Applicationで新規にCloudFlareAccessを利用するApplicationという概念を作成する

今回はSelf-Hostedを選択して各種設定項目を埋めていく

Policy

公式のドキュメントは下記

Access policies · Cloudflare Zero Trust docs

developers.cloudflare.com

ここではさきほど作成した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と連携してアクセスできるユーザーを制限した

なんといってもアプリケーション側に手を入れなくて良いのが楽で良いですね