开箱即用：Vue自动构建部署镜像制作教程

前端

2023-12-12 09:50:17

关键词：

简介

在当今快节奏的软件开发环境中，自动化是提高效率和简化流程的关键。对于前端开发人员来说，构建一个自动构建和部署的镜像可以节省大量时间和精力。

在本文中，我们将深入探讨如何使用Docker创建开箱即用的Vue自动构建部署镜像。我们将提供详细的分步指南，并使用插图来帮助你理解每个步骤。

准备工作

在开始之前，确保你已经安装了以下软件：

Docker Desktop
Node.js 和 npm
Vue CLI

构建Docker镜像

1. 初始化Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create my-vue-project

2. 创建Dockerfile

在项目根目录中，创建一个名为Dockerfile的文件：

FROM node:lts

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

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

3. 构建镜像

使用以下命令构建镜像：

docker build -t my-vue-image .

自动化构建和部署

现在我们已经构建了基本的镜像，让我们将其自动化以实现构建和部署。

4. 使用GitHub Actions

GitHub Actions是一个持续集成和持续部署平台。它可以帮助我们自动化构建和部署过程。

在你的Vue项目根目录中，创建一个名为.github/workflows/ci.yml的文件：

name: CI

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    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: azure/docker-login@v1
        with:
          login-server: https://index.docker.io/v1/
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - run: docker build -t my-vue-image .
      - run: docker push my-vue-image