TryToUseCloudFlareTunnel_20230317.pdf

2023/3/17にエンジニアカフェ福岡で開催されたcloudflare meetup fukuokaでのLT資料です

https://cfm-cts.connpass.com/event/272936/

Transcript

1. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. Cloudflare Tunnelを使ってみた 木村健一郎 2023年3月17日 Cloudflare Meetup Fukuoka @エンジニアカフェ福岡
2. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 名前:木村健一郎 所属:株式会社オルターブース JAWS-UG福岡 AWS Community builders(2022/Q3) SORACOM UG九州 娘ちゃんのパパ(5歳8ヶ月) お仕事:テクニカルアーキテクト 受賞歴:AWS Samurai 2019 SORACOM MVC 2021 好きなCloudflareサービス :Tunnel,Workers(予定)
3. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. Cloudflare Tunnelとは https://www.cloudflare.com/ja-jp/products/tunnel/
4. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. Cloudflareの後ろに置いたOriginサーバのロックダウン (Cloudflare経由以外の通信の遮断)をしたいときに使う サービス。通信経路の最適化にもなる。 オリジンサーバの安全性確保
5. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. Front DoorからVNETの中のプライベートなオリジンに対して Private Linkでアクセスするようにする 例えばAzureでいうとこういうこと
6. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. セキュリティグループでCloudFrontのマネージドプレ フィックスリストを使う CloudFrontとEC2(など)の間はパブリックネットワーク (AWSの内部ネットワークではあるが、他のAWSの通信と 共用) 例えばAWSでいうとこういうこと(多分) Security group
7. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. Web以外にも使える HTTP以外にも多くのプロトコルに対応しています。 画面で選べる設定には以下のものがありました • HTTP • HTTPS • UNIX • TCP • SSH • RDP • UNIX+TLS • SMB • HTTP_STATUS
8. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. ネットワーク要件 オリジンサーバから外向きの通信は以下を開ける必要があります。 Protocols Port Destination TCP/UDP (h2mux, http2, and quic) 7844 region1.v2.argotunnel.com TCP/UDP (h2mux, http2, and quic) 7844 region2.v2.argotunnel.com TCP (HTTPS) 443 api.cloudflare.com TCP (HTTPS) 443 update.argotunnel.com
9. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. やってみた まずはWebから。ローカルホストでC#(.NET7)のサンプルWebアプリケーションを動 かしておきます。 上記の通り、 http://localhost:5097/ で待ち受けています。
10. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. CloudflareのコンソールからWebsiteを追加します
11. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 私は独自ドメン持ってたのでそれを入れてみます。 検証なのでFreeプランでいきましょう。
12. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. おっと、cloudflareに権威サーバを移せとな。 Route53の検証はしたいのでこれは困った・・・
13. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. しょうがないので(え？)新規ドメインをcloudflareで取得。 .winドメインは$3.16/年だったのでまぁいいか。
14. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. ドメイン設定できたので、メニューから「Zero Trust」 にアクセスします。
15. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 適当なチーム名を入れます
16. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. ここもフリープランで
17. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. まだ支払い方法を入れてないのであれば「Add payment method」からカードを追加し、「Next」を押す
18. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. おりょ、またこの画面？しかも再度Team nameを入れても進まず・・。 一度リロードしてTeam name入れたら進みました。
19. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. Access>Tunnelsで「Create a tunnel」を選びます
20. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. トンネル名を入れます
21. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 対象のマシンのアーキテクチャを選択して、トンネル を掘るためのソフト(cloudflared)をダウンロードします
22. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 警告出ても気にせず進みます
23. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. ダウンロード画面にあったコマンドを、管理者権限で 実行します
24. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. WebSitesで登録したドメインが選べるようになってる ので、選択します。
25. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. このままだとアクセスする際にドメイン名だけで繋ぐことになるのでホスト名を Subdomainに入れます。 「DNSレコードないからこのままだとちゃんと動かないかもよ？」と言われるが気に しない。
26. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. サービスタイプでHTTPを選び、URLに localhost:5097を 入れて「Save tunnel」します
27. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. できあがり！ では、早速 http://(設定したホスト名.選んだドメイ ン名)/ にアクセスしてみましょう
28. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 無事接続できました！ (ドメイン伏せてるから分かりにくいですが・・・)
29. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. トンネルを作ると、指定したホスト名のCNAMEレコードが自動的に追加 されていました。 ターゲットは トンネルID.cfargotunnel.com になっています。 ただし、この名前で接続しようとしてもできませんでした。そしてProxy StatusというDNSでは見慣れない設定が。
30. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 気になったので、設定したホスト名でdigってみると・・・Aレコードが返ってきてる。 CloudflareのDNSサーバが内部的にトンネルの設定やクライアントに応じたAレコードを決 定して返すような動作をすることで適切なエッジに誘導してるのかなと推測。
31. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 次はsshを試してみましょう。 sshdの動いているWSL環境でcloudflaredを動かし、ServiceのTypeをSSHにして トンネルを追加します。
32. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. クライアントにもcloudflaredを入れておき、~/.ssh/config ファイルに上記 のように設定を追加します。 Hostの後ろにアクセス先ホスト名、ProxyCommandにcloudflaredのインス トール先と引数を記載します。このProxyCommandでcloudflaredを使うの がミソです(もう1つ方法がありますがここでは割愛) 上記ではUserパラメータも記載してますが、その辺りは必要に応じて記 載します。
33. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. 設定したホスト名に向け てsshしてみると無事WSL に繋がりました！ IPアドレスがローカルア ドレスになってるのが分 かりますね。
34. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved. まとめ •Cloudflareトンネルは、ドメインさえ準備できれば無料で トンネル掘れて便利 •オリジンサーバには固定のIPアドレスどころかグローバル IPアドレスも不要。NATの内側でOK。 •プロトコルも複数対応してる。というか対応プロトコルに TCPがあるからなんでもいける? •Cloudflareは他のサービスも面白そうなので試してみたい
35. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.