从零开始使用 gitlab 进行自动化部署

前言

一个新的项目，分别需要经过技术选型、基础功能搭建、制定开发规范、需求开发、项目发布等步骤。

对前面的步骤都还是比较了解，唯独最后一步，项目发布，总有种管中窥豹的感觉。虽知道可以通过 gitlab 的 CI/CD 来实现自动化部署。可是，具体应该怎么做呢？

这问题困扰了我很久，恰好最近公司提供了一个机会，研究网站性能优化方案。在完成公司网站的性能优化后，打算对自己的 blog 也进行一次升级（之前使用 github pages 部署的，国内访问超慢）。借此机会，也来完整地走一遍从一个新项目到自动化部署完成这样的一个流程。

这里，就对使用 gitlab 进行自动化部署来进行一个总结。

环境

腾讯云轻量应用服务器
操作系统 – Ubuntu Server 18.04.1 LTS 64bit
gitlab
docker
nginx
node v14.17.6

前端框架

nuxtJS
项目使用 nuxt/content 脚手架进行开发

参考链接: https://www.nuxtjs.cn/blog/creating-blog-with-nuxt-content

工具

putty (登录服务器工具)
winSCP（将本地的文件或文件夹传输到服务端工具）

操作步骤

域名申请

可以通过域名注册进行申请购买。

域名备案

申请成功后，需要对域名进行备案，想了解为什么需要备案，可以查看这里。

备案时间不同地方所需要的时间不同，有的可能需要 10 天以上。所以，建议在项目开发之初，先进行备案申请，以免项目开发完后，影响项目正常上线运行。

备案方法可以直接通过腾讯云管理台上面的备案进行，跟着步骤走，提交对应的审核资料就可以了。

安装 docker

有好几个步骤，就不一一罗列出来，感兴趣的朋友可以点击下方链接直接访问。

参考链接：https://docs.docker.com/engine/install/ubuntu/

使用 docker 安装 nginx

安装好 docker 后，就可以使用 docker 获取指定的镜像了，我们使用 nginx 作为项目的服务器。

执行：

docker pull nginx:latest

检查 nginx 是否成功。

执行:

docker run -d --name nginx -p 80:80 nginx

访问公网 ip *.*.*.*。看是否有以下内容出现。

域名解析

通过以上步骤，能实现通过服务器 公网IP 来对网站进行访问了。但通过 IP 访问确实不是方便。将第一步的域名在这里进行解析。

解析完成后，就可以直接通过域名对网站进行访问了。

验证成功后，移除测试用的 docker 服务，执行：

docker stop nginx && docker rm nginx

如果对 docker 不熟悉，可以查看官方文档 https://docs.docker.com/。

配置 nginx

在 /home/ubuntu/www/nginx/conf.d 目录下新建 default.conf（路径仅作为参考，具体路径可以根据自己的服务器目录来定），内容如下：

server {
    listen       80;
    server_name  xiangming.tech;
    return 301 https://$server_name$request_uri;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

添加证书

从腾讯云的 SSL 证书管理处 购买 或者 免费申请 的 SSL 证书。

使用 winSCP (windows 版本), 将证书放在 /home/ubuntu/www/nginx/conf.d/cert 目录下。

其它操作系统可以参考：https://cloud.tencent.com/document/product/1207/53135

让项目支持 https，在 /home/ubuntu/www/nginx/conf.d 目录下添加 ssl.conf。内容如下：

server {
    # 服务器端口使用443，开启ssl, 这里ssl就是上面安装的ssl模块
    listen       443 ssl;
    # 域名，多个以空格分开
    server_name  xiangming.tech;

    # ssl证书地址
    ssl_certificate     /etc/nginx/conf.d/cert/xiangming.tech_bundle.pem;  # pem文件的路径
    ssl_certificate_key /etc/nginx/conf.d/cert/xiangming.tech.key; # key文件的路径

    # ssl验证相关配置
    ssl_session_timeout  5m;    #缓存有效期
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;    #加密算法
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;    #安全链接可选的加密协议
    ssl_prefer_server_ciphers on;   #使用服务器端的首选算法

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

注意：如果不添加 SSL，浏览器链接的左边会显示 No secure 安全警告。

启动 nginx

docker run --name nginx -d -p 80:80 -p 443:443 -v /home/ubuntu/www/nginx/conf.d:/etc/nginx/conf.d -v /home/ubuntu/www/blogs:/usr/share/nginx/html  -v /home/ubuntu/www/nginx/log:/var/log/nginx nginx

注意

因为启用了 SSL，所以需要将 80 和 443 两个端口都暴露出来。
使用 -v 对配置文件进行挂载。

此时，可以在 /home/ubuntu/www/blogs 目录下添加一个 index.html，随便写一点内容，就可以看到效果了。

通过域名访问首页

使用 docker 安装 gitlab-runner

获取 gitlab-runner 镜像

docker pull gitlab/gitlab-runner

启动 gitlab-runner 服务

docker run -d --name gitlab-runner --restart always 
  -v /var/run/docker.sock:/var/run/docker.sock 
  -v /srv/gitlab-runner/config:/etc/gitlab-runner 
  gitlab/gitlab-runner:latest

将 gitlab-runner 注册到 gitlab 中，执行

docker run --rm -it -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register

提示输入 gitlab instance URL

在 gitlab 对应的 项目 > Settings > CI/CD > Runners 下面找到

将 https://gitlab.com/ 复制然后粘贴到刚才需要输入的地方，然后会提示输入 token

点击这里，复制 token，粘贴到命令行中

然后根据步骤，输入描述、runner 的名称（tags），最后选择是使用使用执行，我们输入 docker

1. Run the register command based on the mount type:
2. Enter your GitLab instance URL (also known as the gitlab-ci coordinator URL).
3. Enter the token you obtained to register the runner.
4. Enter a description for the runner. You can change this value later in the GitLab user interface.
5. Enter the tags associated with the runner, separated by commas. You can change this value later in the GitLab user interface.
6. Enter any optional maintenance note for the runner.
7. Provide the runner executor. For most use cases, enter docker.
8. If you entered docker as your executor, you are asked for the default image to be used for projects that do not define one in .gitlab-ci.yml.

注意第 8 步，如果选择的是 docker，需要输入一个默认的执行环境，这里我输入的是 node:14.17.6

参考链接：https://docs.gitlab.com/runner/install/docker.html

前端项目添加 .gitlab-ci.yml

在项目的根目录下添加 .gitlab-ci.yml 文件，内容如下：

stages:
  - build

before_script:
  - 'command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )'
  - eval $(ssh-agent -s)
  - echo "$SSH_PRIVATE_KEY" | tr -d 'r' | ssh-add -
  - mkdir -p ~/.ssh
  - chmod 700 ~/.ssh

# cache:
#   paths:
    # - node_modules

build:
  stage: build
  script:
    - npm install --registry=https://registry.npm.taobao.org
    - npm run generate
    - scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -r ./dist/** ubuntu@*.*.*.*:/home/ubuntu/www/blogs
  tags:
    - blog3
  only:
    - master