A programmer's note

半年多前配过一次，磕磕绊绊的，勉强配好了能用。这次老朋友又买了一台类似的机器，我以为会很快搞定，结果又陆续整了好几个小时。为避免下次折腾的时候浪费时间，简要记录一下折腾过程。

用到的软件

• shadowsocks-libev-local
• kcptun-client

几个要点

1. 需要下载的软件只有这俩，一开始没有下载 shadowsocks-libev-local而是尝试用机器里已经下载好的 shadowsocksR-local 代替，未成功（并不一定是ssR的锅....
2. 下载了kcptun，也配置了使用 kcptun，但kcptun服务一直不启动的原因是kcptun客户端的程序名字与系统中设置的不一致。安装好的客户端名字叫 kcptun-c 但默认配置的名字不是这个，务必要到「自动更新」那一页改一下配置。
3. 「全局配置」页配置：

• TCP节点：SS+Kcptun: 节点名
• UDP节眯：与TCP节点相同
• Socks5节点：与TCP节点相同
• DNS服务器(UDP)： 默认
• DNS模式: DNS2SOCKS + 使用Socks5节点解析
• DNS地址：8.8.4.4 (Google DNS)
• DNS劫持： 选中
• 默认代理模式： GFW列表 （重要...尤其远程调试的时候，别瞎选全局...配不好的情况下一开代理，网会断，波及远程桌面！
• 本机代理模式： GFW列表

4. 「节点页」配置：

• 服务器： 127.0.0.1
• 使用ipv6： 不选中
• 端口： kcptun 客户端打算用的端口
• 加密方式： ss服务器用到的加密方式
• 连接超时： 300 （默认值不用改
• tcp快速打开： false （默认值不用改
• 插件： 无
• 使用kcptun： checkbox要勾中（废话
• kcptun服务器： 你的kcptun服务器IP或域名
• 使用ipv6： 不选中
• kcptun参数配置： 把kcptun服务器配置的那堆参数照抄过来（只要端口参数之外的参数，一定要拿掉 -r -l 这两参数哦！

回头看看也没什么.....就这么点事儿，整了几个小时。如果第一次整完就写篇备忘记录....哈，亡羊补牢，犹未晚，我这不就写了么！

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.