简易网站的优化记录

刚接触全栈，一些逻辑表达是有问题的，我只学了个皮毛，还请多多指教（狗头保命）

前言

在学习 FullStack Open 的时候，学到了 docker，里面也配置了 nginx 的反向代理。

我打算把我的一个小网站也容器化，我最开始需要在云机上装 node，还要装本地 mongodb （mongo 还不支持 Ubuntu 24 调了半天才看到），并且部署步骤很繁杂，由于是使用前端构建后端调用静态文件，前端的 api 路由在本地和云端是两个地址（一个 localhost 调试，一个用云路由），并且云端那边 Vite 好像还装挂了，那我的部署流程就需要：

• 本地把前端的 env 的和后端的交互路由改了。
• 本地构建静态文件。
• 把静态文件传给云端。
• 在云端运行。

搞这坨东西真是心累。那就打包，这样我只需要一台有 docker 的服务器就可以了，方便太多，但中途还遇到一些问题，写在这记录一下。

github

部署页面

开发到生产

前端的开发模式会留下路由访问，此时 nginx 就能直接代理到前端服务器。

vite 默认只有少量的常见路由可以访问，使用网络时监听如 client-server:xxxx 的路由是不允许访问的，要在 config 中添加。

在生产环境中前端是静态文件，需要将静态文件传到 nginx 中直接访问静态文件。

我最开始的想法是将静态文件映射到本地卷中，但不太可行，因为 docker 卷的映射在构建过程中不会生效，只有在运行时会正确映射卷，而前端做完构建流程就能退出了，此时静态文件就无法映射到本地。

或者提前构建出镜像，无命令运行一遍也能把静态文件传回来。

我的方法是在 nginx 启动时构建前端文件，将文件 copy 到 nginx 中。

nginx 路由

localhost 是回环路由，只有在镜像内才能访问到，别的镜像无法访问到，但可以使用 compose 的网络功能，使用镜像名访问其路由。

最后

docker 的其中一个劣势是需要占用一定的系统资源，在 2 核 2GiB 的云服务器上已经不堪重负了，所以最终没有成功部署上去（哭）。

这是我做的第一个网站，问题不能说一点没有，只能说非常之多：兼容性是不会考虑的，所有组件直接固定数值宽度；代码是不会看第二次的，虽然尽可能的做了分组，最后还是写成了史山，典型的竞赛生思维 ......