🐱

Cloudflare R2とCloudflare Accessを使い10分ﾁｮｯﾄで社内専用サイトをホスティングする※注意点あり

2023/05/29に公開

Cloudflare

tech

なにこれ

Cloudflare Accessに触ってみたらすごく簡単にアクセス制限が掛けられてテンションが上がっている筆者。
Cloudflare R2のドメイン連携が一瞬でできてテンションが上がっている筆者
この2つ組み合わせたら社内ドメインのメールアドレスを持っている人限定の静的サイトが一瞬でつくれるんじゃね？と思いついた筆者
- 例えば以下のようなやつ
  - カバレッジ・テストレポート(jestとかplaywrightとか)
  - Storybookとか
  - 社内専用ドキュメントとか

これは検証するしかねぇ！と思い動作確認してみたのですが、なぜかPlaywright ReportがR2経由でのみ閲覧できず・・・

しかし、Cloudflareのある設定を変えたら動くようになったのです！！

動作検証ができたので設定手順と注意点を残しておくために記事に残しておきました。是非みなさんも10分で社内向け静的サイトの作成に挑戦してみてください！
お話する内容は以下の通りです

cloudflare accessの設定方法(雑)
cloudflare r2の設定方法(雑)
cloudflare r2にホスティングした静的ページが動かなった原因と対策(<-この記事のメイン)

10分で終わらせるための前提条件

ドメインがすでにCloudflareに連携されていること
Cloudflare R2にバケットができていること

Cloudflare Accessの設定

自分の解説が分かりづらかった人用にまず初めに公式ドキュメントおいておきます

cloudflareのdashboardから zero trustを開き、Access > Applicationsを開きます
Add an applicationをクリックし、Self-hostedに進む
案内に従い粛々と設定をします
Identity Providers(認証方法)の設定をします

※注意点: Google Workspaceを使ってる人は事前にGoogle認証を行えるようにする設定をする必要があります
Google認証を行えるようにするには、zero trustのダッシュボード > settings > Authenticationを開き、Login methodsのAdd Newへ進みます
add_new

実はGoogle以外にも沢山の認証方法がありますので自分が使うログイン方法をクリックしてください。今回は利用者が多そうなGoogle Workspaceを選びます

中に入ると設定項目と、設定を行うための手順書が公開されているので案内に従ってGoogle Workspace側の設定を行ってください！

※自分はGoogle Workspace持っていないのでGithub Loginの設定をしました。

Policyの設定をおこなう

具体的なアクセス制限についての設定を行います。色々な設定項目がありますが、今回の肝であるConfigure rulesに絞って説明します

Selectorを選ぶといろいろな条件を選べたりします。社内向け専用サイトの場合、会社ドメインのメールアドレスが全員に配られてると思うのでEmails ending inを選びます

@domain.comのような入力を求められるので、自分の会社のドメインを入力しましょう。その他色々な設定(CorsとかCookieだとか)が出てくるので適当に設定を行うとApplicationが追加できます。これでCloudflare Accessの設定は終わりです！

Cloudflare R2の設定

Cloudflare R2のダッシュボード > バケットの設定ページ > パブリックドメイン > カスタムドメインからドメインの接続へ進みます。ここで先程設定したCloudflare Accessのサブドメインを入力して連携します。これだけで Cloudflare R2とCloudflare Accessの連携は終わりです！一瞬！！