Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cloudflare Tunnelで開発環境をインターネットに公開する
Search
muno92
PRO
January 28, 2026
Programming
0
67
Cloudflare Tunnelで開発環境をインターネットに公開する
muno92
PRO
January 28, 2026
Tweet
Share
More Decks by muno92
See All by muno92
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
210
PsySHから紐解くREPLの仕組み
muno92
PRO
1
790
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
610
Appleウォレット / Googleウォレットに チケットを保存する方法
muno92
PRO
2
4.2k
歴史を重ねたシステムの開発に趣味で関わり始めて
muno92
PRO
1
570
PHPでGoogle Walletにチケットを追加する
muno92
PRO
0
800
カンファレンススタッフはいいぞ
muno92
PRO
1
400
PHPerKaigi 2022をきっかけにPHPStanにコントリビュートした話 / PHPerKaigi makes me PHPStan's Contributor
muno92
PRO
0
870
Other Decks in Programming
See All in Programming
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
nnaka2992
1
290
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
kztakasaki
2
510
Python’s True Superpower
hynek
0
190
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
170
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
nikkei_engineer_recruiting
0
150
ぼくの開発環境2026
yuzneri
1
290
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
510
CSC307 Lecture 13
javiergs
PRO
0
310
JPUG勉強会 OSSデータベースの内部構造を理解しよう
oga5
2
220
Oxlint JS plugins
kazupon
1
1.2k
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
yamatoya
0
500
Featured
See All Featured
Believing is Seeing
oripsolob
1
68
Game over? The fight for quality and originality in the time of robots
wayneb77
1
130
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
150
Practical Orchestrator
shlominoach
191
11k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
190
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
110k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.4k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
300
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
60
42k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
190
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
460
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.3k
Transcript
Cloudflare Tunnel で開発環境を インターネットに公開する 2026/1/24 第183 回 PHP 勉強会@東京 @muno_92
1
自己紹介 X ( 旧Twitter): @muno_92 PHPer 趣味: カンファレンススタッフ PHPerKaigi 2026
( コア) PHP カンファレンス小田原2026 ( コア) 2
( 宣伝) PHPerKaigi 2026 日程: 2026 年3 月20 日( 金祝)
〜22 日( 日) 会場: 中野セントラルパークカンファレンス & ニコニコ生放送 チケット販売中! PHPer Book Revue 募集中! 推しの本の紹介LT 、待ってます! https://phperkaigi.jp/2026/ 3
( 宣伝) PHP カンファレンス小田原2026 日程: 2026 年4 月11 日( 土)
会場: おだわら市民交流センター「UMECO 」 前夜祭 & 本編チケット販売中! キーノート ( オンラインセッション) Sebastian Bergmann さん! PHPUnit 作者 https://phpcon-odawara.jp/2026 4
こんなことありませんか? 開発中のソースをインターネット上で動かしたい OAuth を使った機能の開発でリダイレクト先としてhttps のアドレス が必要 連携先の外部サービスやモバイル端末からアクセスできるようにし たい 5
https 化だけなら色々方法はある 自己証明書を使う OrbStack のContainer domain names を使う https://docs.orbstack.dev/docker/domains#container-domain- names
6
https 化だけでは足りない場合がある OAuth で指定するredirect_url をインターネット上に公開しないと いけないサービス Google Workspace API など
Webhook など外部サービスからのリクエストを受け付けたい場合 ↓ インターネット上で開発中のソースを動かしたい 7
インターネット上に開発環境を公開するには インターネット上に公開した検証環境を用意してデプロイする デプロイが手間 8
インターネット上に開発環境を公開するには インターネット上に公開した検証環境を用意してデプロイする デプロイが手間 ngrok を使う 無料アカウントだと URL がランダム 固定URL は1
つしか使えない その固定URL も長くて覚えにくい・入力しにくい 9
そこでCloutflare Tunnel 10
Cloudflare Tunnel https://developers.cloudflare.com/cloudflare- one/networks/connectors/cloudflare-tunnel/ ローカル端末上で動かしているアプリケーションを 任意のサブドメイン.自分のドメイン で公開可能 使用可能なドメイン: ネームサーバーにCloudflare を使っているド
メイン 無料アカウントでもほぼ制限なしに使用可能 ※アクセス制御を掛けたりする場合は50 ユーザーまで 11
仕組み 端末上にcloudflared をデーモンとしてインストール つまり、コマンドを叩いた時だけ接続されるのではなく常時接続 Cloudflare のプロキシ経由で通信 12
使い方① トンネルを作成 Zero Trust > Networks / Manage Tunnels からトンネルを作成
1 端末1 トンネル 13
使い方② コネクタ(cloudflared) を接続 画面上に表示されたトークン付のコマンドを実行しセットアップ ※トークンは漏れないように注意!! 14
使い方③ ルーティングを設定 複数のアプリケーションを公開したい場合 トンネルに対してルーティングを追加する 15
これだけで設定完了 16
ちょっと試す方法も Quick Tunnels 1 コマンドで ランダムなサブドメイン.trycloudflare.com に公開できる 例) cloudflared tunnel
--url http://localhost:8080 https://developers.cloudflare.com/cloudflare- one/networks/connectors/cloudflare-tunnel/do-more-with- tunnels/trycloudflare/ 17
まとめ Cloudflare Tunnel で開発環境をインターネットに公開できる 公開用のドメインはCloudflare で管理する必要がある サブドメインは自由に設定可能 Cloudflare でドメインを管理していなくてもQuick Tunnels
で試せる 18
ご清聴ありがとうございました 19
補足) HTTP 以外の用途も SSH RDP など https://developers.cloudflare.com/cloudflare- one/networks/connectors/cloudflare-tunnel/use-cases/ 20
補足) cloudflared の実装 cloudflared からoutbound な通信でプロキシサーバーに接続してい る outbound な通信ならfirewall に弾かれにくい
outbound な通信の中で双方向通信 QUIC やHTTP/2 を使用 https://blog.cloudflare.com/getting-cloudflare-tunnels-to- connect-to-the-cloudflare-network-with-quic/ 21