「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」

前言

之前完成了前后端的完善。今天就把vue-admin-template部署到线上
之前的文章: 从零开始摸索VUE，配合Golang搭建导航网站（五.使用doker部署启动）

启动Nginx容器

跟之前的vue cli脚手架一样需要一个Nginx容器
需要更改nginx 配置文件，项目目录

docker run --name web-admin -d -p 8101:80 -v /opt/nginx/config/nginx.conf:/etc/nginx/nginx.conf -v /opt/nginx/config/admin.conf.d:/etc/nginx/conf.d -v /opt/nginx/logs:/var/log/nginx -v /opt/vue-admin:/opt/vue-admin --restart=always nginx
复制代码

Nginx配置

nginx配置宿主机位置/opt/nginx/config/admin.conf.d/admin.conf：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /opt/vue-admin/;
        index  index.html index.htm;
    }


    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }


location /admin/ {
        # 把 /admin 路径下的请求转发给真正的后端服务器
        proxy_pass http://172.17.0.4:8080;
 
        # 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
        proxy_set_header Host $http_host;
 
        # 把cookie中的path部分从/api替换成/service
        proxy_cookie_path /api /;
 
        # 把cookie的path部分从localhost:8080替换成your.domain.name
        proxy_cookie_domain localhost:80 http://172.18.0.4:8080;
    }
}

复制代码

查看容器列表docker ps:

frp设置

三个项目容器都在这里了，现在把这个admin后台穿透到外网，参考：使用树莓派搭建内网GitLab，并实现Frp内网穿透和简单CI/CD实践
编辑客户端文件加上一下内容：

[vue-admin-pi4-master] 
type = tcp 
local_ip = 127.0.0.1 
local_port = 8101 
remote_port = 7033 
复制代码

重启并查看frp状态:

sudo systemctl restart frpc
sudo systemctl status frpc
复制代码

编写CI

还是跟vue Cli项目一样，修改CI的npm打包后的目标路径，注意npm build 命令需要改为npm run build:prod,然后修改env文件名,修改容器名：

stages:
  - build  #任务阶段。只写了一个build阶段
  
cache:
 key: nodemodules-$CI_COMMIT_REF_NAME
 paths:
  - node_modules/

build_develop:
  stage: build  #指定这个build_develop任务在build阶段
  cache:
    key: nodemodules-$CI_COMMIT_REF_NAME
    paths:
    - node_modules/

  script:
    - rm -rf .env
    - cp .env.production .env
    - npm install --unsafe-perm  # 执行npm install 安装第三方依赖，--unsafe-perm为了解决一些安装的时候出现了一些无权限创建文件的报错
    - rm -rf ./dist/   # 删除之前打包生成的文件
    - npm run build:prod   #重新打包生成文件
    - rm -rf /opt/vue-admin/ #删除之前上次打包的的文件夹
    - cp -rf ./dist/ /opt/vue-admin/ #把build生成的文件打包到nginx指定的文件夹
    - docker restart web-admin  #重启Docker的Nginx容器，这时候前端的所有的静态文件都是新的了
  only:
    - master # 指定只在master分支执行这个任务。
  tags: 
    - b4master  #指定执行任务的runner,安装runner的时候会提示填写runner的标签（tag）
复制代码

最后把这个文件提交到master分支就会触发自动化部署了
出现了一次错误：

提示gyp ERR! stack Error: not found: make
使用一下命令安装build-essential

sudo apt-get install build-essential
复制代码

然后重试任务就行

新建域名解析，反向代理：

设置二级域名，指向到frp服务端服务器

然后在服务器上宝塔新建网站

新建网站后设置反向代理

反向代理设置完成，访问域名就会映射到我的树莓派上的有vue-admin-template打包好的静态文件的Nginx 容器上。

删除mock设置

务必删除下面四行，直接上线我排查了半天，因为线上默认不会报错输出，上线接口直接不请求报Error，我找了半天在eslint设置里把线上打开调试，才发现请求了mock模拟数据

总结

今天这次CI部署比较容易，因为之前有Vue cli脚手架的项目，照着改一下就可以了，现在直接访问管理后台的域名就可以了。花了一个月的时间，前端后端运维全部由自己研究完善，发现了自己虽然都懂基本的东西但是还有很多瑕疵，比真正的商业项目差了很多大一段。不过正是这次实践深刻理解术业有专攻这个道理，专业的前端还是很有必要的，前端的技术发展是真的快，现在Vue3和TypeScript非常火呀，我还没有开始接触，接下来还是需要花精力了解了解前端。