一、 构建工具与 dist 目录：从源码到产物
作为前端，你平时运行 npm run dev 是启动了一个 Node.js 开发服务器。但在生产环境，我们不需要 Node.js，只需要它生成的“结果”。
1. npm run build 到底做了什么？
当你运行这个命令时，Webpack/Vite/Rollup 等工具会执行以下操作：
- 转译 (Transpilation) ：把 ES6+ 语法转成浏览器能懂的 ES5，把 TypeScript 转成 JS。
- 编译 (Compilation) ：把 .vue 或 .jsx 文件转换成标准的 HTML/JS/CSS。
- 打包 (Bundling) ：把散落在几百个模块里的代码合并成少数几个 chunk.js 文件，减少网络请求。
- 压缩 (Minification) ：去掉空格、注释，混淆变量名，减小文件体积。
2. dist 目录是什么？
构建完成后生成的 dist（或 build）目录，里面包含的就是纯静态资源：
- 一个 index.html。
- 一堆 .js 和 .css 文件。
- 图片、字体等资源。
核心要点： 只要你有一个能读文件的服务器（比如 Nginx），把 dist 里的文件丢进去，网页就能跑起来。它完全脱离了 Node.js 环境。
二、 Nginx 基础：前端的“守门员”
Nginx 是目前最流行的 Web 服务器。在 Docker 部署中，它的角色就是接收用户的请求，并决定返回什么给用户。
1. 静态资源服务 (Static Server)
这是 Nginx 最基本的用法。
- 原理：你告诉 Nginx，“如果有人访问我的 IP，你就去 /usr/share/nginx/html 这个文件夹里找 index.html 发给他”。
- Docker 关联：在 Docker 部署时，我们会把本地的 dist 文件夹内容，拷贝到容器内部的 Nginx 指定目录下。
2. 反向代理 (Reverse Proxy) —— 解决跨域神器
前端经常遇到请求接口报错（CORS）。
- 原理：用户访问 me.com/api, Nginx 拦截这个请求，偷偷在后台转发给 http://backend-server:3000, 拿到数据后再给用户。
- 好处：浏览器认为你请求的是同一个域名，所以没有跨域问题；同时也隐藏了后端真实的 IP 和端口。
3. nginx.conf 核心配置长什么样？
初学者只需要看懂下面这段代码的核心部分：
server {
listen 80; # 监听 80 端口
server_name localhost; # 域名
# 1. 静态资源配置
location / {
root /usr/share/nginx/html; # 静态文件存放在哪
index index.html index.htm;
# 重点：单页面应用(SPA)必须加这一行，否则刷新页面会 404
try_files $uri $uri/ /index.html;
}
# 2. 反向代理配置 (解决 API 跨域)
location /api/ {
proxy_pass http://122.51.x.x:8080/; # 转发到后端真实地址
}
}
三、 掌握到什么程度就可以上手 Docker 了？
你不需要成为 Nginx 专家或配置高手，只要达到以下 “四个能” ，就可以开始写 Dockerfile 了：
-
能区分“开发环境”和“生产产物” ：明白 Docker 容器里跑的是 dist 里的静态文件，而不是 src 里的源码。
-
能写出一个基础的 Nginx 配置：
- 知道 root 是指向静态文件的路径。
- 知道 try_files 是为了支持 Vue/React 的路由跳转。
- 知道 proxy_pass 是用来转发接口请求的。
-
能理解“端口映射”的概念：明白“容器里的 80 端口”需要映射到“服务器的 80 端口”才能被外界访问。
-
能接受“容器是一个迷你的 Linux” ：理解你只是把 Nginx 软件、你的 dist 文件、你的 nginx.conf 配置，这三样东西打包进了一个 Linux 盒子。
