【源码】基于 Docker 和 Nginx 的 Web 服务测试项目

项目简介

本项目聚焦于 Nginx、Docker 的学习与验证，旨在解决过往 Web 加载时出现的“Loading chunk {n} failed”错误以及浏览器缓存问题。借助 Docker 和 Docker Compose 进行服务部署与容器管理，利用 Nginx 实现静态目录托管与响应头设置，同时具备 404 错误处理机制。

项目的主要特性和功能

1. 容器管理：借助 Docker Compose 轻松管理容器，涵盖镜像构建、服务启停，支持源码更新后容器自动更新。
2. Nginx 配置：对 Nginx 进行细致配置，处理静态文件、设置响应头，保证 index.html 文件始终采用协商缓存，避免强缓存问题。
3. 404 错误处理：实现 404 错误处理机制，当 JS 或 CSS 文件加载失败时，通过路由拦截或静态资源错误监听触发页面重载。
4. 脚本注入：运用 PostHTML 插件，在前端静态资源构建完成后，自动将 404 处理脚本插入到 index.html 中。

安装使用步骤

假设用户已下载本项目的源码文件，操作步骤如下： 1. 确保已安装 Docker 和 Docker Compose，若未安装，可参考 安装 Docker。 2. 在源码目录下执行以下命令： - 执行 yarn 初始化项目，安装依赖。 - 全局安装 zx 和 terser：yarn global add zx 和 yarn global add terser。 3. 本地开发： - 执行 yarn start 启动本地开发环境。 - 访问 http://localhost:8000 查看项目。 - 访问 http://localhost:8000/#/~docs 查看本地文档。 4. 发布项目： - 执行 yarn build 构建前端代码，并使用 Docker 启动服务。 - 访问 http://localhost:9999 查看发布后的项目。 - 若仅更改了 Nginx 配置，可执行 yarn deploy 重新部署，无需重新构建 dist 源码。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】