Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TryToUseCloudFlareTunnel_20230317.pdf

 TryToUseCloudFlareTunnel_20230317.pdf

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

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

Ken'ichirou Kimura

March 18, 2023
Tweet

More Decks by Ken'ichirou Kimura

Other Decks in Technology

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide