QNAP NASサーバーにCloudflare Tunnel入れてオマケで認証掛ける

## 前書き
ものすごく私毎なのですが最近引っ越しすることにしました。しかし、そこの物件が**無料インターネット回線**になっていました。不動産屋曰く、人気のオプションらしいです。帯域以前にQiitaを見ているようなVPNや自鯖を立てている層にとっては好きに設定が出来ずデメリットも大きいと思います。また、今流行りの5G回線ホームルーターもグローバルIPアドレスを貰えず同じ状況と考えられます。
そこで**Cloudflare Tunnel**を使いサーバー公開したいという記事です。ちなみにVPNは**Tailscale**を入れたのでそれもそのうち記事にしようと思います。

## 前提条件
- QNAP NASサーバー上でのセットアップ
- Cloudflareを使いドメインを登録済み

## 0\. やりたいこと／目標
- ポート開放無しにLAN内のサーバー（ウェブページ）を公開する
- 公開されたサーバー（ウェブページ）にCloudflareの機能で認証を掛ける

## 1\. Cloudflare上でのトークン作成
**1\. Cloudflareへとログインし[Zero Trust] -> [Access] -> [Tunnels]と選択**
- なお初回アクセスだとZero Trustのチーム名を設定するように言われます。後から変更可能なので適当で良いと思います。
 
**2\. [Create a tunnel]からTunnel設定を作成**
- 適当な名前を付けて作成すると「*ey~~~*」から始まるトークンを取得出来ます。

## 2\. QNAP NASサーバー上での設定
**1\. [Container Station]上の探索ボタンからCloudflare/Cloudflaredをデプロイ**
**2\. Cloudflaredイメージの設定**
- 詳細設定から２箇所を変更しました。
```テキスト:[コマンド:] -> [Override]
tunnel run -token ey~~~
```
```テキスト:[ネットワーク] -> [カスタム]
Hostに設定
```
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/f473f5f9-a274-da0d-07d8-eb49b8b10b37.jpeg)![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/ac1052b1-b0b4-91f3-5baf-c6a9e2d6b451.jpeg)








## 3\. Cloudflare上でのTunnel設定
**1\. Cloudflareへとログインし[Tunnels]の疎通確認**
- 上記のコンテナ作成が上手く行っていればStatusがHEALTHYに代わり疎通を確認できます。

**2\. [Public Hostname]の作成**
- そのままで悩む点も無いと思いますが公開したい自鯖のローカルIPを指定してあげます。
- 未だCloudflareによる認証が掛かっていないので公開不可のページについてはご注意下さい。
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/201e9287-0b7a-a384-515b-971dc3e1bf5c.jpeg)

## 4\. Cloudflareによる認証設定
- 認証を掛けるのはちょっと面倒でした。上記のTunnelに直接認証は掛けられずZero trustの機能でアプリ登録を行い、それに作成したACLグループを設定するような手順です。また、おま環なのかこのやり方が悪いのか分かりませんが認証の反映に少々ラグがあったのもご注意下さい。

**1\. Zero TrustのACLグループ作成**
- アクセス許可するメールアドレスを登録します。後ほど分かりますが、認証画面にメールアドレスを入力し許可されたメールアドレスの場合にはPINコードが届く仕組みです。
- 色々と条件を組み合わせられ、**Include**,**Require**,**Exclude**と設定出来るようです[^1]。
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/a300a53c-37c5-737a-43d2-9da5aa8db451.jpeg)


**2\. アプリケーションの作成**
- 色々と設定ページが出てきますが要点は3点です。Self-hostedで作成しました。
①アクセスするURLを設定（Tunnelと同じドメインを指定）
②セッションタイムアウトの設定
③適用するACLグループの設定
④セキュリティ設定（お好みで）
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/c5c86529-9c9b-f09a-5350-bd817293a4a6.jpeg)![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/ed90937b-01fe-8ae9-62c8-df1e03a207da.jpeg)
- ちなみにACLグループ以外にアプリ別に追加の認証も掛けられるようです[^1]。非推奨のようですがIPアドレスが決まり切っている場合は**Bypass**設定してあげるとメールアドレス認証よりも優先され、そのIPアドレスからであれば認証無しでアクセス可能になります。

## 5\. 動作確認
**1\. 正常なアクセスパターン**
- 認証ページが表示されメールアドレスの入力を求められます。登録済みメールアドレスするをそこにPINコードが届き認証できます。
![スクリーンショット 2023-11-06 22.48.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/5bd03192-43b8-14e2-ba16-76dc12e5d35c.jpeg)![スクリーンショット 2023-11-06 22.49.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/0879a598-ccb8-f547-f900-1ef983969436.jpeg)


**2\. ダメなアクセスパターン**
- ブラウザのシークレットモードでアクセスすると認証画面が表示されることを確認しました（そもそもちゃんと認証が掛かっているかの確認という意味で）
- 許可登録していないサブメールアドレスを入力しましたがPINコードは届きません

## ５\. まとめ
- QNAP NASサーバーを利用しCloudflare Tunnelを導入
- LAN内のサーバー（ウェブページ）をインターネット上へと公開
- 公開されたサーバー（ウェブページ）へとCloudflareの機能による認証付与

## ６\. アップデート方法
恥ずかしいお話なんですがContainer Stationでイメージのアップデート方法が分からず、さっき手探りでようやくアプデできたので追記・備忘録しておきます。
コンテナ一覧から[再作成]を実行し、作成画面では[コンテナを作成する前にレジストリからイメージをプルしてみてください。]にチェックを入れます。起動オプション等は引き継がれているのでそのまま実行するだけで設定を残しつつアップデートできました。
![スクリーンショット 2024-04-06 100430.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/aec23f24-0871-7682-4ffd-8355fdd97031.jpeg)
![スクリーンショット 2024-04-06 100503.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/591227b9-aa7c-71fc-cce6-f5c26d7fb370.jpeg)

## 後書き
別記事で書いたようにDTV関係やメディアサーバーを公開し実家に帰省したときに撮り溜めた録画を見ています。VPNに入ってアクセスするようにしても良いんですが何となくクライアント側の手間が少ない気がしてこっちの方式です。
ちなみに新居の鍵は来週に受取るのでネット回線のスピードテスト等々が楽しみです。速ければ文句無いですが遅いならホームルーターの契約も考えています。数十Mbpsが安定して出るくらいに中途半端に速いと迷いますね…。今ってサーバー側も強くなったのでゲームデータのDLとか結構な速度が出てくれますし。ただ、ホームルーターもホームルーターでアップロードが全然出ないという弱点も。
NIC 2枚挿し設定を考える時が来たのかもしれないです。（このNASは標準でLANポートが２つ！！）

## 参考文献
1\. [How to Implement Cloudflare Tunnel on QNAP NAS](https://savoir-faire.neocities.org/?page=how_to_implement_cloudflare_tunnel_on_qnap_nas)
2\. [ローカルに立てたアプリケーションを、Cloudflareを使って独自ドメインかつ認証機能付きで限定公開する](https://zenn.dev/yag_ays/articles/b684879cc6349a)

## 注釈
[^1]: [Products > Cloudflare Zero Trust > Policies > Access](https://developers.cloudflare.com/cloudflare-one/policies/access/)