gitlab-ci 自动化部署vue [详细步骤分解]

起因是:每个服务器都要打包不同的axios的baseURL表示很心累，于是我想偷懒(就是这么直接)

实现过程中还是踩了不少坑的，话不多说，进入正题。有不正确的欢迎指正。

服务器系统

Centos7

本地部署gitlab并汉化

安装社区版gitlab ce

安装依赖项

yum install -y curl openssh-server openssh-clients postfix cronie policycoreutils-python

启动postfix，并设置为开机启动

systemctl start postfix
systemctl enable postfix

设置防火墙

firewall-cmd --add-service=http --permanent
firewall-cmd --reload

获取gitlab的rpm包

从清华开源镜像站下载

记得看Date的排序查找最新的版本！！！！

wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-12.2.0-ce.0.el7.x86_64.rpm

没有wget命令运行yum install -y wget安装（具体可参考参考资料11.1步骤）
还有一种获取途径从官方下载（速度太慢放弃）

安装rpm包

rpm -i gitlab-ce-12.2.0-ce.0.el7.x86_64.rpm
# 根据提示执行

执行指令配置gitlab(如果想要修改配置内容，先跳过此步骤，修改完成后再执行)

gitlab-ctl reconfigure

配置gitlab(GitLab默认会占用80、8080和9090端口如果不需修改可以跳过)

vim /etc/gitlab/gitlab.rb
unicorn['port']和prometheus['listen_address'] = 'localhost:9090' 前面有#号 记得把#去掉
文件有点长，建议复制到本地 在本地修改后再覆盖服务器上的文件

external_url 'http://127.0.0.1' => external_url 'http://<服务器地址或域名>:11000'
unicorn['port'] = 8080 => unicorn['port'] = 11001
prometheus['listen_address'] = 'localhost:9090' => prometheus['listen_address'] = 'localhost:11002'

记得开放端口11000 11001和11002

/sbin/iptables -I INPUT -p tcp --dport 11000 -j ACCEPT
/sbin/iptables -I INPUT -p tcp --dport 11001 -j ACCEPT
/sbin/iptables -I INPUT -p tcp --dport 11002 -j ACCEPT

邮件设置（我没有使用这个功能所以没配置，项配置的小伙伴可以参考参考资料2配置postfix）
配置完成后，执行 gitlab-ctl reconfigure 命令使配置生效然后重启gitlabgitlab-ctl restart

一些命令

# 启动所有服务
gitlab-ctl start
# 关闭所有服务
gitlab-ctl stop
# 重启所有服务
gitlab-ctl restart
# 查看所有服务状态
gitlab-ctl status
# 查看日志信息
gitlab-ctl tail
# 列举所有启动服务
gitlab-ctl service-list
# 平稳停止一个服务
gitlab-ctl graceful-kill

#卸载gitlab
gitlab-ctl uninstall

安装完成后，使用浏览器打开 http://服务器IP/域名:11000进入登陆界面(首次登陆会提示让你修改root密码)

汉化

第一种方法(当时我克隆的时候有点慢，最后放弃了)

安装git

yum install -y git

克隆汉化版本库

cd /usr/local
git clone https://gitlab.com/xhang/gitlab.git

查看版本库

cat gitlab/VERSION

查看gitlab版本

head -1 /opt/gitlab/version-manifest.txt

停止gitlab

gitlab-ctl stop

cd /usr/local/gitlab

导出 patch 用的 diff 文件到/usr/local下（就是比较两个分支的差异）

git diff 12-1-stable 12-1-stable-zh > ../12-1-stable-zh.diff

cd

将12-1-stable-zh.diff作为补丁更新到gitlab中

yum install patch -y
patch -d /opt/gitlab/embedded/service/gitlab-rails -p1 < 12-1-stable-zh.diff

启动gitlab并重新配置gitlab

gitlab-ctl start
gitlab-ctl reconfigure

第二种方法

参考原文

汉化代码库下载对应版本中文分支xxx-zh的zip包

cd  /usr/local
wget https://gitlab.com/xhang/gitlab/-/archive/12-1-stable-zh/gitlab-12-1-stable-zh.zip
unzip gitlab-12-1-stable-zh.zip

可本地下载解压后上传到服务器上

解压后查看版本

cat gitlab-12-1-stable-zh/VERSION

备份英文版

cp -r /opt/gitlab/embedded/service/gitlab-rails{,.ori}

中文版覆盖英文版

/bin/cp -rf gitlab-12-1-stable-zh/* /opt/gitlab/embedded/service/gitlab-rails/

cp: cannot overwrite non-directory `/opt/gitlab/embedded/service/gitlab-rails/log' with directory `gitlab-v10.7.0-zh/log'
cp: cannot overwrite non-directory `/opt/gitlab/embedded/service/gitlab-rails/tmp' with directory `gitlab-v10.7.0-zh/tmp'
此报错不用管，因为已经设置root密码，登录过，所以会报错。

重新配置和重启

gitlab-ctl reconfigure
gitlab-ctl restart

安装 GitLab Runner

官方安装教程
我用的是Install using GitLab’s repository for Debian/Ubuntu/CentOS/RedHat方法安装
跟着步骤走就是了很简单

第1步

#  下面一行全部复制... 下面一行全部复制... 下面一行全部复制...
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

第2步

sudo yum install gitlab-runner

官方的第3步是可以选择安装版本（可以跳过此步骤）

其他注意: 修改用户为root

vi /etc/systemd/system/gitlab-runner.service
# 以下内容可能不一致，关键是把"gitlab-runner" 改为 "root"

ExecStart=/usr/lib/gitlab-runner/gitlab-runner "run" "--working-directory" "/home/gitlab-runner" "--config" "/etc/gitlab-runner/config.toml" "--service" "gitlab-runner" "--syslog" "--user" "gitlab-runner"
改为：
ExecStart=/usr/lib/gitlab-runner/gitlab-runner "run" "--working-directory" "/data/gitlab-runner" "--config" "/etc/gitlab-runner/config.toml" "--service" "gitlab-runner" "--syslog" "--user" "root"

第4步

注册Runner
runner

sudo gitlab-runner register

进入你gitlab的项目点击设置=>ci/cd=>展开Runner

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )
填写上图的
http://<服务器地址或域名>:11000/

Please enter the gitlab-ci token for this runner
这里填写上图的注册令牌

Please enter the gitlab-ci description for this runner
这里填你这个runner的描述 设置里可以改

Please enter the gitlab-ci tags for this runner (comma separated):
这里填你这个runner的标签 设置里可以改

这里写docker 记得启动docker（不知道怎么装Docker的往下拉）

Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:
docker

选docker镜像版本为alpine:latest

Please enter the Docker image (eg. ruby:2.1):
alpine:latest

注册完成后刷新刚刚那个页面会显示一个小绿点就表示成功了

配置.gitlab-ci.yml

在项目得根目录添加.gitlab-ci.yml文件

image: node:alpine  // 默认的ci部署的docker镜像

stages:  // 首先按顺序定义有几个步骤。步骤下面的所有job是同步执行的
  - test
  - build

job1:
  stage: test  // 属于test的stage
  script:
    - npm run test // 这个job执行的脚本
  only:
    - master  // 只监听master分支的代码提交
  tags:
    - tag  // 就是上面Please enter the gitlab-ci tags for this runner让你输入的内容 记得要写 不然runner不知道用哪个执行

job2:
  stage: build
  script:
    - npm run build
  only:
    - master
  tags:
    - tag

参考资料，详情可以移步到这里

稍微说一下

http://mirrors.aliyun.com/alp... 要去这里查看最新的版本

所以
http://mirrors.aliyun.com/alpine/v3.7/main/=>改为http://mirrors.aliyun.com/alpine/v3.9/main/
其他内容不用变

$SSH_PRIVATE_KEY

私匙这样也可以在你的服务器生成一个拷贝服务器上的，就是安装你的gitlab的那个服务器
总之就是这个服务器可以远程免密码登录您要部署的那个服务器上就可以

$SERVER_USER_HOST，$SERVER_MASTER_PATH

在设置=>CI/CD=>变量里添加

- echo "http://mirrors.aliyun.com/alpine/v3.9/main/" > /etc/apk/repositories
- apk add --no-cache rsync openssh
- mkdir -p ~/.ssh
- echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
- chmod 600 ~/.ssh/id_dsa
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
- rsync -rav --delete dist/ "$SERVER_USER_HOST:$SERVER_MASTER_PATH" # 把dist/下的所有文件拷贝到$SERVER_MASTER_PATH的路径下，会把原来存在的都删除注意别写错路径

如果不能远程无密码登录，访问被拒的话
你需要配置服务器ssh免密登录

公钥、私钥

ssh-keygen

进入到生成密钥文件夹中，默认在用户所在目录，一个隐藏的.ssh文件夹中。

cd /root/.ssh/

查看是否有“authorized_keys”文件，如果有，直接将公钥追加到“authorized_keys”文件中，如果没有，创建“authorized_keys”文件，并修改权限为“600”

touch authorized_keys
chmod 600 authorized_keys

追加公钥到“authorized_keys”文件中

ssh-copy-id root@<服务器地址>

用ssh root@<服务器地址> 登录下远程服务器没有让你输入密码就成功了！
参考资料

vue-cli 根据不同的环境打包

vue-cli 根据不同的环境打包
只需要把上面的发布目录中的npm run build => npm run build:test即可

安装Docker-CE

Docker参考资料

卸载旧版本（没有则跳转下一步）

sudo yum remove docker docker-common container-selinux  docker-selinux docker-engine docker-engine-selinux

安装依赖

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

安装官方库

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

更新仓库源

sudo yum makecache fast

从仓库安装Docker-CE

sudo yum install docker-ce

配置加速器

liunx:
curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io
官方网址

这里顺便展开下docker的镜像制作(打包vue到docker)

Dockerfile

把需要放置的文件放在当前目录下 copy的时候会在当前文件夹内去拷贝到Docker工作目录中
在需要放置的文件夹内创建Dockerfile
touch Dockerfile
内容如下(这里使用了pm2):

# 可以指定依赖的node镜像的版本 node:<version>，如果不指定，就会是最新的
FROM node:10

# 创建工作目录，对应的是应用代码存放在容器内的路径
WORKDIR /usr/src/app

# 把 package.json，package-lock.json(npm@5+) 或 yarn.lock 复制到工作目录(相对路径)
COPY package.json *.lock /usr/src/app

RUN npm install pm2 -g --registry=https://registry.npm.taobao.org
# 只安装dependencies依赖
# node镜像自带yarn
RUN npm install --registry=https://registry.npm.taobao.org

# 把其他源文件复制到工作目录
COPY . /usr/src/app

# 替换成应用实际的端口号
EXPOSE 3000

# 这里根据实际起动命令做修改
CMD [ "pm2-runtime", "index.js", "--watch" ]

dockerignore

touch .dockerignore
内容如下：

node_modules
npm-debug.log

构建镜像

docker build -t docker/node-image .（注意有个.不能省略）docker/node-image是镜像名

查看镜像

docker images

启动镜像

docker run -p 9528:3000 -d docker/web --restart=always
注： --restart=always 为自动重启
9528是nginx外网访问部署好的应用时对应的端口
3000是容器内Node.js应用监听的端口
docker/web是镜像的名字（构建的时候自己设置的）

常用命令

# 查看运行中的容器
docker ps
# 示例输出
ID            IMAGE                                COMMAND    ...   PORTS
ecce33b30ebf  ${your_name}/${image_name}:latest  npm start  ...   49160->8080
# 查看所有容器(包括已终止的)
docker ps -a
# 查看某容器内日志
docker logs -f ${container_id} # ${container_id}示例输出中的id下同
# 进入容器
# -i表示：交互式操作，-t表示：终端
docker exec -it ${container_id} bash
# 可通过输入 exit 退出
# 停止容器
docker container stop ${container_id}
# 启动已终止的容器
docker container start ${container_id}
# 删除容器
docker container rm ${container_id}
# 删除镜像
docker image rm ${image_id}

Docker pm2

官方资料

gitlab-ci 自动化部署vue [详细步骤分解]