使用 Docker 一步步自动化部署 Vue 3 前端项目到 Linux

引言

自动化部署对于现代软件开发至关重要。它可以显著缩短部署时间，提高可靠性，并使开发人员能够专注于更具战略意义的任务。本文将引导您逐步使用 Docker 自动化 Vue 3 前端项目的部署到 Linux 系统上。

先决条件

在继续之前，请确保您具备以下条件：

• 已安装 Docker 和 Docker Compose
• 已安装 Node.js 和 npm
• 已有一个 Vue 3 项目

步骤 1：设置 Docker 环境

1. 创建一个名为 docker-compose.yml 的文件。
2. 在该文件中添加以下内容：

version: '3.8'

services:
  app:
    build: .
    volumes:
      - .:/usr/src/app
    ports:
      - "8080:8080"

3. 运行 docker-compose up 以构建并启动 Docker 容器。

步骤 2：配置持续集成

我们将使用 GitHub Actions 来实现持续集成。

1. 创建一个 .github/workflows/ci.yml 文件。
2. 在该文件中添加以下内容：

name: CI/CD

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: docker/build-push-action@v3
        with:
          push: true
          registry: ghcr.io
          repository: username/repository
          dockerfile: Dockerfile

3. 将 username/repository 替换为您自己的 GitHub 用户名和仓库名称。

步骤 3：构建和部署镜像

当您将代码推送到 GitHub 时，GitHub Actions 将自动构建和部署 Docker 镜像。

1. 在您的 GitHub 仓库中，创建一个名为 Dockerfile 的文件。
2. 在该文件中添加以下内容：

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

CMD npm run serve

步骤 4：测试部署

要测试部署，请转到 Docker Compose 容器所在的服务器。然后，运行以下命令：

docker-compose up -d

这将启动 Docker 容器并运行 Vue 3 应用程序。

结论

通过遵循本指南，您已经成功地自动化了 Vue 3 前端项目在 Linux 上的 Docker 部署。这将大大缩短您的部署时间，提高可靠性，并释放您的时间来专注于其他任务。随着持续集成的实现，您的项目将受益于持续部署的优势。