Docker Compose 整合 GitLab CI 实践

前言

在前端开发过程中，我们经常会遇到一些问题，例如：

项目依赖环境不一致导致无法正常运行
多人协作开发时，代码合并问题
部署时环境配置繁琐

这些问题可以通过使用 Docker 和 GitLab CI 来解决。本文将介绍如何使用 Docker Compose 整合 GitLab CI 实现前端项目的自动化构建、测试和部署。

Docker Compose 简介

Docker Compose 是 Docker 官方提供的一个工具，用于定义和运行多个 Docker 容器的应用。通过 Docker Compose，我们可以方便地定义容器之间的关系、网络和存储等。

GitLab CI 简介

GitLab CI 是 GitLab 提供的持续集成服务，可以让我们在代码提交时自动构建、测试和部署应用程序。

实践过程

1. 准备工作

在开始之前，我们需要准备以下工具和环境：

Docker
Docker Compose
GitLab CI
一个前端项目

2. 创建 Docker Compose 文件

在项目根目录下创建一个名为 docker-compose.yml 的文件，定义了项目的容器和服务。

// javascriptcn.com 代码示例
version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development

上述 Docker Compose 文件中，我们定义了一个名为 web 的服务，使用当前目录下的 Dockerfile 构建容器，并将容器的 3000 端口映射到主机的 3000 端口。同时，我们将当前目录挂载到容器中的 /app 目录，使得容器中的代码可以和主机共享。

3. 创建 GitLab CI 文件

在项目根目录下创建一个名为 .gitlab-ci.yml 的文件，定义了 GitLab CI 的构建、测试和部署流程。

// javascriptcn.com 代码示例
image: docker/compose:1.29.2

services:
  - docker:dind

stages:
  - build
  - test
  - deploy

before_script:
  - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY

build:
  stage: build
  script:
    - docker-compose build

test:
  stage: test
  script:
    - docker-compose run --rm web npm run test

deploy:
  stage: deploy
  script:
    - docker-compose up -d

上述 GitLab CI 文件中，我们定义了三个阶段：build、test 和 deploy。在 before_script 中，我们登录了 Docker Hub，以便在 deploy 阶段中上传镜像。

在 build 阶段中，我们使用 docker-compose build 命令构建容器。在 test 阶段中，我们使用 docker-compose run 命令运行容器，并在容器中执行测试命令。在 deploy 阶段中，我们使用 docker-compose up 命令启动容器。

4. 配置 GitLab CI

我们需要在 GitLab 中配置 CI/CD 变量，以便在构建、测试和部署过程中使用。具体步骤如下：

在 GitLab 中进入项目设置页面
选择 CI/CD 选项卡
在 Variables 部分中添加以下变量：
- CI_REGISTRY_USER：Docker Hub 用户名
- CI_REGISTRY_PASSWORD：Docker Hub 密码

5. 提交代码并触发 CI/CD 流程

现在，我们可以将代码提交到 GitLab，然后触发 CI/CD 流程。在流程完成后，我们可以在容器中查看应用程序的输出，并验证是否正确运行。

总结

通过本文的实践，我们学习了如何使用 Docker Compose 和 GitLab CI 实现前端项目的自动化构建、测试和部署。这种方式不仅可以简化环境配置，还可以提高开发效率和代码质量。我们希望这篇文章对你有所启发，并能够在你的项目中得到应用。

示例代码

Docker Compose 文件

// javascriptcn.com 代码示例
version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development

GitLab CI 文件

// javascriptcn.com 代码示例
image: docker/compose:1.29.2

services:
  - docker:dind

stages:
  - build
  - test
  - deploy

before_script:
  - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY

build:
  stage: build
  script:
    - docker-compose build

test:
  stage: test
  script:
    - docker-compose run --rm web npm run test

deploy:
  stage: deploy
  script:
    - docker-compose up -d

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65710e94d2f5e1655d9b8eda