Gitlab CI 自动部署vue前端项目

最近用到了gitlab自动部署项目，折腾了很久，踩了不少坑，这里记录一下。

gitlab是现成的，部署程序的服务器上安装gitlab-runner，这个可以参考官网的安装文档。

gitlab-runner安装完成后，需要注册gitlab仓库的runners，运行以下命令

gitlab-runner register

需要的url和token可以从git仓库的 Settings - CI/DI 中的runners找到，描述可以不用写，tags先写“vue-dev-pub”，executor选择shell，注册生成后刷新git仓库的Settings页面，可以在Runners下面看到已经注册的runner

Screen Shot 2019-03-06 at 15.11.20.png

然后在项目中加入.gitlab-ci.yml文件

stages:
  - build

cache:
  key: ${CI_BUILD_REF_NAME}
  paths:
    - node_modules/

build:
  stage: build
  only:
    - master
  script:
    - npm install
    - npm run build
    - cp -r dist/* /mnt/www/
  tags: 
    - vue-dev-pub

提交后在git仓库页面的 CI/CD 下的 Pipelines 看到已经开始运行了，但是运行失败，看错误是没有找到npm命令。

下面是填坑时间

因为服务器上安装node是用root用户直接用nvm安装的，而gitlab-runner是gitlab-runner用户运行的，根本访问不到root安装的node，所以需要用gitlab-runner用户重新安装一次。
切换到gitlab-runner用户

sudo su - gitlab-runner

然后用gitlab-runner用户安装node，再次提交后npm运行正常，但是最后一步

cp -r dist/* /mnt/www/

执行失败，提示没有权限。mnt是挂载的数据盘，gitlab-runner用户没有访问权限，首先用root用户添加权限

chmod -R o+wr /mnt/

然后切换到gitlab-runner用户在mnt下创建www文件夹，再次提交代码测试，自动部署正常，编译出来的dist文件夹下所有内容都复制到了www文件夹下。

web服务器使用的是docker运行的nginx，服务器上已经安装好了docker，直接运行

docker run --name nginx -p 8080:80 -d -v /mnt/www:/usr/share/nginx/html nginx

运行成功后直接访问http://服务器ip:8080/就行了，以后每次提交代码后都会自动部署了。

总结

gitlab-runner程序运行的时候是gitlab-runner用户的权限，可以用gitelab-runner用户把.gitlab-ci.yml里的编译部署脚本手动运行一次，能成功的话肯定就没问题了。