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

头像
xiaosi
    阅读 7 分钟
    2

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

    起因是:每个服务器都要打包不同的axios的baseURL表示很心累，于是我想偷懒(就是这么直接)
    • 实现过程中还是踩了不少坑的，话不多说，进入正题。有不正确的欢迎指正。

    服务器系统

    • Centos7

    本地部署gitlab并汉化

    安装社区版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
    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/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

    官方资料

    vue.js自动化部署
    xiaosi
    120 声望8 粉丝
    « 上一篇
    koa2+vue+mysql 全栈开发记录
    下一篇 »
    抽空总结了下我的VUE入门

    引用和评论

    推荐阅读
    头像
    koa2中使用swagger

    xiaosi赞 5阅读 7.3k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 534评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 941

    0 条评论
    得票最新