gitLab配置前端自动化构建部署

林陌砚
965 阅读5分钟

首要条件是需要有gitlab仓库，建议配合git钩子使用，保证代码的稳定性与可维护性

一、后台服务器配置（项目部署服务器）

建议gitlab-runner 注册以及注册之后的操作前端需自己学会方便自己配置

如果项目部署的服务器已安装过git/gitlab-runner等则只需要执行以下命令对新的代码库进行配置

gitlab-runner register

否则请安装以下内容

安装git

yum install git

如果出现以下报错：

There was a problem importing one of the Python modules

required to run yum. The error leading to this problem was:



   No module named yum



Please install a package which provides this module, or

verify that the module is installed correctly.



It's possible that the above module doesn't match the

current version of Python, which is:

2.7.12 (default, Oct 30 2019, 16:55:14) 

[GCC 4.8.5 20150623 (Red Hat 4.8.5-4)]



If you cannot solve this problem yourself, please go to 

the yum faq at:

  http://yum.baseurl.org/wiki/Faq

原因是/usr/bin/yum首行问题

vi /usr/bin/yum #!/usr/bin/python.bak 修改为 #!/usr/bin/python2.7 （注释：2.7是python的版本号）

如果出现以下报错

File "/usr/libexec/urlgrabber-ext-down", line 22, in <module>

    from urlgrabber.grabber import \

ImportError: No module named urlgrabber.grabber

Traceback (most recent call last):

  File "/usr/libexec/urlgrabber-ext-down", line 22, in <module>

    from urlgrabber.grabber import \

ImportError: No module named urlgrabber.grabber

Traceback (most recent call last):

  File "/usr/libexec/urlgrabber-ext-down", line 22, in <module>

    from urlgrabber.grabber import \

ImportError: No module named urlgrabber.grabber

则原因是python导致的

修改/usr/libexec/urlgrabber-ext-down与/usr/bin/yum中头部的python一致即可正常安装

如:cat /usr/bin/yum 第一行为 #!/usr/bin/python2.7

vi /usr/libexec/urlgrabber-ext-down 第一行修改为 #!/usr/bin/python2.7

执行过程中 所有[y/d/N] 均选择y

安装node由于需要执行npm操作所以服务器需要安装node环境

从node.js官网下载tar文件放在服务器上并解压

下载地址：nodejs.org/zh-cn/ 如下图：

1.选择其他下载

2.选择 Linux 二进制文件（X64）

将node以及npm进行软连接用以全局使用

#解压后的文件我放在了/usr/local/node-v14.17.4-linux-x64/bin/*下，根据项目放置位置配置

解压命令：tar xvJf node-v14.17.4-linux-x64.tar.xz

ln -s /usr/local/node-v14.17.4-linux-x64/bin/*  /usr/local/bin

node -v 查看安装是否成功

配置gitlab-runner

从gitlab-runner官网下载安装包安装在linux上

注释：此路径必须为/usr/local/bin

wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-386

修改安装文件的文件属性

chmod +x /usr/local/bin/gitlab-runner

添加gitlab-runner的用户用于操作git-runner

useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash

进入bin目录下

cd /usr/local/bin

配置gitlab-runner安装、设置运行缓存存储等路径

gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner

启动gitlab-runner

gitlab-runner start

将tomcat下的webapps文件夹权限给到gitlab-runner,防止无权限无法复制文件过去

# 将gitlab-runner加到root组下

usermod -a -G root gitlab-runner

# 将webapps权限开放给组

chmod -R 777 /xxx/tomcat/webapps/

注册runner

gitlab-runner register

  1. 填入Gitlab URL

 Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )

 gitlab服务器的域名或ip地址

  1. 输入注册Runner所需要的token

Please enter the gitlab-ci token for this runner

 # 这里我们使用 specific Runner Token

 xxxxxxx

  1. 输入一个Runner的description ，可以在稍后的GitLab的UI中更改这个描述：

Please enter the gitlab-ci description for this runner

test-gitlab-runner-description

  1. 输入Runner的tags（这个tags后面会用到，建议使用特有项目名--同一台服务器上需唯一,与下文中的.gitlab-ci.yml中tags保持一致防止无法触发）

 Please enter the gitlab-ci tags for this runner (comma separated)

 如：my-test

  1. 选择程序的执行者，一般默认选择shell

 Enter an executor: docker+machine, docker-ssh+machine, docker, parallels, virtualbox, ssh, kubernetes, custom, docker-ssh, shell:

 如：shell

然后我们可以看到以下文字

Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!

上述全部配置完成后，讲可以在gitlab对应项目仓库看到runner正在运行中

至此配置成功

二、前端配置

配置.gitlab-ci.yml

在项目根目录新建.gitlab-ci.yml，并上传至gitlab触发流水线

注意：如果需要在别的分支上触发需要自己在only中添加，可以添加develop分支作为提测使用，但是不建议太多其他分支进行触发

注意：以下配置项为执行过eject操作弹出配置项的，如果未弹出配置项则看下package.json里面的命令作为下面三个步骤中的命令

注意：npm无法执行version为4位版本号的的操作，需要将version改成3位版本号

基础配置项如下

# 定义 stages（阶段，会依次执行）

stages:

  - install # 构建

  - build   # 打包

  - deploy  # 部署



# 这个配置是防止git版本问题导致的报错

# fatal: git fetch-pack: expected shallow list

# fatal: The remote end hung up unexpectedly

# 如未出现上述报错可不加

variables:

  GIT_STRATEGY: clone 



# 缓存node_module,减少下次提交时的时间

cache:

  key: ${CI_BUILD_REF_NAME}

  paths:

    - node_modules/

    - build



# 安装构建依赖

install:

  stage: install

  # 在哪个分支才会执行脚本

  only:

    # - dev

    # - release

    # 仅package.json改变以及master和develop上才会重新install

    refs: 

      - master

      - develop

    changes: 

    - package.json

  script:

    - echo '安装构建依赖阶段'

    # 使用了淘宝镜像源

    - npm install --registry=https://registry.npm.taobao.org

    - echo '依赖构建完成'

  # 建议使用项目名作为tags

  tags:

    - my-test



# 构建开发环境下前端包

build:

  stage: build

  only:

    - master

  script:

    - echo '构建开发环境前端包'

    - npm run build

    - echo '=====build结束========'

  # 这个是用于构建一个前端zip包，用于留档记录，可不添加

  artifacts:

    # name建议使用项目名

    name: 'my-test'

    when: on_success

    paths:

      - build

  # 建议使用项目名作为tags

  tags:

    - my-test



# 部署生产环境

deploy:

  stage: deploy

  only:

    - master

  script:

    - echo '部署开发环境阶段'

    # 移动build文件到tomcat下的项目目录下

    - cp -r build/. /xxx/tomcat/webapps/my-test

    - echo '部署开发环境阶段结束'

  # 建议使用项目名作为tags

  tags:

    - my-test
avatar
文章
阅读
粉丝