使用 Docker 和 Docker Compose 部署 Vue 项目有两种方式:直接使用 Docker 和使用 Docker Compose。
创建 Dockerfile
在Vue.js项目根目录下创建一个 Dockerfile
的文件
bash
# 使用最新的官方 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
文件
bash
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构建镜像:
bash
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应用容器命令:
bash
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 的文件,内容如下:
yaml
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-network
networks:
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
网络。
- vue-network : 加入
- build : 构建镜像时的配置。
- vue-app : 定义服务名称。
- networks : 定义网络
- vue-network : 定义一个名为
vue-network
的网络。
- vue-network : 定义一个名为
2. 构建和运行 Docker 容器
使用 Docker Compose 来构建和运行容器:
bash
docker compose up --build -d
访问
你的Vue.js应用应该可以通过浏览器访问了,地址为 http://localhost:5000。
总结
使用 Docker: 更适合单一应用的简单部署,步骤较少,但需要手动管理多个容器的网络和依赖关系。
使用 Docker Compose: 更适合管理多服务应用,通过一个配置文件管理所有服务及其依赖,适合复杂应用的部署。
这两种方式都能有效地部署 Vue 应用,选择哪种方式取决于你的具体需求和应用复杂性。