Cloudflare Accessって便利なんですね
CloudflareはなんとなくCDN事業者ってイメージしかなかったのですがいろいろなサービスを展開してるんですね。

きっかけになったのは、HackMDやKibelaなどMarkdownオンラインメモ帳はさっとメモを取れてすぐに他人に共有できて便利だけど会社のメモなんかはパブリックなところでは書きづらい。。
そこで友人に教えてもらったのがCloudflare Access（認証）とCodiMD（メモ帳）の組み合わせで自前サーバーを立てる方法。

CodiMDサーバー作成

こちらの記事にGCP環境でDockerを使ったCodiMDを立ち上げる手順を書いてます。

Cloudflareへの登録

こちらからどうぞ。

Cloudflareネームサーバーの登録

まずCloudflare Accessを利用するためにはドメインを取得する必要があります。
適当なところでドメインを取得した後、CloudflareのDNSに移管します。

Cloudflareのダッシュボードで表示されているとおりですが、以下のように登録します。

プライマリーネームサーバー : cruz.ns.cloudflare.com
セカンダリーネームサーバー : matt.ns.cloudflare.com

DNS設定をする

上のタイルからDNSを選択して設定しておきます。

Accessの設定

DNS設定が終わったらAccessで認証を設定します。
5アカウント分の認証は無料みたいですね。

Login Methodsの設定

ログイン認証で使用できるアプリケーションはこちらで選択できます。
今回はメールアドレスのドメイン単位で認証したかったのでデフォルトのOne-Time Pinだけでいきます。

（ちなみに右のCustomize Your Login Pageで認証ページのデザインがGUIで変更できました。）

Access Groupsの設定

アクセス可能なアカウントの管理を先に作成します。
今回は会社のドメインと自分のプライベートメールアドレスを追加しました。

Access Policiesの設定

アクセス制限をここでかけることができます。
「Create Access Policy」を選択します。

フォームに認証名やポリシー名を入力します。
今回は先に作成しておいたAccess Groupを許可（Allow）で設定しています。

以上でCloudflareの設定は完了です。

認証

取得しているドメインにアクセスしてみます。
Cloudflare Access設定前は普通にCodiMDの画面が表示されていたはずですが、こんな画面にリダイレクトされるようになります。

許可しているメールアドレスを入力しSend me a codeを選択すると認証メールが届きます。

のメール記載されているURLをクリックするか、以下の認証フォームにメールに記載されいてるコードを入力すれば認証されます。

認証が完了するといつもの画面が...！

認証済みアカウントの管理

Eventsで認証済みアカウントの管理ができます。

追加設定

このままではIP直打ちでCloudflareを経由せずアクセスできる状態なのでGCP側でCloudflareからの80番ポートのアクセスのみを許可する設定も入れておいたほうがいいと思います。

おわりに

これでいろいろと捗る！かもしれない。