基于 Nginx 制作 Vue 项目镜像（使用Dockerfile）

最新推荐文章于 2025-06-12 17:56:57 发布
最新推荐文章于 2025-06-12 17:56:57 发布
阅读量1k 收藏 11
点赞数 8
CC 4.0 BY-SA版权
文章标签： docker 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37021198/article/details/146364025

基于 Nginx 制作 Vue 打包文件的 Docker 镜像是一种常见的部署方式。Vue 项目打包后会生成静态文件（通常位于 dist 目录），我们可以使用 Nginx 来提供这些静态文件的服务。以下是详细的 Dockerfile 示例及说明：

Dockerfile 示例
# 使用官方的 Nginx Alpine 镜像作为基础镜像
FROM nginx:alpine

# 设置工作目录
WORKDIR /usr/share/nginx/html

# 删除 Nginx 默认的静态文件
RUN rm -rf ./*

# 将 Vue 打包后的文件复制到 Nginx 的静态文件目录
COPY dist/ .

# 复制自定义的 Nginx 配置文件（可选）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
详细说明
1. FROM nginx:alpine
  • 使用 nginx:alpine 作为基础镜像，这是一个轻量级的 Nginx 镜像，适合部署静态资源。
2. WORKDIR /usr/share/nginx/html
  • 设置工作目录为 Nginx 的默认静态文件目录。
3. RUN rm -rf ./
  • 删除 Nginx 默认的静态文件（可选步骤）。
4. COPY dist/ .
  • 将 Vue 项目打包后的 dist 目录中的所有文件复制到 Nginx 的静态文件目录。
5. COPY nginx.conf /etc/nginx/conf.d/default.conf
  • 复制自定义的 Nginx 配置文件（可选）。如果没有自定义配置，可以省略这一步。
6. EXPOSE 80
  • 暴露容器的 80 端口。
7. CMD ["nginx", "-g", "daemon off;"]
  • 启动 Nginx，并以前台模式运行。
自定义 Nginx 配置文件（可选）

如果需要自定义 Nginx 配置，可以创建一个 nginx.conf 文件，例如：

nginx.conf 示例
server {
    listen 80;
    server_name localhost;

    # 静态文件目录
    root /usr/share/nginx/html;

    # 默认首页
    index index.html;

    # 处理 Vue 路由的 404 问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 禁止访问 .htaccess 文件
    location ~ /\.ht {
        deny all;
    }

    # 配置缓存（可选）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}
  • 将 nginx.conf 文件放在与 Dockerfile 相同的目录中。
构建和运行
1. 打包 Vue 项目

在构建 Docker 镜像之前，确保 Vue 项目已经打包：

npm run build

打包后的文件会生成在 dist 目录中。

2. 构建 Docker 镜像

在项目根目录下运行以下命令：

docker build -t my-vue-app .
3. 运行容器
docker run -p 8080:80 my-vue-app
  • 将容器的 80 端口映射到主机的 8080 端口。
4. 访问应用

打开浏览器，访问 http://localhost:8080，即可看到部署的 Vue 项目。

优化建议
  1. 使用 .dockerignore 文件
    • 在构建镜像时，忽略不必要的文件（如 node_modules/、.git/ 等），以加快构建速度。
    • 示例 .dockerignore 文件：
node_modules/
.git/
dist/
  1. 减小镜像体积
    • 使用 nginx:alpine 作为基础镜像，它是一个轻量级的 Nginx 版本。
  1. 配置 HTTPS
    • 如果需要支持 HTTPS，可以在 Nginx 配置中添加 SSL 证书，并将暴露的端口改为 443。
  1. 使用多阶段构建（可选）
    如果需要在 Docker 中完成 Vue 项目的打包，可以使用多阶段构建：
# 第一阶段：构建 Vue 项目
FROM node:16 AS build
WORKDIR /app
COPY package*.json ./
COPY . .
RUN npm install
RUN npm run build

# 第二阶段：使用 Nginx 部署
FROM nginx:alpine
WORKDIR /usr/share/nginx/html
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
总结
  • 使用 Nginx 部署 Vue 打包文件是一种高效且常见的方式。
  • 通过 Dockerfile，可以快速构建和部署 Vue 项目。
  • 如果需要自定义 Nginx 配置，可以通过 COPY 命令将配置文件复制到镜像中。
  • 最终镜像可以通过 Docker 快速部署到任何支持 Docker 的环境中。
docker build -t my-java-app . 解析

docker build -t my-java-app . 是一个用于构建 Docker 镜像的命令。以下是对该命令的详细解析：

命令结构
docker build -t my-java-app .
  1. docker build
    • 这是 Docker 的构建命令，用于根据 Dockerfile 构建一个新的镜像。
  1. -t my-java-app
    • -t 是 --tag 的缩写，用于为构建的镜像指定一个名称（tag）。
    • my-java-app 是镜像的名称。你可以根据需要自定义名称。
    • 如果需要指定版本号，可以使用 : 分隔，例如 my-java-app:1.0。
  1. .
    • 这是构建上下文的路径，表示当前目录。
    • Docker 会将当前目录及其子目录作为构建上下文，发送到 Docker 守护进程。
    • Dockerfile 和需要复制的文件（如 COPY 或 ADD 指令中的文件）必须位于构建上下文中。
详细步骤
  1. Dockerfile
    • Docker 会根据当前目录下的 Dockerfile 文件构建镜像。
    • 如果 Dockerfile 文件不在当前目录，或者文件名不是 Dockerfile，可以使用 -f 参数指定 Dockerfile 的路径：
docker build -t my-java-app -f /path/to/Dockerfile .
  1. 构建上下文
    • Docker 会将当前目录（.）作为构建上下文，发送到 Docker 守护进程。
    • 所有文件操作（如 COPY 或 ADD）都基于构建上下文。
  1. 镜像构建
    • Docker 会逐行执行 Dockerfile 中的指令，生成镜像的每一层。
    • 构建完成后，会生成一个名为 my-java-app 的镜像。
  1. 缓存机制
    • Docker 会缓存每一层的构建结果。如果 Dockerfile 或构建上下文没有变化，后续构建会直接使用缓存，加快构建速度。
    • 如果需要强制重新构建，可以使用 --no-cache 参数：
docker build -t my-java-app . --no-cache
常用参数
  1. -f：指定 Dockerfile 路径
    • 如果 Dockerfile 文件不在当前目录，或者文件名不是 Dockerfile，可以使用 -f 参数：
docker build -t my-java-app -f /path/to/Dockerfile .
  1. --no-cache：禁用缓存
    • 强制重新构建镜像，不使用缓存：
docker build -t my-java-app . --no-cache
  1. --build-arg：传递构建参数
    • 如果 Dockerfile 中使用了 ARG 指令，可以通过 --build-arg 传递参数：
docker build -t my-java-app --build-arg VERSION=1.0 .
  1. --target：多阶段构建
    • 如果 Dockerfile 使用了多阶段构建，可以通过 --target 指定构建阶段：
docker build -t my-java-app --target build-stage .
总结
  • docker build -t my-java-app . 是一个常用的 Docker 镜像构建命令。
  • -t 用于指定镜像名称，. 表示当前目录是构建上下文。
  • Docker 会根据 Dockerfile 中的指令逐层构建镜像，并最终生成一个可用的镜像。
  • 通过附加参数（如 -f、--no-cache、--build-arg 等），可以更灵活地控制构建过程。
差点会Java
关注
快速创建 vue 项目并添加 Dockerfile 文件
甘蓝的专栏
07-19 845
快速创建Vue项目的两种方式及对应的Dockerfile文件。
VUE 项目用 Docker+Nginx进行打包部署
CC酱写前端的博客
06-18 3319
这个文件将被 Nginx 加载以配置网站的行为，例如设置代理、重定向等。这意味着当你访问 Nginx 服务器时，这些静态文件将被提供给客户端。命令重新启动它，这次使用正确的端口映射。端口，你需要确保 Docker 容器的端口映射也相应地设置为。：指定基础镜像，这里使用的是 Nginx 的官方镜像，标签为。目录中的所有文件复制到 Nginx 的默认网页根目录。： 首先，你需要找到容器的 ID 或名称。命令加上容器的 ID 或名称来停止容器。这将覆盖默认的 Nginx 配置。命令列出所有正在运行的容器。
Docker打包vue项目镜像（生产环境）
qq_37312180的博客
10-14 1428
通过xsell连接centos服务器，进入刚上传的文件夹，执行打包docker镜像的命令构建镜像。把vue项目打包后的dist文件夹拷贝到该文件夹目录下。在该文件夹目录下，在建一个Dockerfile文件。使用xftp把改文件夹上传至centos服务器。浏览器访问测试：http://IP:8089。生成(启动)一个容器。
docker创建vue镜像
zwm_yy的博客
11-25 462
复制 package.json 和 package-lock.json (如果有)# 从 Vue 应用镜像中复制构建好的文件到 Nginx 服务器的 html 目录中。1.确保你已经安装了 Node.js 和 Vue CLI。# 使用 Nginx 镜像作为基础来提供 web 服务器。2.创建一个 Vue.js 项目（如果你还没有一个）# 启动 Nginx，并且 Nginx 将持续运行。7.运行vue.js应用的docker容器。# 复制项目文件和目录到工作目录。# 构建 Vue 应用。
Docker镜像打包实践
最新发布
weixin_64855537的博客
06-12 1828
如果你有前端路由（history模式），建议自定义 nginx.conf，防止刷新404。简单例子：server {然后在 Dockerfile 里加一行：打包静态资源：npm run build用 nginx 镜像做 Dockerfile本地 build、save，目标服务器 load、run最后打包的docker中不需要npm 和 node.js环境。
【Docker】Vue项目基于Nginx打包成镜像并生成容器
喜欢分享些自己折腾的技术笔记
08-30 4762
确保docker环境正常运行，不论是远程的还是本地的 确保vue项目能正常运行 将vue项目编译 编写Dockerfile文件 使用docker build命令生成镜像 使用docker run命令生成容器
vue项目打包到服务器，构建docker镜像
hey_lie的博客
07-25 2548
左上方为本地目录，进入dist，左下方显示dist中内容，右击static和index.html，进行上传。#将dist文件中的内容复制到/usr/share/nginx/html/这个目录下面。使用文件传输工具filezilla进行文件上传(注意是将dist整个目录进行上传)右上方为服务器目录，进入刚才创建的目录(mall_vue)，双击打开。最后一个mall_vue为镜像名称，也可以使用镜像ID。查看镜像，发现已经创建好mall_vue镜像。其中mall_vue为自定义镜像名，注意。...
在Docker中使用Nginx部署Vue项目
什么都干的派森
04-18 6140
文章目录一、前置需求1.liunx环境2.安装Docker二、部署方法1.打包Vue项目2.Docker拉取Nginx镜像3.创建一个打包镜像的目录4.上传Vue项目5.编写Nginx配置文件6.编写Dockerfile7.创建镜像8.启动容器三、访问测试 一、前置需求 1.liunx环境 本人用的 Centos7 2.安装Docker 参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/124237932 二、部署方法 1.打包Vu
前端Vue项目整合nginx部署到docker容器
梦想的追求
11-27 1230
vue 部署到ngxin容器实践
【Nginx 】Nginx 部署前端 vue 项目
热门推荐
衍生星球的博客
09-06 1万+
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。
docker构建vue项目镜像并发布到dockerhub中使用
12-09 982
先将本地vue项目打包为一个镜像，不会的可以看文章：使用docker构建vue项目并成功运行在本地和线上_1024小神的博客-CSDN博客然后开始注册一个dockerhub账号并登陆：然后点击 create repositoryDocker Hub 开始填写仓库名称和描述：（此仓库类似代码仓库，可以存储多个不同版本的镜像，就像代码迭代一样，每打一个tag，就相当于一个版本，都会在这个仓库里面进行管理） 然后回到本地，查看一下本地镜像：也可以先将容器变为镜像，或者直接tag一个已存在的镜像： 为镜像打一个
docker+vue云服务器打包镜像相关操作
黄钢的博客
05-30 1950
容器化部署似乎成了当前一个非常主流的趋势，无论是前端还是后端，流行的操作就是给你一个镜像地址，让你自己去拉取镜像并运行镜像。这似乎是运维的工作，但是在没有专有运维的情况下，不得不自己先了解一下。docker相对来说还是比较麻烦的，需要对服务器有一定的了解，还要对Linux命令比较熟练，然而我对这两个都不熟悉，摸索了一段时间，记录一下自己打包docker镜像的完整过程。
[Docker]制作一个可以运行Vue的镜像
IcyLeaves的博客们
04-14 659
Vue构建过程是使用npm将Vue项目打包成静态html，并放到同目录的/dist文件夹下。因此在Docker容器中，我们需要nodejs环境并下载项目所需的依赖 优化：使用了cnpm作为国内镜像源。npm run [scripts]详见package.json中的scripts，这里的打包命令实际上是运行了vue-cli-service build。 我们选择使用Nginx来展示静态页面，因此我们将打包后的文件放到Nginx的基础镜像中。这里额外将nginx的配置文件也从Vue项目里复制出来（..
[手把手系列之]Docker 部署 vue 项目
weixin_42907150的博客
02-27 9978
Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。
前端vue项目服务器部署(docker)
m0_46122129的博客
09-07 2060
将你的nginx-alpine.tar包上传到服务器上。假设路径为 。 2、导入 Nginx Docker 镜像 使用以下命令将 文件加载为 Docker 镜像： 执行后会显示类似如下的输出，表示镜像已成功加载： 3、验证镜像是否加载 确认镜像已经导入成功： 应该可以看到 镜像在列表中。在你的服务器上确保 目录下包含以下内容：- ：Vue 项目构建后的静态文件。- ：自定义的 Nginx 配置文件。- 。确保 目录中有你的 Vue 项目的打包内容。在 下编写或确保已经有如下内容的 ： 3、编写ng
Docker打包VUE项目镜像运行
程序员劝退师的博客
09-30 9015
前言 今天是国庆中秋双节前一天，我在上海，在的知几个朋友都回老家过节了，打开携程看了看机票价格，清醒的认识到还没赚够买机票的钱！望着故乡的方向，不禁感叹！ 环境准备 1.docker环境一个 2.vue项目一个 接下来主要是前端编译后的代码打包通过Dockerfile打包Docker镜像！ VUE项目 1.打包目录设置 这里如果没有特殊要求那么建议使用默认的打包目录，如果有特殊目录设置需求的话那么需要在线面Dockerfile中配置 特殊目录设置 在项目根目录先创建vue.config.js文件 modul
VUE在Docker镜像中部署到根目录
weixin_45357522的博客
06-06 176
我们项目都是使用vue开发，部署到k8s，制作docker镜像时发现，想把VUE部署到镜像根目录。上面是网关的根路，下面是页面根。
docker 构建jar包/vue镜像以及发布
yxt625520的博客
10-19 586
docker 构建jar包/vue镜像以及发布
vue 项目创建docker镜像和启动
chuancheng3824的博客
08-21 923
Linux 命令： cd /opt/code npm install -g @vue/cli vue create vue-first cd vue-first npm run build 新建Dockerfile文件，内容如下： FROM nginx COPY dist /usr/shar...
使用docker部署nginx部署vue项目
05-08
<think>好的，我现在需要回答用户关于如何使用Docker部署包含Vue项目的Nginx容器的问题。首先，我得整理一下用户提供的引用内容，看看有哪些步骤和配置可以参考。用户引用了多个不同的Docker部署方法，每个引用中的命令略有不同，比如挂载目录、端口映射等。我需要将这些信息综合起来，形成一个清晰的教程。 首先，用户的需求很明确：使用Docker部署Nginx运行Vue项目。所以步骤应该包括Vue项目的构建、Dockerfile的编写、Nginx配置文件的准备，以及运行容器。用户提供的引用中有几个关键点： 1. 构建Vue项目成dist文件夹，这是部署的前提。 2. 创建Dockerfile，使用nginx镜像，复制dist文件和配置文件。 3. 配置Nginx，可能需要修改默认配置，比如处理路由问题。 4. 使用docker build构建镜像，然后运行容器，注意端口映射和卷挂载。 接下来，我需要确保每个步骤都正确，并且符合最佳实践。例如，在Dockerfile中删除默认配置，替换为自己的配置，这样可以避免冲突。同时，挂载配置文件或目录时，用户可能有不同的路径，需要说明清楚如何调整路径。 另外，用户提供的引用中有不同的挂载方式，有的是在构建时复制文件，有的是在运行时挂载卷。这里需要区分两者的使用场景。构建时复制适合将静态文件打包进镜像，而运行时挂载适合动态修改配置或内容。根据用户的问题，可能更推荐构建时将dist文件打包到镜像中，这样镜像更自包含，而Nginx配置可以通过挂载或在构建时添加。 还需要考虑Nginx的配置是否正确，特别是处理Vue的路由模式（history模式）可能需要额外的配置，避免出现404错误。引用中的例子可能没有详细说明这点，可能需要补充。 然后，生成相关问题部分，需要根据教程内容提出几个相关问题，比如优化镜像大小、处理路由问题、多环境配置等。 最后，确保整个回答结构清晰，步骤明确，代码块正确，符合用户的中文要求，并且正确引用提供的参考资料。需要注意用户提到的引用并不是直接相关，但需要参考他们的命令结构，比如如何编写Dockerfile和docker run命令。</think>### 使用Docker部署Nginx运行Vue项目分步教程 #### 一、准备工作 1. **构建Vue项目** 在项目根目录执行以下命令生成静态文件： ```bash npm run build ``` 生成`dist`文件夹（包含编译后的HTML/CSS/JS文件）[^1]。 2. **创建Nginx配置文件** 新建`default.conf`文件，配置内容如下（重点处理Vue路由模式）： ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # 解决history模式路由问题 } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } ``` --- #### 二、编写Docker镜像构建文件 创建`Dockerfile`（无文件扩展名），内容如下： ```dockerfile # 使用官方nginx镜像 FROM nginx:alpine # 删除默认配置 RUN rm /etc/nginx/conf.d/default.conf # 复制自定义配置 COPY default.conf /etc/nginx/conf.d/ # 将Vue编译文件添加到镜像 COPY dist/ /usr/share/nginx/html/ # 暴露80端口 EXPOSE 80 ``` *说明：使用`nginx:alpine`镜像可减小体积[^1][^5]。* --- #### 三、构建与运行容器 1. **构建镜像** 在`Dockerfile`同级目录执行： ```bash docker build -t vue-nginx . ``` 2. **运行容器** ```bash docker run -d --name vue-app -p 8080:80 vue-nginx ``` *参数说明：* - `-d`：后台运行 - `-p 8080:80`：将宿主机8080端口映射到容器80端口 - `--name`：指定容器名称[^1][^4] --- #### 四、验证部署 访问`http://宿主机IP:8080`，若显示Vue应用即成功。通过以下命令查看日志： ```bash docker logs vue-app ``` --- #### 五、高级配置（可选） 1. **挂载本地目录** 修改运行命令实现配置热更新： ```bash docker run -d \ -p 8080:80 \ -v $(pwd)/dist:/usr/share/nginx/html \ -v $(pwd)/default.conf:/etc/nginx/conf.d/default.conf \ --name vue-app \ nginx:alpine ``` *说明：适合开发环境调试[^2][^4]。* 2. **多阶段构建优化** 在`Dockerfile`中集成构建过程： ```dockerfile # 构建阶段 FROM node:16 as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 生产阶段 FROM nginx:alpine COPY --from=build-stage /app/dist /usr/share/nginx/html COPY default.conf /etc/nginx/conf.d/ ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值