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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
muno92
PRO
January 28, 2026
Programming
110
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Cloudflare Tunnelで開発環境をインターネットに公開する
muno92
PRO
January 28, 2026
More Decks by muno92
See All by muno92
PHPでバイナリをパースして理解するASN.1
muno92
PRO
0
510
forteeの改修から振り返るPHPerKaigi 2026
muno92
PRO
3
370
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
260
PsySHから紐解くREPLの仕組み
muno92
PRO
1
850
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
700
Appleウォレット / Googleウォレットに チケットを保存する方法
muno92
PRO
2
4.6k
歴史を重ねたシステムの開発に趣味で関わり始めて
muno92
PRO
1
610
PHPでGoogle Walletにチケットを追加する
muno92
PRO
0
860
カンファレンススタッフはいいぞ
muno92
PRO
1
420
Other Decks in Programming
See All in Programming
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
230
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
130
スマートグラスで並列バイブコーディング
hyshu
0
120
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
160
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.3k
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
tk3fftk
5
710
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
gawa
12
3.6k
Lemonade + Foundry Toolkit でお手軽アプリ開発
seosoft
1
320
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
shogogg
0
220
New "Type" system on PicoRuby
pocke
1
830
A2UI という光を覗いてみる
satohjohn
1
130
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
j_lee
0
110
Featured
See All Featured
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
150
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
200
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
54k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
300
GraphQLとの向き合い方2022年版
quramy
50
15k
The Curious Case for Waylosing
cassininazir
1
380
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Statistics for Hackers
jakevdp
799
230k
The Invisible Side of Design
smashingmag
302
52k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.2k
Docker and Python
trallard
47
3.9k
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