当前位置：首页 > 行业知识 > 使用 Docker 和 Docker Compose 部署 Vue

行业知识

使用 Docker 和 Docker Compose 部署 Vue

2026-11-11 22:02:52 来源：互联网转载

使用 Docker 和 Docker Compose 部署 Vue 项目有两种方式：直接使用 Docker 和使用 Docker Compose。

创建 Dockerfile

在Vue.js项目根目录下创建一个 Dockerfile 的文件

# 使用最新的官方 Node.js 镜像作为基础镜像，并命名为 `builder` 阶段FROM node:latest AS builder# 设置工作目录  WORKDIR /app# 将当前目录下的所有文件复制到容器的工作目录 `/app` 中COPY . .# 在容器中安装项目依赖RUN npm install# 在容器中构建项目RUN npm run build# 使用轻量级的官方 Nginx 镜像作为基础镜像FROM nginx:alpine# 时区ENV TZ=Asia/Shanghai# 本地的 `nginx.conf` 文件复制到容器的 `/etc/nginx/conf.d/default.conf`COPY nginx.conf /etc/nginx/conf.d/default.conf# `builder` 阶段中复制构建好的文件到 Nginx 容器的网页根目录 `/usr/share/nginx/html`COPY --from=builder /app/dist /usr/share/nginx/html

创建 Nginx 配置文件

在Vue.js项目根目录创建一个 nginx.conf 文件

gzip on;server {    listen 80;    server_name localhost;    location / {        # Vue.js应用目录        root /usr/share/nginx/html;        try_files $uri $uri/ /index.html;        index  index.html index.htm;    }}

方法1: 使用 Docker 部署 Vue 项目

1. 构建 Docker 镜像

在Vue.js项目根目录下运行Docker构建镜像：

docker build -t vue-app:1.0 .

选项或参数	含义
docker build	命令，用于从Dockerfile构建一个新的Docker镜像
-t vue-app:1.0	为构建的镜像指定一个标签（tag），这里是 vue-app:1.0
.	指定构建上下文的路径，这里是当前目录

2. 运行 Docker 容器

运行你的Vue.js应用容器命令：

docker run -d --restart=always --name vue-app -p 5000:80 vue-app:1.0

选项或参数	含义
docker run	命令，用于创建并运行一个新的容器
-d	以分离模式（后台）运行容器
--restart=always	容器退出时总是重新启动（无论退出代码是什么），在Docker守护进程启动时也重新启动
--name vue-app	给容器指定一个名称为 vue-app
-p 5000:80	将主机的5000端口映射到容器的80端口
vue-app:1.0	使用 vue-app:1.0 镜像来创建容器

方法2: 使用 Docker Compose 部署 Vue 项目

1. 创建 docker-compose.yml 文件

在项目根目录下创建一个名为 docker-compose.yml 的文件，内容如下：

version: '3.0'services:  vue-app:    build:      context: .      dockerfile: Dockerfile    image: vue-app    container_name: vue-app    restart: always    environment:      - TZ=Asia/Shanghai    ports:      - "5000:80"    networks:      - vue-networknetworks:  vue-network:

version: 指定 Docker Compose 文件版本。
services: 定义服务
- vue-app: 定义服务名称。
  - build: 构建镜像时的配置。
    - context: 构建上下文目录。
    - dockerfile: 指定 Dockerfile 的文件名为 Dockerfile。
    - image: 生成的镜像名称。
    - container_name: 容器名称
    - environment: 设置容器的环境变量
      - TZ=Asia/Shanghai: 设置时区
      - ports: 端口映射设置
        5000:80: 将宿主机的 5000 端口映射到容器的 80 端口。
        networks: 配置容器连接的网络。
        vue-network: 加入 vue-network 网络。
        networks: 定义网络
        vue-network: 定义一个名为 vue-network 的网络。
        2. 构建和运行 Docker 容器
        
        使用 Docker Compose 来构建和运行容器：
        
        docker compose up --build -d
        
        访问
        
        你的Vue.js应用应该可以通过浏览器访问了，地址为 http://localhost:5000。
        
        总结
        
        使用 Docker：更适合单一应用的简单部署，步骤较少，但需要手动管理多个容器的网络和依赖关系。
        使用 Docker Compose：更适合管理多服务应用，通过一个配置文件管理所有服务及其依赖，适合复杂应用的部署。
        这两种方式都能有效地部署 Vue 应用，选择哪种方式取决于你的具体需求和应用复杂性。