How to get HTTPS working on your local development environment in 5 minutes -- My version

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;
}
  1. run sudo certbot --nginx to automatically config your new-added virtual server.
  2. run sudo nginx -s reload & test it in browser
  3. 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",
  1. 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.

Two silly moments when I develop using Vue.js

  1. Bound object changes but the UI didn't change. Solution:

Template part,

<el-select v-model="form.categoryIdList" multiple @change="setValue(form.categoryIdList)">

Component part,

    setValue(object) {
      this.$set(this.form, this.form.categoryIdList, object)
    },
  1. VUE_APP_CUSTOM_VARIBLE doesn't work, solution:
Restart your dev server.

Using crontab to backup your mysql data

  1. on a server with huge disk space, run crontab -e and put the following code in it (you may need to change the directory names to fit your situation)
30 3 * * * mysqldump --databases DB1 DB2 DB3 DB4 | gzip > /data/backups/mysql/db_`date '+\%Y\%m\%d-\%H\%M\%S'`.sql.gz
30 4 * * * find /data/backups/mysql/db_* -mtime -1 -exec scp {} anotherserver:/data/backups/mysql \;
30 5 * * * find /data/backups/mysql/db_* -mtime +30 -exec rm {} \;
  1. on another server, run crontab -e and put the following line into it:
30 5 * * * find /data/backups/mysql/db_* -mtime +7 -exec rm {} \;

summary & explanation:

  1. at 3:30 backup MySQL data in a local directory and keep latest 30 days backup in that directory
  2. at 4:30 transfer the latest backup to another server in case the first backup may be destroyed by an accident.
  3. at 5:30 remove the oldest backup on the local backup server (the code shows that the latest 30 days backups are kept on the server).
  4. at 5:30 remove the oldest backup on the remote server (the code shows that only the latest 7 days backups are kept on that server).

Git Tips

按最近提交的提交时间(DESC)列出本地分支

git branch --sort=-committerdate

太长记不住?运行下面的命令配置一个git命令别名,下次只需要敲 git brs 即可得到同样结果:

git config --global alias.brs "branch --sort=-committerdate"

解决git 命令行把中文文件名显示成 \343\200\212类似乱码的问题

git config --global core.quotepath off

将变更加入缓冲区,但不加入空白(空格、制表符或者换行符)的变更

git diff -w | git apply --cached --ignore-whitespace

Reference

git diff 时排除掉某些不想看的文件

git diff -- . ':(exclude)db/irrelevant.php' ':(exclude)db/irrelevant2.php'

删除远端分支

git push origin --delete branchname

嫌打字麻烦的,可以使用以下简写命令

git push origin :branchname

发现文件丢了不知道谁删的,比如 yarn.lock , 用下面这个命令

git log -p -- yarn.lock

设置总是push到远端的同名分支,从此再也不用如此麻烦的敲 git push -u origin theSameBranchName,你只管 git push 就好!

git config --global push.default current

从 git 2.37 版开始,我们可以用下面这个新设置更好的解决这个问题。它不仅起到类似上一个命令的作用,它还自动设置 track 到远端的同名分支。如果你的git版本比较新,使用这个设置更好。

git config --global push.autoSetupRemote true

解决 git diff 时出现讨厌的 ^M

git config --global core.whitespace cr-at-eol

Reference

更多的技巧请访问我的 GotGit 群组

Using sed to insert a line after several lines after the match line

最近一直在写 .net core,它有诸多优点我且不提,我实在头痛于手写注入服务时的模式化代码,因此动了心思要写个小脚本帮我自动化一些事情。我的想法是告诉我要加入的 ServiceName, 指定一个 Controller然后脚本自动在这个 Controller 里声明一个 private readonly 属性,自动修改类的construction 函数,自动注入这个服务,并在construction 函数体写上 _serviceName = serviceName;

在第一步,注入 private readonly 属性那里,我就绊了个跟头。用 sed 匹配到某行,在它之前,或者之后插入数据是简单的。但我匹配到 public class xxxController 这行之后是单独一行 {,而我要加的变量要放到 {这行之后。网上一通搜索,试图找到定位到某行之后N行的命令,然而并没有这样的命令。然而功夫不负有心人,我最后还是找到了一个解决方案,那就是

sed '/pattern/!b;n;n;i\something'

具体解释见 Reference