如何在 Ubuntu 18.04 上使用 GitLab CI/CD 自动部署 Vue 应用程序

作者：Michael Okoh ✏️

先决条件

• 命令行基础知识
• 具备 Docker 基础知识
• 版本控制基础知识
• 本地计算机上已安装最新版本的 Node.js。

在本地计算机上安装 Vue

首先，您需要安装vue-cli。这是一个命令行工具，可以帮助您快速搭建一个新的 Vue 应用。运行以下命令即可vue-cli在本地计算机上安装：

npm install -g @vue/cli

这将拉取运行所需的所有依赖项vue-cli，您可以通过运行以下命令来验证其安装情况：

vue

创建一个 Vue 应用程序

在此步骤中，您将使用vue-clicreate 命令创建一个新应用，该命令将帮助我们搭建应用框架并添加必要的插件。运行以下命令创建一个新的 Vue 应用：

vue create vue-demo

系统会提示您选择预设，请保留默认预设，然后按回车键继续。

完成此操作后，切换到vue-demo创建的文件夹vue-cli并运行：

npm run serve

这将使您的 Vue 应用程序可以通过本地主机上的 8080 端口访问。访问http://localhost:8080即可查看您的应用程序。

设置 GitLab

现在，您需要将 Vue 应用推送到 GitLab 仓库。请访问GitLab 网站并登录您的帐户，如果您还没有帐户，请创建一个。

接下来，创建一个新项目。在 GitLab 控制面板的右上角，你会看到一个带有“创建新项目”字样的绿色按钮New project。点击它。

此时会弹出一个新屏幕，要求您为项目命名。请为项目命名vue-demo，项目描述可以留空，项目可以是公共仓库，也可以是私有仓库。最后一个复选框不要勾选。

您需要将vue-demo本地应用程序与远程仓库关联起来。为此，请打开终端，确保您位于应用程序的目录中，然后运行以下命令：

git init
git remote add origin git@gitlab.com:<your-gitlab-username>/vue-demo.git
git add .
git commit -m "Initial commit"
git push -u origin master

注意：请替换<your-gitlab-username>为您实际的 GitLab 用户名。

系统会提示您输入 GitLab 密码，或者如果您之前已配置过，则可通过 SSH 进行身份验证。完成后，访问vue-demoGitLab 上的项目控制面板，您的所有源文件都应该会显示在那里。

配置管道

在此步骤中，我们将使用 Docker 和 GitLab CI 配置我们的流水线。使用您喜欢的文本编辑器或 IDE，创建一个名为 `.js` 的新文件（Dockerfile不带任何扩展名），并将以下内容粘贴到该文件中：

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

此 Docker 配置会拉取 Node alpine 镜像，该镜像将用于构建我们的生产应用程序；第二阶段会拉取 Nginx alpine 镜像，该镜像将用于提供从第一阶段复制的构建代码库。

接下来，创建一个配置文件.gitlab-ci.yml。这将允许 GitLab 将我们的更改部署到服务器。此配置文件会建立与服务器的通信。它包含在每次代码推送时应在服务器上执行的操作和命令。将以下内容复制并保存到您的.gitlab-ci.yml文件中：

image: docker
services:
  - docker:dind
stages:
  - deploy
step-deploy-prod:
  stage: deploy
  script:
    - docker build -t app/vue-demo .
    - docker run -d -p 80:80 --rm --name todoapp app/vue-demo

提交并将这些文件推送到远程仓库：

git add .
git commit -m "Pipeline Configurations"
git push

下一步，我们将配置服务器以与 GitLab 的 CI/CD 协同工作。

配置服务器

在这一步，您需要一台运行Ubuntu 系统的服务器。您可以在DigitalOcean上注册并快速配置 Ubuntu 服务器。

通过 SSH 连接到您的服务器

通过运行以下命令以 SSH 方式连接到您的服务器：

ssh username@<server-ip>

注意：在 Windows 系统上，SSH 连接步骤可能有所不同。

安装 GitLab Runner

GitLab Runner充当 GitLab 和远程服务器之间的接口。运行以下命令安装 GitLab Runner：

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh | sudo bash
sudo apt-get install gitlab-runner
sudo gitlab-runner start

这将在您的服务器上安装并启动 GitLab Runner。

注册管道

要注册管道，请运行以下命令：

sudo gitlab-runner register

您将看到类似这样的提示：

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

输入https://gitlab.com/并按下Enter。下一个提示将是：

Please enter the gitlab-ci token for this runner:

vue-demo您可以通过将鼠标悬停Settings在左侧导航栏部分，从项目仪表板获取您的令牌，此时会显示另一个子菜单，其中包含许多选项，点击即可CI / CD。

接下来，点击Expand跑步者选项上的按钮。

选项展开后，您将看到您的令牌，复制它，返回服务器 SSH 终端，粘贴它并按下该Enter键。

要跳过所有这些步骤，您可以直接访问https://gitlab.com/<username>/vue-demo/-/settings/ci_cd。

注意：<username>应该是您的 GitLab 用户名

接下来，您需要输入跑步者的描述和标签，例如：

Please enter the gitlab-ci description for this runner:

和

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

按下此Enter键跳过这些步骤。接下来，您将看到以下提示：

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

输入shell并按回车键。至此，您已成功在服务器上注册了 GitLab Runner。

安装 Docker

您可以通过运行以下命令快速安装 Docker：

sudo snap install docker

这将快速在您的机器上安装 Docker。接下来，我们需要运行以下命令来设置 Docker 的权限：

sudo groupadd docker
sudo usermod -aG docker $USER

按如下方式重启服务器：

reboot

重新登录并运行：

sudo usermod -aG docker gitlab-runner

这将把 GitLab Runner 添加到 Docker 组中。

将 GitLab Runner 添加到 sudoers 中

要将 GitLab Runner 添加到 sudoers 列表中，请运行：

sudo nano /etc/sudoers

将以下内容粘贴到文件末尾：

gitlab-runner ALL=(ALL) NOPASSWD: ALL

保存并退出nano。

核实信息

要验证您的信息，请运行：

sudo nano /etc/gitlab-runner/config.toml

它应该包含类似这样的内容：

...
[[runners]]
  url = "https://gitlab.com/"
  token = "XXXXXXXXX"
  executor = "shell"
  [runners.custom_build_dir]
  [runners.ssh]
    user = "<SERVER ACCOUNT USERNAME>"
    host = "<SERVER IP ADDRESS>"
  [runners.cache]
    [runners.cache.s3]
    [runners.cache.gcs]
...

如果user属性host详细信息与您的服务器不匹配，您可以在此部分进行更正：

...
[runners.ssh]
  user = "<SERVER ACCOUNT USERNAME>"
  host = "<SERVER IP ADDRESS>"
...

如果文件中不存在该信息，请添加该信息以及正确的凭据，保存并退出文件。重启 GitLab Runner：

sudo gitlab-runner restart

测试部署

在此步骤中，您将运行您的管道，以查看您的应用程序是否可以部署到服务器上。

从项目 GitLab 控制面板前往流水线菜单。

点击Run Pipeline。

选择要从中部署的分支，默认情况下为master。单击Run Pipeline。

您的应用程序部署即将开始。

点击按钮step-deploy-....查看流程。

部署成功后，您会看到一条Job succeeded消息。如果部署失败，请检查所有步骤，确保没有遗漏任何步骤。在浏览器中访问您的服务器 IP 地址，您将看到 Vue 登录页面，这表示您的应用程序已成功部署。

每次向master分支推送数据时，您的应用程序都会自动构建并部署自身。

结论

在本教程中，您已成功创建了一个 Vue 项目，编写了 Docker 和 GitLab CI 配置，配置了包含 Docker 和 GitLab Runner（以及必要权限）的服务器，并在 GitLab 上配置了流水线。完成这些步骤后，您就可以配置其他项目了。

像用户一样体验您的 Vue 应用

调试 Vue.js 应用可能很困难，尤其是在用户会话期间发生数十甚至数百次变更时。如果您有兴趣监控和跟踪生产环境中所有用户的 Vue 变更，不妨试试 LogRocket。

LogRocket就像 Web 应用的 DVR，它会记录 Vue 应用中发生的一切，包括网络请求、JavaScript 错误、性能问题等等。你无需猜测问题发生的原因，即可汇总并报告问题发生时应用的状态。

LogRocket Vuex 插件会将 Vuex mutations 记录到 LogRocket 控制台，从而提供有关导致错误的原因以及问题发生时应用程序所处状态的上下文信息。

革新您的 Vue 应用调试方式 -开始免费监控。

文章“如何在 Ubuntu 18.04 上使用 GitLab CI/CD 自动部署 Vue 应用程序”最初发表于LogRocket 博客。