LoginSignup
6
6

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-11-13

Cloudflare Accessって便利なんですね:relaxed:
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を選択して設定しておきます。
スクリーンショット 2019-11-13 22.30.35.png

Accessの設定

DNS設定が終わったらAccessで認証を設定します。
5アカウント分の認証は無料みたいですね。
スクリーンショット 2019-11-09 21.04.26.png

Login Methodsの設定

ログイン認証で使用できるアプリケーションはこちらで選択できます。
今回はメールアドレスのドメイン単位で認証したかったのでデフォルトのOne-Time Pinだけでいきます。
スクリーンショット 2019-11-13 22.41.48.png
(ちなみに右のCustomize Your Login Pageで認証ページのデザインがGUIで変更できました。)

Access Groupsの設定

アクセス可能なアカウントの管理を先に作成します。
今回は会社のドメインと自分のプライベートメールアドレスを追加しました。
スクリーンショット 2019-11-13 22.45.40.png

Access Policiesの設定

アクセス制限をここでかけることができます。
「Create Access Policy」を選択します。
スクリーンショット 2019-11-13 22.50.39.png

フォームに認証名やポリシー名を入力します。
今回は先に作成しておいたAccess Groupを許可(Allow)で設定しています。
スクリーンショット 2019-11-13 22.51.18.png

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

認証

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

許可しているメールアドレスを入力しSend me a codeを選択すると認証メールが届きます。
スクリーンショット 2019-11-13 23.00.31.png

:point_up:のメール記載されているURLをクリックするか、以下の認証フォームにメールに記載されいてるコードを入力すれば認証されます。
スクリーンショット 2019-11-13 23.00.12.png

認証が完了するといつもの画面が...!
スクリーンショット 2019-11-13 23.02.54.png

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

Eventsで認証済みアカウントの管理ができます。
スクリーンショット 2019-11-13 23.21.06.png

追加設定

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

おわりに

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

6
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6