Vue.js项目使用Docker、GitLab和Jenkins实现自动化部署

前端

2024-02-10 02:39:41

简介

在现代软件开发中，自动化部署已成为一项必不可少的实践。它可以显著缩短部署时间，减少人为错误，并提高系统的整体稳定性。本文将重点介绍如何使用Docker、GitLab和Jenkins为Vue.js项目实现自动化部署。

先决条件

在继续之前，确保您满足以下先决条件：

安装Docker和Docker Compose
安装Git并配置GitLab
安装Jenkins

设置Docker镜像

创建一个Dockerfile，其中包含构建Vue.js应用程序所需的命令：

FROM node:16-alpine

WORKDIR /usr/src/app

COPY package.json .
RUN npm install

COPY . .

CMD ["npm", "run", "serve"]

构建并标记Docker镜像：

docker build -t vue-app .
docker tag vue-app:latest registry.gitlab.com/your-group/your-project/vue-app:latest

集成GitLab CI/CD

创建GitLab CI/CD管道以自动化构建和部署过程：

image: registry.gitlab.com/gitlab-org/gitlab-ci-multi-runner/docker:latest

stages:
  - build
  - deploy

build:
  stage: build
  script:
    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN registry.gitlab.com
    - docker push registry.gitlab.com/your-group/your-project/vue-app:latest

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

配置Jenkins

在Jenkins中创建一项新作业：

Pipeline
Git 存储库配置
构建触发器
构建步骤：
- Execute shell 构建命令：
  - git clone $WORKSPACE
  - cd $WORKSPACE
  - git fetch
  - git checkout $CI_COMMIT_REF_NAME
  - docker-compose pull
  - docker-compose up -d