VUE 项目用 Docker+Nginx进行打包部署

原创

已于 2024-06-18 16:19:22 修改 · 3.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #docker #nginx

于 2024-06-18 15:58:16 首次发布

一、Docker

Docker 是一个容器化平台，允许你将应用程序及其依赖项打包在容器中。
使用 Docker，你可以创建一个包含 Vue.js 应用程序的容器镜像，并在任何支持 Docker 的环境中运行该镜像。

二、Nginx

Nginx 是一个高性能的 HTTP 服务器和反向代理服务器，广泛用于提供静态文件和路由请求到后端服务。
在 Vue.js 应用程序的部署中，Nginx 可以用于：
- 作为静态文件服务器，提供构建后的 Vue.js 应用程序文件。
- 作为反向代理，将 API 请求转发到后端服务器。

三、Docker Nginx配置到vue--项目中使用

1. VUE 项目创建文件Dockerfile-private

FROM nginx:1.19.3

COPY dist/ /usr/share/nginx/html

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

COPY ./nginx/private/default.conf /etc/nginx/conf.d/default.conf

FROM nginx:1.19.3：指定基础镜像，这里使用的是 Nginx 的官方镜像，标签为 1.19.3。
COPY dist/ /usr/share/nginx/html：将 Vue 项目构建输出的 dist 目录中的所有文件复制到 Nginx 的默认网页根目录 /usr/share/nginx/html。这意味着当你访问 Nginx 服务器时，这些静态文件将被提供给客户端。
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf：复制自定义的 Nginx 主配置文件 nginx.conf 到容器中的 /etc/nginx/nginx.conf。这将覆盖默认的 Nginx 配置。
COPY ./nginx/private/default.conf /etc/nginx/conf.d/default.conf：复制自定义的 Nginx 配置文件 default.conf 到 Nginx 配置目录 /etc/nginx/conf.d/。这个文件将被 Nginx 加载以配置网站的行为，例如设置代理、重定向等。