Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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