使用gitlab的cicd自动化部署vue项目shell流程踩坑之路

「爱情、让人受尽委屈。」 2023-10-04 20:14 73阅读 0赞

### 强烈建议：先在部署的服务器上手动跑一边流程 ###

包括：（服务器上要安装node、npm、git等依赖）

1. git clone 仓库地址

2. npm install / yarn 安装依赖

3. cp -rf dist/ /var/www/html

如果以上步骤都没有出错，那再安装gitlab-runner进行自动化构建

### 提示： ###

安装git：

apt install git

安装node:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

稍等片刻，源已经添加完毕，再执行：

sudo apt-get install -y nodejs

然后再执行：

![11a03fc1d23f4091b69a1f569cac190e.png][]

安装nvm切换node版本和切换npm源的方式：

nrm安装：[设置npm源的几种方式\_招财酷炫猫的博客-CSDN博客\_npm 源][npm_-CSDN_npm]

nvm安装：[Ubuntu系统安装：node及node版本管理工具nvm\_1024小神的博客-CSDN博客][Ubuntu_node_node_nvm_1024_-CSDN]

### 如果以上手动部署后没问题，开始自动化部署流程 ###

1.安装gitlab-runner

2.注册gitlab-runner

3.编写.gitlab-ci.yml文件

### 1.安装gitlab-runner (执行构建任务)： ###

gitlab-runner可以理解为一个进程，可以跑在任何服务器上，一般都安装在项目要部署的服务器上，或者自己电脑本地也可以：

![83c51267ae4e4998818f3ace7432000d.png][]

> **push 代码到gitlab上时，gitlab将变动通知给gitlab-CI，gitlab-CI会找到该工程下的gitlab-runner 并通知该runner执行相应脚本**

Linux安装docker ：[Install GitLab Runner manually on GNU/Linux | GitLab][Install GitLab Runner manually on GNU_Linux _ GitLab]

#### 用官方的安装方式： ####

先看一下自己服务器类型：uname -a

![29d471974de244b69f8cfa9dfefaa853.png][]

可以看到是x86系统，所以：

curl -LJO "https://gitlab-runner-downloads.s3.amazonaws.com/latest/deb/gitlab-runner_amd64.deb"

开始安装：

对于 Debian 或 Ubuntu：

dpkg -i gitlab-runner_amd64.deb

安装完之后可以查看一下状态：gitlab-runner status

![71e3109acbc649b6901fae6e0f8891fe.png][]

开始注册到gitlab仓库里面：

先到gitlab仓库查看一下runner下面的信息：

![1e869c12d396430ca234612d860d9fd1.png][]

这两个是比较重要的，注册的时候要用：![f8f79d0c3aeb4fbb84acca36cffb3047.png][]

gitlab-runner register
    
    //注册时要输入的内容
    url(gitlab服务器地址，就是上图画红线的地方)
    token(项目token，就是上图画红线的地方) gitlab中按项目>Setting>CI/CD>Runners
    executor(执行器，有shell,docker)等 本文选的是shell
    tags(用来匹配jobs和执行任务设备(runner) 和yml脚本里的tags保持一致)

![98f62658817c4f48b84ea322291c6aeb.png][]

### 2.编写.gitlab-ci.yml文件： ###

.gitlab-ci.yml

> git项目的根目录里的文件，记录一系列规则和执行规则  
> 可以在gitlab上使用CI Lint验证上面yml文件的正确行。CI Lint在 CI/CD里面。

####提示
    # 1.以下脚本设置的是master分支被合并时执行（设置为平常用来发版本的分支即可）
    # 2.版本自动化部署到nginx下
    # 3.执行yml脚本的runner名字设置的vue-runner1,即对应tags
    
    stages: # Stages 表示构建阶段，这里有两个阶段 install, deploy
        - install
        - deploy
    
    cache:
        key: ${CI_BUILD_REF_NAME}
        paths:
            - node_modules/
    
    install-staging:dep: # Jobs 表示构建工作，表示某个 Stage 里面执行的工作。
        stage: install
        tags:
            - cvtags #runner执行器的名字,与注册runner时填写的tags保持一致
        only: # 定义了只有在被merge到了master分支上 才会执行部署脚本。
            - master
        script:
            - echo "=====cat node/npm======"
            - sudo npm install -g nrm # 主要用来切换npm源
            - sudo nrm use taobao
            - npm -v
            - node -v
            - npm config get registry
            - whereis npm # 主要用来定位问题
            - whereis node
            - echo "=====start install======"
            - sudo npm install #安装依赖
            - echo "=====end install======"
        artifacts: # 将这个job生成的依赖传递给下一个job。需要设置dependencies
            expire_in: 60 mins # artifacets 的过期时间，因为这些数据都是直接保存在 Gitlab 机器上的，过于久远的资源就可以删除掉了
            paths: # 需要被传递给下一个job的目录。
                - node_modules/
    
    deploy-staging:dep:
        stage: deploy
        tags:
            - cvtags
        only:
            - master
        script:
            - echo "=====start build======"
            - sudo npm run build # 将项目打包
            - echo "=====end build======"
            - echo "=====start deploy======"
            - sudo cp -rf ./dist/*  /var/www/html/
            - echo "=====end deploy!!!!!!======"

编写完成之后，开始推送到远程仓库，然后打开CI/CD理论上就可以看到runner在跑了：

打红×的表示出错了，，，，，，因为在调试的过程中，很多问题！！！真的很多坑

![e7d336996e084bc486a14d7ba7e23ea1.png][]

虽然刚开始已经手动部署可以成功了，但是自动化部署还是需要注意：

1.给gitlab-runner添加权限

2.执行脚本命令要添加sudo

3.服务器的node环境和gitlab-runner里面的版本不一样？？这就很奇葩了

### 遇到的问题 ###

安装在哪里

*  一般安装在与gitlab所在不同的服务器上，可以注册在部署开发环境项目的服务器上

token可以多个项目共享吗？

*  可以为项目特定的token 也可以设置多个项目共享一个token

gitlab-runner遇到的问题

1.job执行失败

在.gitlab-ci.yml的 tags字段里也必须明确指明这些 tags。

2.gitlab runner 权限不够

vim /etc/sudoers 
    gitlab-runner ALL=(root) NOPASSWD: ALL  
    #加上NOPASSWD: ALL，执行命令时不用再输入passwd for gitlab-runner

3.执行yml脚本里命令提示yarn 安装失败node-sass

根目录下创建.yarnrc

registry "https://registry.npm.taobao.org"
    sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"

4.gitlab12.7之后自动开启auto devops

导致每次push项目都会执行job。可在管理员角色下取消 Default to Auto DevOps pipeline for all projects 的选中状态，然后点击 Save changes 即可

5.runner注册失败

ERROR: Registering runner... failed

runner=zoiK2SqN status=401 Unauthorized PANIC: Failed to register this runner. Perhaps you are having network problems 原因是：gitlab版本和gitlab-runner不兼容，已知的gitlab版本低于9.x的gitlab runner只能用v1.11.1

6.failed to remove XXX,failed to remove dist/index.html,warning: failed to remove xxxx: Permission denied；

简单粗暴地编辑/etc/passwd，将gitlab-runner账号对应的`uid:gid`改为`0:0`(和root一样)。

![a839ef186fe44c4fbb1a29885dfd9773.png][]

7.终极调试技巧：

如果不知道问题发生在哪里，就把手动部署的命令放到脚本里面执行，然后看输出的内容和手动部署的有什么差别，然后对应的调整脚本内容：

![bfd3a4fdd90f407ab939fe6c9830df93.png][]

这些脚本执行的结果会在job的日志里面看到：然后针对性的调整

![26a9acdb48a0406fb837a2dfcd2ac30b.png][]

### 最后的最后：功夫不负有心人，终于让我跑成功了一次！ ###

![c842ce8b9d484592bdd67f9ff5242260.png][]

[11a03fc1d23f4091b69a1f569cac190e.png]: https://img-blog.csdnimg.cn/11a03fc1d23f4091b69a1f569cac190e.png
[npm_-CSDN_npm]: https://blog.csdn.net/qq_22186119/article/details/123255420
[Ubuntu_node_node_nvm_1024_-CSDN]: https://blog.csdn.net/weixin_44786530/article/details/128197994?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128197994%22%2C%22source%22%3A%22weixin_44786530%22%7D
[83c51267ae4e4998818f3ace7432000d.png]: https://img-blog.csdnimg.cn/83c51267ae4e4998818f3ace7432000d.png
[Install GitLab Runner manually on GNU_Linux _ GitLab]: https://docs.gitlab.com/runner/install/linux-manually.html
[29d471974de244b69f8cfa9dfefaa853.png]: https://img-blog.csdnimg.cn/29d471974de244b69f8cfa9dfefaa853.png
[71e3109acbc649b6901fae6e0f8891fe.png]: https://img-blog.csdnimg.cn/71e3109acbc649b6901fae6e0f8891fe.png
[1e869c12d396430ca234612d860d9fd1.png]: https://img-blog.csdnimg.cn/1e869c12d396430ca234612d860d9fd1.png
[f8f79d0c3aeb4fbb84acca36cffb3047.png]: https://img-blog.csdnimg.cn/f8f79d0c3aeb4fbb84acca36cffb3047.png
[98f62658817c4f48b84ea322291c6aeb.png]: https://img-blog.csdnimg.cn/98f62658817c4f48b84ea322291c6aeb.png
[e7d336996e084bc486a14d7ba7e23ea1.png]: https://img-blog.csdnimg.cn/e7d336996e084bc486a14d7ba7e23ea1.png
[a839ef186fe44c4fbb1a29885dfd9773.png]: https://img-blog.csdnimg.cn/a839ef186fe44c4fbb1a29885dfd9773.png
[bfd3a4fdd90f407ab939fe6c9830df93.png]: https://img-blog.csdnimg.cn/bfd3a4fdd90f407ab939fe6c9830df93.png
[26a9acdb48a0406fb837a2dfcd2ac30b.png]: https://img-blog.csdnimg.cn/26a9acdb48a0406fb837a2dfcd2ac30b.png
[c842ce8b9d484592bdd67f9ff5242260.png]: https://img-blog.csdnimg.cn/c842ce8b9d484592bdd67f9ff5242260.png