美文网首页
Gitlab CI 自动部署vue前端项目

Gitlab CI 自动部署vue前端项目

作者: luq885 | 来源:发表于2019-03-06 15:58 被阅读0次

    最近用到了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里的编译部署脚本手动运行一次,能成功的话肯定就没问题了。

    相关文章

      网友评论

          本文标题:Gitlab CI 自动部署vue前端项目

          本文链接:https://www.haomeiwen.com/subject/omxtpqtx.html