Cloudflare Accessを使ってサクッと認証機能付きメモ帳をつくる

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

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

## CodiMDサーバー作成

[こちらの記事](https://qiita.com/higuo/items/3ebdca4d736ef158b893)にGCP環境でDockerを使ったCodiMDを立ち上げる手順を書いてます。

## Cloudflareへの登録

[こちら](https://www.cloudflare.com/)からどうぞ。

## Cloudflareネームサーバーの登録

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

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

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

## DNS設定をする

上のタイルからDNSを選択して設定しておきます。
![スクリーンショット 2019-11-13 22.30.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/a398ade7-2c0e-391a-947d-4ca073b7728d.png)

## Accessの設定

DNS設定が終わったらAccessで認証を設定します。
5アカウント分の認証は無料みたいですね。
![スクリーンショット 2019-11-09 21.04.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/39a103ac-5014-b96b-bbe7-d2c98e4a0ee5.png)

### Login Methodsの設定

ログイン認証で使用できるアプリケーションはこちらで選択できます。
今回はメールアドレスのドメイン単位で認証したかったのでデフォルトのOne-Time Pinだけでいきます。
![スクリーンショット 2019-11-13 22.41.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/88312345-2b32-ae25-aed5-612f94369de9.png)
（ちなみに右のCustomize Your Login Pageで認証ページのデザインがGUIで変更できました。）

### Access Groupsの設定

アクセス可能なアカウントの管理を先に作成します。
今回は会社のドメインと自分のプライベートメールアドレスを追加しました。
![スクリーンショット 2019-11-13 22.45.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/bdb1ad21-26c5-0e59-646f-bddd1d6aa6b1.png)

### Access Policiesの設定

アクセス制限をここでかけることができます。
「Create Access Policy」を選択します。
![スクリーンショット 2019-11-13 22.50.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/11cb3fa7-9b66-df6d-979c-8db4d49ebe2a.png)

フォームに認証名やポリシー名を入力します。
今回は先に作成しておいたAccess Groupを許可（Allow）で設定しています。
![スクリーンショット 2019-11-13 22.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/380dd3b5-03e1-85c1-8ffb-0f37e107ead2.png)

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

## 認証

取得しているドメインにアクセスしてみます。
Cloudflare Access設定前は普通にCodiMDの画面が表示されていたはずですが、こんな画面にリダイレクトされるようになります。
![スクリーンショット 2019-11-13 22.58.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/006026b4-7e02-86a0-6a52-ec9b2de5ad95.png)

許可しているメールアドレスを入力しSend me a codeを選択すると認証メールが届きます。
![スクリーンショット 2019-11-13 23.00.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/0a9c8a7f-7dd7-b0b6-3813-42f11a05545c.png)


:point_up:のメール記載されているURLをクリックするか、以下の認証フォームにメールに記載されいてるコードを入力すれば認証されます。
![スクリーンショット 2019-11-13 23.00.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/55c33cc6-e9de-74c6-7a25-b0e8c551a58e.png)

認証が完了するといつもの画面が...！
![スクリーンショット 2019-11-13 23.02.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/2b4c0995-1e68-993f-b633-3ee13f2ceec9.png)

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

Eventsで認証済みアカウントの管理ができます。
![スクリーンショット 2019-11-13 23.21.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35884/4627eee3-076f-8027-41df-ac55dd71d7d3.png)


## 追加設定

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

## おわりに

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