TryToUseCloudFlareTunnel_20230317.pdf

Transcript

1. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
   Cloudflare Tunnelを使ってみた
   木村健一郎
   2023年3月17日
   Cloudflare Meetup Fukuoka
   @エンジニアカフェ福岡
   

   View Slide

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(予定)
   

   View Slide

3. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
   Cloudflare Tunnelとは
   https://www.cloudflare.com/ja-jp/products/tunnel/
   

   View Slide

4. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
   Cloudflareの後ろに置いたOriginサーバのロックダウン
   (Cloudflare経由以外の通信の遮断)をしたいときに使う
   サービス。通信経路の最適化にもなる。
   オリジンサーバの安全性確保
   

   View Slide

5. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
   Front DoorからVNETの中のプライベートなオリジンに対して
   Private Linkでアクセスするようにする
   例えばAzureでいうとこういうこと
   

   View Slide

6. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
   セキュリティグループでCloudFrontのマネージドプレ
   フィックスリストを使う
   CloudFrontとEC2(など)の間はパブリックネットワーク
   (AWSの内部ネットワークではあるが、他のAWSの通信と
   共用)
   例えばAWSでいうとこういうこと(多分)
   Security group
   

   View Slide

7. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
   Web以外にも使える
   HTTP以外にも多くのプロトコルに対応しています。
   画面で選べる設定には以下のものがありました
   • HTTP
   • HTTPS
   • UNIX
   • TCP
   • SSH
   • RDP
   • UNIX+TLS
   • SMB
   • HTTP_STATUS
   

   View Slide

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
   

   View Slide

9. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
   やってみた
   まずはWebから。ローカルホストでC#(.NET7)のサンプルWebアプリケーションを動
   かしておきます。
   上記の通り、 http://localhost:5097/ で待ち受けています。
   

   View Slide

10. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    CloudflareのコンソールからWebsiteを追加します
    

    View Slide

11. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    私は独自ドメン持ってたのでそれを入れてみます。
    検証なのでFreeプランでいきましょう。
    

    View Slide

12. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    おっと、cloudflareに権威サーバを移せとな。
    Route53の検証はしたいのでこれは困った・・・
    

    View Slide

13. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    しょうがないので(え？)新規ドメインをcloudflareで取得。
    .winドメインは$3.16/年だったのでまぁいいか。
    

    View Slide

14. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    ドメイン設定できたので、メニューから「Zero Trust」
    にアクセスします。
    

    View Slide

15. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    適当なチーム名を入れます
    

    View Slide

16. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    ここもフリープランで
    

    View Slide

17. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    まだ支払い方法を入れてないのであれば「Add payment
    method」からカードを追加し、「Next」を押す
    

    View Slide

18. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    おりょ、またこの画面？しかも再度Team nameを入れても進まず・・。
    一度リロードしてTeam name入れたら進みました。
    

    View Slide

19. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    Access>Tunnelsで「Create a tunnel」を選びます
    

    View Slide

20. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    トンネル名を入れます
    

    View Slide

21. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    対象のマシンのアーキテクチャを選択して、トンネル
    を掘るためのソフト(cloudflared)をダウンロードします
    

    View Slide

22. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    警告出ても気にせず進みます
    

    View Slide

23. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    ダウンロード画面にあったコマンドを、管理者権限で
    実行します
    

    View Slide

24. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    WebSitesで登録したドメインが選べるようになってる
    ので、選択します。
    

    View Slide

25. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    このままだとアクセスする際にドメイン名だけで繋ぐことになるのでホスト名を
    Subdomainに入れます。
    「DNSレコードないからこのままだとちゃんと動かないかもよ？」と言われるが気に
    しない。
    

    View Slide

26. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    サービスタイプでHTTPを選び、URLに localhost:5097を
    入れて「Save tunnel」します
    

    View Slide

27. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    できあがり！
    では、早速 http://(設定したホスト名.選んだドメイ
    ン名)/ にアクセスしてみましょう
    

    View Slide

28. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    無事接続できました！
    (ドメイン伏せてるから分かりにくいですが・・・)
    

    View Slide

29. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    トンネルを作ると、指定したホスト名のCNAMEレコードが自動的に追加
    されていました。
    ターゲットは トンネルID.cfargotunnel.com になっています。
    ただし、この名前で接続しようとしてもできませんでした。そしてProxy
    StatusというDNSでは見慣れない設定が。
    

    View Slide

30. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    気になったので、設定したホスト名でdigってみると・・・Aレコードが返ってきてる。
    CloudflareのDNSサーバが内部的にトンネルの設定やクライアントに応じたAレコードを決
    定して返すような動作をすることで適切なエッジに誘導してるのかなと推測。
    

    View Slide

31. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    次はsshを試してみましょう。
    sshdの動いているWSL環境でcloudflaredを動かし、ServiceのTypeをSSHにして
    トンネルを追加します。
    

    View Slide

32. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    クライアントにもcloudflaredを入れておき、~/.ssh/config ファイルに上記
    のように設定を追加します。
    Hostの後ろにアクセス先ホスト名、ProxyCommandにcloudflaredのインス
    トール先と引数を記載します。このProxyCommandでcloudflaredを使うの
    がミソです(もう1つ方法がありますがここでは割愛)
    上記ではUserパラメータも記載してますが、その辺りは必要に応じて記
    載します。
    

    View Slide

33. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    設定したホスト名に向け
    てsshしてみると無事WSL
    に繋がりました！
    IPアドレスがローカルア
    ドレスになってるのが分
    かりますね。
    

    View Slide

34. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    まとめ
    •Cloudflareトンネルは、ドメインさえ準備できれば無料で
    トンネル掘れて便利
    •オリジンサーバには固定のIPアドレスどころかグローバル
    IPアドレスも不要。NATの内側でOK。
    •プロトコルも複数対応してる。というか対応プロトコルに
    TCPがあるからなんでもいける?
    •Cloudflareは他のサービスも面白そうなので試してみたい
    

    View Slide

35. Copyright © 2015-2023 ALTERBOOTH inc. All Rights Reserved.
    

    View Slide