自宅サーバーのプライベートアプリを、Cloudflare + Freenom + MyDNSでアクセスできるようにした話

## これまでの環境とオーバービュー
これまで、自宅の録画サーバー(EDCB,TVRemotePlus)や、開発機のcode-serverに接続するため、mydns.jp + Let's Encryptを使って、VPNやクライアント証明書認証でアクセスしてました。けれど、毎回のVPNの接続が面倒くさかったり、iPhoneやiPadでうまく認証出来なかったり(Appleのポリシー変更が原因と思ってる)と苦労。何かいい方法なはいかと思っていたとき、Cloudflareがすごいという話を聞いたのでこれを使ってみて、VPNや証明書なくアプリにアクセス出来るようにしてみたという話。
ちなみに、Argo tunnnelというものを使うことも出来るらしいけど、SSHとかを使うためには、ログインする端末にも設定が必要らしいので、これは見送りました。

## そもそもCloudflareとは
CDN(Contents Delivery Network)のサービス。簡単にいうと、常時SSL接続とプロキシーDNSを使うことで、サーバーの公開を安全に、しかも高速にすることが出来る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/49a31d52-f2d9-b5e5-94ff-f40d9198f738.png)


「でもお高いんでしょう？」
→→→なんとこれ、無料で十分に使えちゃうのです。
しかも、Cloudflare Accessを使えば、Googleアカウントの認証機能などをつけることも簡単にできちゃうんです。



## Freenomについて
Cloudflareを使うためには、独自ドメインが必要です。もともとMyDNSを使って無料で運用していたのもあって、無料で使えるFreenomのドメインを使ってみました。無料で取得できる分、安全性や継続性の問題はあるかもしれないけれど、セキュリティ対策はどんなドメインを使っていても同じく必要だし、アプリを一般に公開するわけではないので、気にせずに使うことにした。

**注意点：**
・更新期間が、有効期限前の14日間と短い
・最低でも　25アクセス/90日間　がないと、ドメインが削除されてしまう
・XFREEなど、一部サービスに登録できない
・CloudflareでDDNSのAPIが使えない　→　対策はCNAMEを使う(後述)

## Freenomの登録とDNS設定
[https://www.freenom.com/ja/index.html](https://www.freenom.com/ja/index.html)
ここから登録します。

登録の仕方は下のサイトがわかりやすいです。
[完全無料の独自ドメインを取得できるFreenomの使い方](https://www.lancork.net/2019/05/how-to-use-freenom-free-domain/)

ただし、ドメイン名の入力の仕方が変わったようで、ccTLD(.tkなど)も含めて入力しないと、うまく選択できなくなったようです。なので、ドメイン名をフルで入力するようにしてください。

ccTLDなしで検索した例
![TLDなしで検索した例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/d1600959-a0a8-7703-7c25-fd38479792f1.png)

.tkなどをつけると選択できる
![ccTLDありで検索した例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/5dc173d1-56a6-20b5-90eb-f8ebaf488fa0.png)

ネームサーバーは、Cloudflareを登録してから設定します。


## CloudFlareの登録とネームサーバーの設定
下の記事を参考にするとわかりやすいです。同じような手順の紹介はここでは省略します。
[CDNサービス「Cloudflare」でWebサイトをhttps化する](https://qiita.com/taketakekaho/items/1aa7768b2cc3915e819d)

取得したドメインを入力して、次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/db8c3fb4-eb84-8d54-03c7-d3343a0ae04b.png)

すると、設定すべきネームサーバーが表示されるので、freenomの方で設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/fa511db8-75db-6358-d72c-1a251204b681.png)
これで、freenomで取得したドメインからCloudflareが利用できるようになります。

## レコード・DDNSの設定
Cloudflareには、DNSを更新するAPIが公開されています。ところが、FreenomのドメインではAPIを利用して更新することが出来ませんでした。これは、CNAMEでこれまでのMyDNSのアドレスを指定することで解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/c9bd20a6-4474-c09e-38d1-5c06b159ae0a.png)
CloudFlareは、CNAME Flatteningという機能で、ルートドメインに対しても別のドメインを指定することが出来る。
あとは、Diceなり、crontabなりでMyDNSにIPアドレスを通知するだけ。
これで自前のサーバーのIPアドレスが変わっても、Cloudflare + mydnsを通してアクセス出来るようになります。

## CloudFlare Accessの設定
これまでクライアント証明書認証を利用していた代わりに、Cloudflare Accessで認証の設定をする。
これも無料なんてすごい。登録にクレカは必要なようですが、無料プランを選択していれば課金されないようです。

まずは、認証方法の設定。今回は自分のGoogleアカウントでの認証を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/aa910734-9389-4ea4-780e-fb0b045dba5c.png)

少し手順が面倒くさいですが、Instructionに従うだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/1f3f0aff-1f71-1ffe-fff9-f52d797b95b7.png)

あとはApplicationsから認証をかけるURLを設定して、認証方式を指定してやるだけ。
Session Durationは最長の1ヶ月を選択して、認証したブラウザからは1ヶ月間アクセス可能にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/f1826a0e-af7d-5fd1-4d52-d3ee3623ceca.png)

ポリシーについては、全員がアクセス可能にして、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/f51a1733-921d-5f63-9a15-c2e449f33966.png)

認証については、自分のGoogleアカウントで認証するように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/78dd0d47-cee8-d470-88ba-b4e94a9d01fa.png)

## Webサーバーの設定
Linuxのサーバーから、各アプリへリバースプロキシするために、nginxを使っています。MyDNSのアドレスは、サーバーに向いているようになっているので、そのままではMyDNSのアドレスからCloudflareのプロキシーや認証なくアクセス出来てしまいます。ですので、アクセスしてくるドメインで振り分けをする必要があります。
今回、大元のhogehoge.gq以外は、IPアドレス直打ちも含めてアクセス出来ない設定にしました。
```Nginx:/etc/nginx/sites-available/default
# hogehoge.gq以外からのアクセスを444で遮断
server {
    listen       443 ssl default_server;
    server_name _;
    ssl_certificate /etc/ssl/certs/cert.pem;
    ssl_certificate_key /etc/ssl/private/key.pem;
    return 444;
}
```


また、必ずしも必須ではないけど、Cloudflareからサーバーへの接続もSSLにした方がいいので、そこも設定。
CloudflareのEdge Certificatesから、無料で証明書と秘密鍵をもらえます。それぞれサーバーの/etc/ssl/certs/cert.pemと/etc/ssl/private/key.pemへ保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/eae912bd-8a91-fc4d-795c-91deeba5df4c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/d7f19f31-2222-bb3d-d4c4-11a048dad102.png)

```Bash
sudo vi /etc/ssl/certs/cert.pem  #Origin Certificate を丸々コピーして貼り付け
sudo vi /etc/ssl/private/key.pem #Private key を丸々コピーして貼り付け
```


あとは、Cloudflareの設定で、SSLをFullに設定すれば、完全にSSLで接続できることになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532859/11f73542-86e4-6d47-62a9-ff5f55305f11.png)

```Nginx:/etc/nginx/sites-available/default
# hogehoge.gq以外からのアクセスを444で遮断
server {
    listen       443 ssl default_server;
    server_name _;
    ssl_certificate /etc/ssl/certs/cert.pem;
    ssl_certificate_key /etc/ssl/private/key.pem;
    return 444;
}

# hogehoge.gqのSSL証明書の指定とリバースプロキシの設定
server {
    listen  443 ssl;
    server_name  hogehoge.gq;

    ssl_certificate /etc/ssl/certs/cert.pem;
    ssl_certificate_key /etc/ssl/private/key.pem;

    location /code/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }

    #・・・・・・・

}
```

```Bash:nginxを再起動
sudo systemctl restart nginx
```


## 余談：接続可能にしているアプリについて
録画サーバー(Windows)では、[tsukumijima](https://github.com/tsukumijima)氏のEDCBやTVRemotePlus　→　[つくみ島だより](https://blog.tsukumijima.net/article/ts-dtv-soft/)
開発機(Ubuntu)では、[code-server](https://github.com/coder/code-server)

を使っています。
どのアプリもPWA(Progressive Web Apps)で動作するようになっていて、WindowsでもiPadでもAndroidでも、どの端末でもネイティブアプリのように動作させることが出来ます。
毎日の生活にすごく役立ってます。開発者の方に感謝！！！

PWAの使用にはSSLの利用が必須です。これまでの自宅サーバー環境では、MyDNSにLet's Encryptを使っていましたが、Cloudflareを使うと簡単に設定できるし、認証も設定することが出来ます。やっぱCloudFlareすごい。いい時代になったものですね。

## 総括
IaaSやPaaSなどクラウドの時代とはいえ、録画サーバーや外付けデバイスの利用など、自宅サーバーの利用が必要なことはたくさんあります。CloudFlareやその他諸々を利用すれば、簡単・安全に、自分だけのアプリを公開することが出来るので、ぜひやってみてください。