Scribbles for my bad memory

To be honest, 5 minutes is not enough, especially for the first time you do it.

What you need to prepare

1. a VPS (Virtual Personal Server) with public IP
2. an Nginx Server running on that VPS.
3. an OpenVPN Server running on that VPS. (or you have tailscale service running on both your local machine & the VPS server)
4. a domain name
5. the CertBot tool from Let's Encrypt

Steps to get it to work

For example,

• your local dev environment is running on 10.8.0.2:8080
• your domain name is dev.myawesomedomain.com

1. create a new virtual server on your Nginx server, you can use the config below as a template.

upstream local-front-end-env {
   server 10.8.0.2:8080;
}

server {
    listen     80;
    listen [::]:80;

    server_name dev.myawesomedomain.com;

    access_log  /var/log/nginx/dev.myawesomedomain.com.access.log;
    error_log   /var/log/nginx/dev.myawesomedomain.com.error.log;

    location / {
        proxy_pass http://local-fornt-end-env;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # the following lines is used to support wss:// protocol
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
    }
    large_client_header_buffers 4 32k;
}

2. run sudo certbot --nginx to automatically config your new-added virtual server.
3. run sudo nginx -s reload & test it in browser
4. You need to modify your package.json to listen your vpn IP

-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --host=0.0.0.0 --port=8080 --public=https://dev.myawesomedomain.com",

5. You may need to modify your vue.config.js to fix the "Invalid Host header" error when visiting your site by https instead of localhost:8080.

--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,9 @@
 module.exports = {
     configureWebpack: {
         externals: {
+        },
+        devServer: {
+            disableHostCheck: true
         }
     },

That's it.

Tailscale

丁宇在推特上说这个东东比 frp 好用。我先一口气把它安装到四台服务器性质的 Linux 机器上，包括两台本来就有外网 IP 的vps，然后才琢磨这东西有啥用，怎么用。安装和授权过程都很简洁，没有废话，第一印象棒极了。

那...它有啥用呢？一句话，它把你所有的机器，不论物理上隔多远，放到一个局域网里了。在这个局域网里，没有防火墙，网内可以访问任何设备的任何端口。和普通的vpn不同，它没有中央设备，所有设备之间都是直连，因此性能比较好。

那有啥用呢？

1. 管理你的一堆机器更方便了。
2. 局域网内任何一台有外网IP的机器都能做为任何一台内网机器的跳板机（内网无端口限制的穿透）。

换言之，你的VPS只要有足够的流量，硬盘空间不再是限制你部署应用的瓶颈，你完全可以把你的各种试验性side project部署在你的家里，或者父母的家里，扔台旧机器装个Linux就全齐活了。

嗯，它不光支持 Linux，还支持macOS，iOS，Windows！牛大了。

记录一下小坑。macOS 10.15.4 安装好后 Login 是灰的，无法登录，重启下电脑就好了。