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をインストールします。

DownloadかLatest 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でアクセスできるようになりました。