当前位置: 首页> 房产> 家装 > 使用 Docker 和 Docker Compose 部署 Vue

使用 Docker 和 Docker Compose 部署 Vue

时间:2025/7/11 23:42:27来源:https://blog.csdn.net/qq_21275565/article/details/139250993 浏览次数:0次

使用 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;}
}

部署 Vue 项目

使用 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 镜像来创建容器

使用 Docker Compose 部署 Vue 项目

1. 创建 docker-compose.yml 文件

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

version: '3.0'services:vue-app:build:context: .dockerfile: Dockerfileimage: vue-appcontainer_name: vue-appenvironment:- TZ=Asia/Shanghaiports:- "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 应用,选择哪种方式取决于你的具体需求和应用复杂性。

关键字:使用 Docker 和 Docker Compose 部署 Vue

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: