僕は発展途上技術者

ngrokやserveoなしでローカルで開発しているサイトに外部からアクセスする方法

Webシステムを開発していると、ローカルで開発中のサイトに外部からアクセスして確認したいという必要が良くでてきます。スマホ向けのレイアウトを確認したいとき、位置情報を使ったサービスなどの場合は、スマホからhttpsでアクセスして確認する必要があります。(iPhoneのSafariからだとhttpsでないと位置情報へのアクセスが許されないので)

このような場合、今まではngrokという便利ツールを使っていたのだが、無料プランの場合、生成される外部からアクセス可能なアドレスが毎回違ったり、一秒間に許されるアクセスに制限がかかっていたりしてちょっと不便でした。

ngrokに代わってServeroというツールがこれらの欠点がなくて便利だ、という記事をQiitaなどで見かけたのだが、数日前からアクセスできなくなっていました。

そこで、これらに代わるサービスや方法がないかと探していたら、

» Ngrok? You Might Not Need It

などの記事で、何のことはないsshのポートフォワーディングの機能を使えば同等のことが、追加で何かをインストールする必要なくできることを知りました。

ただ、sshのポートフォワーディングだけでは、httpの通信はできるが、httpsの通信を転送できなくて困っていました。いろいろ試行錯誤してみた結果、golang製のCaddyというWebサーバーを使えば簡単にできることがわかったので、その方法を紹介します。

前提

自由にアクセスできるサーバーと独自ドメインを持っていることが前提です。開発者であれば、VPSサーバーの1台や2台、独自ドメインもいくつか持っているんじゃないでしょうか。

もし持っていなければ、Digital Oceanあたりで月額5ドルから借りられます。

ドメインももし持っていなければ、Google Domainsで.devドメインでも取っておきましょう。

sshポートフォワーディング

借りているサーバーにはssh接続できるものとします。

ローカルの3000番ポートで動かしているサービス(http://localhost:3000)に接続したいとして、

ssh -R 3001:localhost:3000 yourdomain.com

をターミナルから実行するだけで、iPhoneなどから

http://yourdomain.com:3001

でアクセスできるようになります。

sshのコマンドの意味は、-Rがリバースプロキシを意味し、次の

3001:localhost:3000

は、続くドメインの3001番ポートに来たアクセスをlocalhost:3000に転送するという意味です。

3000:localhost:3000

とすれば、ポートを合わせることもできるのですが、わかりやすく番号を変えておきました。

これだけでいままでngrokでおこなっていたことができ、しかもアクセス数に制限がなく、またドメインも変わらなくて便利なのですが、https通信をフォワードできないのがいまいちです。

次にcaddyを使ってhttpsを転送する方法を紹介します。

caddyとあわせて使ってhttpsをフォワーディング

借りているサーバーにcaddyをインストールします。

DownloadLatest releaseのページよりOSにあったビルドをダウンロードしてください。

筆者の場合はUbuntu 64bitなので、caddy_v1.0.3_linux_amd64.tar.gzをダウンロードし、

% mkdir caddy
% cd caddy
% wget https://github.com/caddyserver/caddy/releases/download/v1.0.3/caddy_v1.0.3_linux_amd64.tar.gz
% tar xvf caddy_v1.0.3_linux_amd64.tar.gz

で解凍します。 同じフォルダに以下の内容でCaddyfileを作成します。yourdomain.comには借りているサーバーに向いている自分のドメインに替えてください。

yourdomain.com

proxy / 127.0.0.1:8080 {
  transparent
}

proxy /tunnel 127.0.0.1:8080 {
  transparent
  websocket
}

同じフォルダで、

./caddy

を実行すると、caddyが起動します。caddyは動的に証明書を取得する仕組みがあるため、これだけの設定でhttps接続が可能です。

ブラウザで

https://yourdomain.com

にアクセスしてみましょう。

Caddyfileの設定によると、httpsへのアクセスは8080にプロキシされるのですが、8080には何もサービスがないため、

502 Bad Gateway

と表示されるはずです。

ここで、ローカルマシン上で、

ssh -R 8080:localhost:3000 yourdomain.com

を実行すると、yourdomain.comの8080ポートへのアクセスがlocalhostの3000番にフォワードされるので、

https://yourdomain.com

でlocalhost:3000にアクセスできるようになります。

まとめ

sshポートフォワーディングとcaddyを使い、ngrokやserveoなしでローカルで開発しているサイトに外部からhttpsでアクセスできるようになりました。

読書メモ - 8月に読んだ本

三体
三体
posted with amazlet at 19.09.03
劉 慈欣
早川書房
売り上げランキング: 136

途中までは、これどうなんだろう?と思ってたしなかなか読み進めなかったのですが、途中からは展開が加速、一気に読み終わりました。噂に違わず、とても面白かった。いやあ、基礎研究って大事だなあ、と思いました :) (薄い感想ですみません)

ハロー・ワールド
ハロー・ワールド
posted with amazlet at 19.09.03
藤井 太洋
講談社
売り上げランキング: 32,654

読み終わって、何かまた新しいWebサービスとか作りたくなった。Twitterとかマストドン、iPhone の初期の頃に興奮したエンジニアの人にはおすすめ。それ以外の人には、うーむ、この面白さはわかるのだろうか。。

プロフィール

株式会社まちクエスト代表、つくる社LLC代表。

Scratchで楽しく学ぶ アート&サイエンスRaspberry Piではじめる どきどきプログラミングを書きました。

Amazonから図書館検索 Libron、iPhoneアプリ ひらがなゲーム かなぶん を作っています。

Email: webmaster at champierre dot com

Twitter @jishiha

最近のエントリー

アーカイブ