ykokw.xyz blog logo

Blog Posts

No results for 'undefined'Powered by Algolia

Localtunnel とは

  • Localtunnelは localhost で起動した web サービスをインターネット上からアクセスできるようにするサービス
  • 普段 Mac で開発してて Windows の IE / Edge から動作確認するときとかに使える
  • 趣味プログラミングだとngrok 使う

    • 仕事だと自前の環境用意してみるのもありかもなと思ってためしてみた
    • Localtunnel は server 実装も OSS になってた
    • ngrok は古いコードが公開されている感じ

ざっくりした処理の流れ

  • local 環境で Web サービス起動
  • 起動したサービスの port を指定して client 側から接続開始
lt --host "https://localtunnel.ykokw.xyz" --port 3000
  • server が専用の URL / ポートを返すのでクライアントがそことソケット通信を開始

    • 上の URL がホストだとしたら、 http://fluffy-termite-70.localtunnel.ykokw.xyz みたいな URL になる
    • このとき server は自分が返したサブドメイン / ポートをメモリで保持
    • ロードバランシング...

必要な環境

  • You can set up DNS entries for your domain.tld and _.domain.tld (or sub.domain.tld and _.sub.domain.tld).

    • 自前のドメインとそのサブドメインの名前解決ができること
  • The server can accept incoming TCP connections for any non-root TCP port (i.e. ports over 1000).

    • non-root TCP port での接続ができること
  • (あとは docker or node.js の環境

やったこと

  • EC2 インスタンスを用意
  • ngingx インストール
  • docker インストール
  • Localtunnel server を docker run

EC2 インスタンスを用意

  • TCP 通信用のポートを開放してなくてうまく接続できなかった
  • セキュリティグループでポートの範囲指定をする感じ (1000-60000 とか

nginx インストール

  • ヘッダのホスト情報からドメインを取得してサブドメインを切り出すので proxy_pass 時に設定が必要

    • ワイルドカード証明書取得してなくてソケット通信時は HTTP だった orz
# nginx.confの一部抜粋
    server {
        location / {
            proxy_pass http://127.0.0.1:3000/;

            proxy_set_header Host $host; # ヘッダにホスト情報をつけてproxyする
        }

        listen       80;
        listen       [::]:80;
        server_name  *.localtunnel.ykokw.xyz;
    }

docker インストール

  • yum でも amazon-linux-extras でも

Localtunnel server を docker run

docker run -d \
    --restart always \
    --name localtunnel \
    --net host \
    defunctzombie/localtunnel-server:latest --port 3000 --domain "localtunnel.ykokw.xyz"

ここで指定されたドメインが、ソケット通信時の名前解決に使われる

// https://github.com/localtunnel/server/blob/master/server.js
export default function(opt) {
    opt = opt || {};

    const validHosts = (opt.domain) ? [opt.domain] : undefined;
    const myTldjs = tldjs.fromUserSettings({ validHosts });
    const landingPage = opt.landing || 'https://localtunnel.github.io/www/';

    // この関数がサブドメイン取得に使われてる
    // 上のvalidHostsがoptionから指定されてないとサブドメイン切り出しがうまくいかない
    function GetClientIdFromHostname(hostname) {
        return myTldjs.getSubdomain(hostname);
    }

感想

  • (ワイルドカードな名前解決ができて SSL 証明書があってポート範囲指定できれば) docker run するだけなので構築は楽

    • 接続もとを制限するようなネットワーク内に雑に構築するのとかでもいいかも
    • サブドメイン管理がメモリでの保持なのでロードバランサーで冗長構成しようとすると厳しそう
    • 余裕があったら ngrok の有料プランで楽したいところ。。。
    • https://ngrok.com/pricing
  • 実装がシンプルなので躓いたらコード見ながら対処できそうではあった
  • (AWS でなにかするのが久しぶりすぎて恐る恐るだった。。。

This content is built with Gatsby