乐趣区

gitlabci-自动化部署vue-详细步骤分解

jiezi

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

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

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

服务器系统

  • Centos7

本地部署 gitlab 并汉化

  • 参考资料 1
  • 参考资料 2

安装社区版 gitlab ce

  1. 安装依赖项
yum install -y curl openssh-server openssh-clients postfix cronie policycoreutils-python
  1. 启动 postfix，并设置为开机启动
systemctl start postfix
systemctl enable postfix
  1. 设置防火墙
firewall-cmd --add-service=http --permanent
firewall-cmd --reload
  1. 获取 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 步骤）
还有一种获取途径 从官方下载（速度太慢 放弃）

  1. 安装 rpm 包
rpm -i gitlab-ce-12.2.0-ce.0.el7.x86_64.rpm
# 根据提示执行
  1. 执行指令配置 gitlab(如果想要修改配置内容，先跳过此步骤，修改完成后再执行)
gitlab-ctl reconfigure
  1. 配置 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
  1. 邮件设置（我没有使用这个功能所以没配置，项配置的小伙伴可以参考参考资料 2 配置 postfix）
  2. 配置完成后，执行 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
  1. 安装完成后，使用浏览器打开 http:// 服务器 IP/ 域名:11000 进入登陆界面(首次登陆会提示让你修改 root 密码)

汉化

  • 第一种方法(当时我克隆的时候有点慢，最后放弃了)
  1. 安装 git
yum install -y git
  1. 克隆汉化版本库
cd /usr/local
git clone https://gitlab.com/xhang/gitlab.git
  1. 查看版本库
cat gitlab/VERSION
  1. 查看 gitlab 版本
head -1 /opt/gitlab/version-manifest.txt
  1. 停止 gitlab
gitlab-ctl stop
  1. 切换到克隆下来的目录
cd /usr/local/gitlab
  1. 导出 patch 用的 diff 文件到 /usr/local 下（就是比较两个分支的差异）
git diff 12-1-stable 12-1-stable-zh > ../12-1-stable-zh.diff
  1. 回到 /usr/local 目录
cd
  1. 将 12-1-stable-zh.diff 作为补丁更新到 gitlab 中
yum install patch -y
patch -d /opt/gitlab/embedded/service/gitlab-rails -p1 < 12-1-stable-zh.diff
  1. 启动 gitlab 并重新配置 gitlab
gitlab-ctl start
gitlab-ctl reconfigure
  • 第二种方法

参考原文

  1. 汉化代码库下载对应版本中文分支 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

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

  1. 解压后查看版本
cat gitlab-12-1-stable-zh/VERSION
  1. 备份英文版
cp -r /opt/gitlab/embedded/service/gitlab-rails{,.ori}
  1. 中文版覆盖英文版
/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 密码，登录过，所以会报错。
  1. 重新配置和重启
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

sudo gitlab-runner register
  1. 进入你 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

官方资料

退出移动版