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
110
0
Share
Cloudflare Tunnelで開発環境をインターネットに公開する
muno92
PRO
January 28, 2026
More Decks by muno92
See All by muno92
PHPでバイナリをパースして理解するASN.1
muno92
PRO
0
490
forteeの改修から振り返るPHPerKaigi 2026
muno92
PRO
3
360
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
260
PsySHから紐解くREPLの仕組み
muno92
PRO
1
850
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
690
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
GitHub Copilot CLIのいいところ
htkym
2
1.2k
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
1
600
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.1k
Lemonade + Foundry Toolkit でお手軽アプリ開発
seosoft
1
270
Copilot CLI の継戦能力を高める コンテキスト管理
nozomutu
1
1.2k
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
ternbusty
1
130
密結合なバックエンドから TypeScript のコードを生成する
kemuridama
1
690
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
hayatokudou
7
1.3k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.1k
SPMマルチモジュールで テストカバレッジを取得する技法
yosshi4486
0
140
権限チェックの一貫性を型で守る TypeScript による多層防御
mnch
4
1.1k
Make SRE Operations Easier with Azure SRE Agent
kkamegawa
0
3.2k
Featured
See All Featured
Are puppies a ranking factor?
jonoalderson
1
3.5k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.3k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
560
We Have a Design System, Now What?
morganepeng
55
8.2k
BBQ
matthewcrist
89
10k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Embracing the Ebb and Flow
colly
88
5.1k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.6k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
360
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
280
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
320
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.2k
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