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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
muno92
PRO
January 28, 2026
Programming
0
73
Cloudflare Tunnelで開発環境をインターネットに公開する
muno92
PRO
January 28, 2026
Tweet
Share
More Decks by muno92
See All by muno92
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
230
PsySHから紐解くREPLの仕組み
muno92
PRO
1
800
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
630
Appleウォレット / Googleウォレットに チケットを保存する方法
muno92
PRO
2
4.3k
歴史を重ねたシステムの開発に趣味で関わり始めて
muno92
PRO
1
580
PHPでGoogle Walletにチケットを追加する
muno92
PRO
0
820
カンファレンススタッフはいいぞ
muno92
PRO
1
400
PHPerKaigi 2022をきっかけにPHPStanにコントリビュートした話 / PHPerKaigi makes me PHPStan's Contributor
muno92
PRO
0
880
Other Decks in Programming
See All in Programming
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
nnaka2992
1
360
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
kentaroutakeda
3
1.9k
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
nnaka2992
1
330
Codex の「自走力」を高める
yorifuji
0
1.3k
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
o8n
4
1.4k
Nuxt Server Components
wattanx
0
110
The free-lunch guide to idea circularity
hollycummins
0
340
PHPで TLSのプロトコルを実装してみる
higaki_program
0
430
Angular-Apps smarter machen mit Gen AI: Lokal und offlinefähig - Hands-on Workshop!
christianliebel
PRO
0
130
Vuetify 3 → 4 何が変わった?差分と移行ポイント10分まとめ
koukimiura
0
190
ふつうの Rubyist、ちいさなデバイス、大きな一年
bash0c7
0
1.1k
メッセージングを利用して時間的結合を分離しよう #phperkaigi
kajitack
3
320
Featured
See All Featured
Odyssey Design
rkendrick25
PRO
2
560
The Cost Of JavaScript in 2023
addyosmani
55
9.8k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
250
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
150
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
230
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
410
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
450
How GitHub (no longer) Works
holman
316
150k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
290
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