使用 Docker 和 Docker Compose 部署 Vue

简介: 使用 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-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 网络。
  • networks: 定义网络
    • vue-network: 定义一个名为 vue-network 的网络。

      2. 构建和运行 Docker 容器

      使用 Docker Compose 来构建和运行容器:
      docker compose up --build -d
      

      访问

      你的Vue.js应用应该可以通过浏览器访问了,地址为 http://localhost:5000。

      总结

      使用 Docker: 更适合单一应用的简单部署,步骤较少,但需要手动管理多个容器的网络和依赖关系。
      使用 Docker Compose: 更适合管理多服务应用,通过一个配置文件管理所有服务及其依赖,适合复杂应用的部署。
      这两种方式都能有效地部署 Vue 应用,选择哪种方式取决于你的具体需求和应用复杂性。
目录
相关文章
|
26天前
|
运维 网络安全 持续交付
IDEA+Docker 远程一键部署项目:技术干货分享
【10月更文挑战第4天】在现代软件开发中,快速、可靠、自动化的部署流程是提升开发效率和运维质量的关键。IDEA(IntelliJ IDEA)作为Java开发者首选的IDE,结合Docker这一轻量级容器化技术,能够实现远程一键部署项目,极大地简化了开发到生产的流程。今天,我将和大家分享这一组合在工作学习中的实际应用和技术干货。
168 3
|
5天前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
29 3
国产数据实战之docker部署MyWebSQL数据库管理工具
|
12天前
|
缓存 监控 持续交付
|
21天前
|
JSON JavaScript 测试技术
【Docker项目实战】使用Docker部署PPTist在线演示文稿应用
【10月更文挑战第9天】使用Docker部署PPTist在线演示文稿应用
32 1
【Docker项目实战】使用Docker部署PPTist在线演示文稿应用
|
23天前
|
存储 前端开发 测试技术
【Docker项目实战】使用Docker部署Calcium网页计算器
【10月更文挑战第7天】使用Docker部署Calcium网页计算器
26 1
【Docker项目实战】使用Docker部署Calcium网页计算器
|
7天前
|
负载均衡 监控 开发者
深入浅出:掌握 Docker Compose 的高级用法
【10月更文挑战第22天】本文深入探讨了 Docker Compose 的高级用法,包括环境变量、服务扩展、网络配置和数据卷管理。通过实例详细介绍了如何利用这些功能提升开发效率和应用部署的灵活性。适合希望深入了解 Docker Compose 的开发者阅读。
|
26天前
|
存储 测试技术 Linux
【Docker项目实战】使用Docker部署Radicale日历和联系人应用
【10月更文挑战第4天】使用Docker部署Radicale日历和联系人应用
96 2
【Docker项目实战】使用Docker部署Radicale日历和联系人应用
|
7天前
|
消息中间件 Linux RocketMQ
在Red Hat Enterprise Linux 9上使用Docker快速安装并部署
通过以上步骤,你可以在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ。这种方法不仅简化了安装过程,还提供了一个灵活的环境来管理和扩展消息队列系统。RocketMQ作为一款高性能的分布式消息系统,通过Docker可以实现快速部署和高效管理。
25 2
|
8天前
|
消息中间件 Linux RocketMQ
在Red Hat Enterprise Linux 9上使用Docker快速安装并部署
通过以上步骤,你可以在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ。这种方法不仅简化了安装过程,还提供了一个灵活的环境来管理和扩展消息队列系统。RocketMQ作为一款高性能的分布式消息系统,通过Docker可以实现快速部署和高效管理。
19 3
|
11天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
115 2