手軽にVPNネットワークを構築できるTailscaleを使い、ngrokなしでローカルで開発しているサイトに外部からアクセスする

2021.03.11

手軽にVPNネットワークを構築できるTailscaleを使い、ngrokなしでローカルで開発しているサイトに外部からアクセスする

Webシステムを開発していると、ローカルで開発中のサイトに外部からアクセスして確認したいという必要が良くでてきます。

ngrokやserveoなしでローカルで開発しているサイトに外部からアクセスする方法では ngrok の代わりに ssh と caddy を使った方法を紹介したのですが、Rebuild: 295: Point of No Return (hak) で紹介されていて知った VPN ネットワークを手軽に構築できる Tailscale を使うと、とても簡単に実現できたのでその方法を紹介します。

Tailscale で VPN ネットワークを構築

Tailscale を使って VPN ネットワークを構築するのはとても簡単です。まず、ダウンロード画面より、各 OS 向けのインストーラーをダウンロードしてインストールします。Tailscale を起動し、メールアドレスでアカウント登録してログインするか、Google または Microsoft アカウントでログインするだけです。僕は Google アカウントでログインする方法を選んだのですが、Mac と Android で同じアカウントでログインすれば、それだけで同じ VPN ネットワークに接続できるようになります。

Mac 上で開発している Web アプリを起動しておき、Android にインストールした Tailscale を開くと以下のように、同じ VPN ネットワークに接続している各PCや端末が表示されるので、その IP アドレスをコピーしてブラウザの URL 欄に貼り付けるだけで接続できるようになります。

ローカルで開発中のサイトに外部からアクセスできるようにするには、これだけで十分です。以降は、たとえば位置情報を使ったサービスの場合は、スマホから https でアクセスして確認する必要があるため、僕が使っている Rails + Puma の環境で SSL/HTTPS を有効にする方法を備忘録としてメモしています。

Rails + Puma で SSL/HTTPS を有効にして、https で接続できるようにする

ほぼ Rails5 + pumaのローカル環境でSSL/HTTPSを有効にするの手順通りです。

$ openssl genrsa 2048 > server.key
$ openssl req -new -key server.key > server.csr
$ openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt

で各種鍵や証明書を作成したら、

$ mkdir config/keys
$ mv server.* config/keys/

で config/keys 以下に移動します。

config/puma.rb を以下のように編集して、通常の http 接続は 3000 番、https 接続は 9292 番ポートで受けるようにします。

port ENV.fetch('PORT') { 3000 }

if ENV.fetch('RAILS_ENV') { 'development' } == 'development'
  ssl_bind '0.0.0.0', '9292', {
    key: 'config/keys/server.key',
    cert: 'config/keys/server.crt',
    verify_mode: 'none'
  }
end

puma をいったん停止し、