vue个人博客开发之旅03：部署篇

什么都脱离不开nginx，先上nginx配置

nginx

server {
    listen 80;
    listen [::]:80;
 
    server_name xxxx.cn www.xxxx.cn;
 
    # redirect all HTTP requests to HTTPS with a 301 Moved Permanently response.
    return 301 https://www.xxxx.cn$request_uri;
}
 
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
 
    server_name www.xxxx.cn;
 
    location / {
        root  /data/sakura;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
     }
 
    location ^~ /server {
        index  index.html index.htm index.php;
        index  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        index  proxy_set_header Host $host;
        index  proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://xxxxxxx/server; #后端服务器，配置upstream即可  
    }
 
    # certs sent to the client in SERVER HELLO are concatenated in ssl_certificate
    ssl_certificate /etc/nginx/conf.d/1_inyaa.cn_bundle.crt;
    ssl_certificate_key /etc/nginx/conf.d/2_inyaa.cn.key;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;
 
    # intermediate configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
 
    # HSTS (ngx_http_headers_module is required) (63072000 seconds)
    add_header Strict-Transport-Security "max-age=63072000" always;
 
    # OCSP stapling
    ssl_stapling on;
    ssl_stapling_verify on;
}

环境

非ssr

没啥好说的，前端打包直接yarn build， /和root表示域名直接访问，打开的是这个。当然，这仅限于非ssr环境。

ssr

ssr环境下，yarn install最好直接在服务端执行，因为启动命令是node ./server.js。需要nodejs环境，如果执行执行，是前端启动，关了ssh，启动就停了。可以使用nohup之类的，达到后端启动的目的，具体百度就好啦。

ssr环境下就不能用root这种写法了，要用proxy_pass，因为你的项目，已经作为一个服务启动了。

我目前的nginx

server {
    listen 80;
    listen [::]:80;
 
    server_name xxxx.cn www.xxxx.cn;
 
    # redirect all HTTP requests to HTTPS with a 301 Moved Permanently response.
    return 301 https://www.xxxx.cn$request_uri;
}
 
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
 
    server_name xxxx.cn www.xxxx.cn;
 
    location /google8da70edf4fd49525.html {
        alias  /home/html/google8da70edf4fd49525.html;
    }
 
    location  /inyaa-gateway {
        index  index.html index.htm index.php;
        index  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        index  proxy_set_header Host $host;
        index  proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://inyaa-gateway:8083; #后端服务器，配置upstream即可  
    }
 
    location / {
        index  index.html index.htm index.php;
        index  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        index  proxy_set_header Host $host;
        index  proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://inyaa-sakura:5000;
    }
 
    # certs sent to the client in SERVER HELLO are concatenated in ssl_certificate
    ssl_certificate /etc/nginx/conf.d/1_inyaa.cn_bundle.crt;
    ssl_certificate_key /etc/nginx/conf.d/2_inyaa.cn.key;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;
 
    # intermediate configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
 
    # HSTS (ngx_http_headers_module is required) (63072000 seconds)
    add_header Strict-Transport-Security "max-age=63072000" always;
 
    # OCSP stapling
    ssl_stapling on;
    ssl_stapling_verify on;
}

docker化

我这里使用dockerfile

FROM node:16-alpine3.14
WORKDIR /home
ADD . .
RUN yarn config set registry https://registry.npm.taobao.org
RUN yarn
RUN yarn build
EXPOSE 5000
CMD ["yarn", "serve"]

这个也没啥好说的node 16表示版本，alpine表示最小化（否则镜像很大的）

ADD . .添加整个项目目录进去，因为我的启动端口是5000，所以暴露端口也是5000. 创建.dockerignore

node_modules
yarn.lock

打包的时候屏蔽掉，不然太大了 docker启动命令，大家自己去找就好了，也可以通过idea直接部署。百度：idea docker 你会看到的

docker自动化

轻量级方案，无非jenkins和drone，这里使用一个新奇的东西drone

贴一下.drone.yml文件配置

kind: pipeline
type: docker
name: default
 
steps:
  - name: restore-cache
    image: drillster/drone-volume-cache
    volumes:
      - name: cache
        path: /cache
    settings:
      restore: true
      mount:
        - ./node_modules
        - ./yarn.lock
  - name: build
    image: node:latest
    volumes:
      - name: cache
        path: /cache
    commands:
      - yarn
      - yarn build
  - name: rebuild-cache
    image: drillster/drone-volume-cache
    volumes:
      - name: cache
        path: /cache
    settings:
      rebuild: true
      mount:
        - ./node_modules
        - ./yarn.lock
  - name: docker
    image: plugins/docker
    settings:
      username: xxxxxx
      password: xxxxx!
      repo: ccr.ccs.tencentyun.com/inyaa/inyaa-sakura-nuxt
      registry: ccr.ccs.tencentyun.com
      tags: latest
  - name: ssh commands
    pull: if-not-exists
    image: appleboy/drone-ssh
    settings:
      host: xxx.xx.xx.xx
      username: root
      password:
        # 从drone仓库配置中秘密空间读取密码
        from_secret: ssh_password
      port: 22
      # 注意把下面的 springboot-helloworld 改成自己项目mvn pkg会生成的jar包名称
      script:
        - echo =======暂停容器=======
        - docker stop $(docker ps -a  grep "inyaa-sakura-nuxt"  awk '{print $1}')
        - echo =======暂停旧容器和镜像=======
        - docker rm -f $(docker ps -a  grep inyaa-sakura-nuxt  awk '{print $1}')
        - docker rmi $(docker images  grep inyaa-sakura-nuxt  awk '{print $3}')
        - echo =======开始部署应用=======
        - docker run -d -p 3000:3000 --name inyaa-sakura-nuxt --network inyaa --network-alias inyaa-sakura-nuxt ccr.ccs.tencentyun.com/inyaa/inyaa-sakura-nuxt:latest
        - echo =======部署成功=======
volumes:
  - name: cache
    host:
      path: /tmp/cache

大家看一下就好了，根据自己需求改。账号密码和ccr.ccs.tencentyun.com，很明显，用的是腾讯云的仓库 drone-ssh可以部署到指定服务器，script是执行的命令