おことわり

  • 社内で公開した情報を自分用に保管する
  • 「ngrokがよくない」みたいなことを言うつもりはなくて「自分でできそうだなと思った」というだけ

背景

スライドのサンプルだとnpm startで実行。ローカルの3000ポートを使用する
これをngrok(エングロック)やserveoというサービスを使ってproxyすればslackサーバと接続、動作確認できる
Steno というペイロードキャプチャして保存したりリプレイが簡単にできるツールあり
  • 🤔 .oO(ngrok相当のものをつくれそうな気がしてきた)

することイメージ

  • 以下の形をまず構築する
    • その上で 52.194.XX.XX:8080 と Mac:3000 を結びつけるSSH Portforwardすればよい
グローバルIP 52.194.XX.XX をもつEC2
  nginx : 80
  => proxy_pass : 8080

社内のMac
  python -m http.server : 3000

1. ec2起動する(Amazon Linux2)

してください

  • Global IPが必要
  • Security Groupもよしなに

2. nginxいれる

1

sudo amazon-linux-extras install nginx1.12

3. nginx設定ファイル変更して起動

  • 本質でないところは適当に設定しています
  • 今回重要なところは
1
2
3
4

# http directive
    upstream localport {
      server 0.0.0.0:8080;
    }

と

1
2
3
4
5
6
7
8

# server directive
        location / {
            allow all;
            proxy_pass http://localport;
            proxy_connect_timeout 60;
            proxy_send_timeout    60;
            proxy_read_timeout  1200;
        }

です

/etc/nginx/nginx.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
include /usr/share/nginx/modules/*.conf;
events {
    worker_connections 1024;
}
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    include /etc/nginx/conf.d/*.conf;
    upstream localport {
      server 0.0.0.0:8080;
    }
    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;
        include /etc/nginx/default.d/*.conf;
        location / {
            allow all;
            proxy_pass http://localport;
            proxy_connect_timeout 60;
            proxy_send_timeout    60;
            proxy_read_timeout  1200;
        }
    }
}

4. Mac上で公開したいサービスを起動する

1
2
3
4

cat index.html
#=> いえーいみえるー

python -m http.server 3000

簡単なのでこれで良しとします

5. SSH Portforward(逆向き)

最後に以下を埋めるためにSSH Portforwardします

グローバルIP 52.194.XX.XX をもつEC2
  nginx : 80
  => proxy_pass : 8080

   (ここを埋めていく)

社内のMac
  python -m http.server : 3000

以下は 社内のMacから実行したものです

1
2
3

$ ssh -f -N -g -R 52.194.XX.XX:8080:127.0.0.1:3000 ec2-user@52.194.XX.XX

# ssh -f -N -g -R EC2:EC2_PROXY_PORT:MAC:MAC_SERVICE_PORT EC2_USER@EC2

上記の実行で先述した以下がつながっていきます

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

グローバルIP 52.194.XX.XX をもつEC2
  nginx : 80
  => proxy_pass : 8080

  GIP 52.194.XX.XX:8080
  |
WWW
  |
  Mac 127.0.0.1:3000

社内のMac
  python -m http.server : 3000

6. 確認

1
2

curl  http://52.194.XX.XX/
いえーいみえるー