起步

为了简单期间，系列文章以开发、构建和部署 VitePress 静态站点为例，后期根据差异性补充 SpringBoot 服务端项目。

阶段一：服务能 Run

新手开发起步，能让服务跑起来，是一个重要的里程碑。

1. 在个人电脑上使用 IDE 如 VsCode、WebStorm 开发、调试。
2. 本地开发环境，查看开发效果 npm run dev
3. 把项目源代码使用 scp 工具远程复制到云服务器上（具备公网 IP）
4. 安装依赖 npm install
5. 以后台方式运行 nohup npm run dev &

此方法使用 nodejs 作为服务器，支持热启动，一般用于开发环境，直接作为生产环境的 Web 服务器效率较低。

阶段二：Nginx 静态资源代理

Web 静态资源项目使用 Nginx 部署是最佳实践。

1. 在个人电脑上使用 IDE 如 VsCode、WebStorm 开发、调试。
2. 本地开发环境，查看开发效果 npm run dev
3. 项目构建 npm run build，生成分发包 dist
4. 把 dist 包使用 scp 工具 复制到云服务器上（具备公网 IP）
5. 使用 Nginx 对 dist 包做静态资源代理，并启动 Nginx 服务

阶段三：版本管理与代码托管

为了方便代码版本管理、多人协作、代码共享等，引入了 git 工具和托管平台 GitHub 或 Gitee。

1. 在个人电脑上使用 IDE 如 VsCode、WebStorm 开发、调试。
2. 本地开发环境，查看开发效果 npm run dev
3. 在 git 仓库中提交变更，并推送到 GitHub
4. 登录云服务器，使用 git clone 克隆仓库、使用 git pull 获取最新提交。
5. 安装依赖 npm install
6. 项目构建 npm run build，生成分发包 dist
7. 使用 Nginx 对 dist 包做静态资源代理，并启动 Nginx 服务

总结

作为一名起步的开发者，阶段三实现了最小可行、且完全手动的交付闭环，绝大多数中小团队止步于此。

下一篇文章，引入 Docker（Podman） 实现服务容器化，一次构建，到处运行，有效解决服务可移植性问题。

参考

1. Docker 官方文档，https://docs.docker.com/
2. Podman 官方文档，https://podman.io/docs/
3. Nginx 静态资源服务器，https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/
4. 静态资源服务器，https://tsejx.github.io/devops-guidebook/server/nginx/static-resource-server/
5. git 版本控制，https://git-scm.com/
6. GitHub 代码托管，https://github.com/
7. Gitee 国产化 git 代码托管仓库，免科学上网，https://gitee.com/