企业官网建设流程全解析

一个完整的 Web 项目通常包含前端页面、Java 后端、Python 模型服务和数据库。本地开发时，这些程序可以分别启动，但要让互联网用户通过同一个网址访问，就需要将它们部署到服务器，并配置运行环境和网络入口。

本文以 Vue 3、Spring Boot、Flask、MySQL 和 Redis 组成的通用项目为例，介绍从 Windows 本地构建到阿里云 ECS 公网发布的完整过程。文中的项目名称、路径和端口均为示例。

一、部署前需要准备哪些组件？

首先需要明确各组件的运行方式。Vue 前端通过构建生成 HTML、CSS 和 JavaScript 文件，由 Nginx 提供给浏览器；Spring Boot 编译为 JAR，由 Java 运行；Flask 保留 Python 源码，在服务器安装依赖后启动；MySQL 保存业务数据，Redis 提供缓存支持。

Nginx 负责统一接收公网请求。例如，用户访问/app/时返回前端页面，访问/app/api/时将请求转发给 Spring Boot。Java 根据业务需要查询数据库或调用 Python 模型服务。

假设项目正式运行时，Java 监听8080，Python 监听8000。两个端口只供服务器内部通信，公网用户统一访问 Nginx 的 80 或 443 端口。

二、本地构建前端、后端与 Python 服务

2.1 Vue 前端构建

在 Windows PowerShell 中进入前端目录，执行：

cd frontend $env:VUE_APP_PUBLIC_PATH="/app/" $env:VUE_APP_API_BASE="/app" npm ci npm run build

npm ci根据锁定文件安装依赖，npm run build将 Vue 源码编译到dist/目录。

这里设置/app/，是因为网站计划部署在该子路径下，到时候就是公网地址/app/类似的形式。Vue CLI 项目还需在vue.config.js中正确读取VUE_APP_PUBLIC_PATH，接口请求代码也应使用对应的 API 基础路径，否则可能出现页面空白或接口地址错误。

2.2 Spring Boot 后端构建

进入 Java 项目目录，执行：

cd ..\backend .\mvnw.cmd clean package

Maven 会编译 Java 代码、执行已配置的测试，并在target/中生成 JAR。服务器只需安装兼容的 Java 运行时，就能使用java -jar启动程序。

部署前需要核查pom.xml中的 Java 编译版本，确保服务器 JVM 能够执行生成的字节码。

2.3 Python 服务与数据库文件

Python 服务通常需要准备app.py、业务模块、requirements-production.txt，以及运行所需的模型文件或检索索引。

其中，依赖清单记录 Python 库及其版本，模型文件保存已经训练完成的结果。部署时需要在 Linux 环境中安装依赖，并验证模型能够正常加载。MySQL 则准备建表 SQL、初始化数据和必要的迁移脚本。数据库通常通过 SQL 导入或迁移工具初始化，无须直接复制本地 MySQL 的数据目录。

最后，将前端dist、Java JAR、Python 服务、SQL 和配置模板整理为版本发布包。可以使用脚本读取release.json生成 ZIP、文件清单和 SHA-256 校验信息。真实密码、虚拟环境和开发缓存应排除在发布包之外。

三、上传 ECS 并创建目录

阿里云 ECS 可以理解为一台远程 Linux 电脑。通过 SCP 上传文件，通过 SSH 登录后执行服务器命令。

假设已经生成example-app-v1.zip，在本地 PowerShell 执行：

scp .\example-app-v1.zip deploy@ECS_HOST:/tmp/ ssh deploy@ECS_HOST

这里的ECS_HOST需要替换为实际服务器地址，deploy为拥有相应权限的示例登录用户。

登录 ECS 后，创建部署目录：

sudo mkdir -p /opt/example-app/releases sudo mkdir -p /opt/example-app/shared sudo mkdir -p /var/www/app

releases保存不同版本的程序，shared保存服务器专用配置，/var/www/app保存需要交给 Nginx 的前端文件。

使用sha256sum检查服务器收到的文件是否与本地一致，然后解压：

sha256sum /tmp/example-app-v1.zip sudo unzip /tmp/example-app-v1.zip \ -d /opt/example-app/releases/

解压后应检查 JAR、Python 源码和前端文件的位置，确保实际目录与启动配置一致。

四、创建数据库并配置服务连接

假设 MySQL 已经安装在 ECS 上，可以使用数据库管理员账号创建业务数据库和应用账号：

CREATE DATABASE app_db CHARACTER SET utf8mb4; CREATE USER 'app_user'@'127.0.0.1' IDENTIFIED BY 'CHANGE_ME'; GRANT SELECT, INSERT, UPDATE, DELETE ON app_db.* TO 'app_user'@'127.0.0.1';

其中，CHANGE_ME是示例占位值，实际部署应使用安全生成的密码。建表和数据迁移由具备相应权限的账号执行，业务账号只授予运行所需权限。

随后在服务器私有环境文件中配置：

SPRING_DATASOURCE_URL=jdbc:mysql://127.0.0.1:3306/app_db SPRING_DATASOURCE_USERNAME=app_user SPRING_DATASOURCE_PASSWORD=CHANGE_ME

这里的127.0.0.1指 ECS 自身，因为 Java 和 MySQL 运行在同一台服务器上。如果使用独立数据库实例，则需要填写相应的数据库地址。

配置文件应限制读取权限，并由后端启动服务加载，避免密码进入公开代码仓库。

五、启动服务并配置 Nginx

首先创建 Python 虚拟环境：

python3.11 -m venv /opt/example-app/shared/venv

使用虚拟环境中的 pip 安装生产依赖。假设 Flask 程序入口为app.py，其中定义了app对象，可以通过 Gunicorn 启动：

gunicorn --bind 127.0.0.1:8000 app:app

Java 则使用以下方式启动：

java -jar app.jar \ --server.address=127.0.0.1 \ --server.port=8080

以上命令需要在相应项目目录和运行环境中执行。正式运行时，通常使用 systemd 管理 Java 与 Python 服务，配置ExecStart、私有环境变量文件和异常重启策略。

接下来将前端dist文件部署到/var/www/app/，在已有 Nginx 站点的server配置中增加：

location ^~ /app/api/ { proxy_pass http://127.0.0.1:8080/api/; } location /app/ { root /var/www; try_files $uri $uri/ /app/index.html; }

这段配置假设 Spring Boot 内部接口以/api/开头。Nginx 会将 API 请求转给 Java，而普通页面请求直接读取静态文件。Python 模型服务可以由 Java 在内部调用，无须直接开放公网入口。

修改完成后执行：

sudo nginx -t sudo systemctl reload nginx

第一条命令检查配置，第二条重新加载 Nginx。阿里云安全组和系统防火墙还需要允许必要的公网访问端口。

六、上线验收与版本更新

完成部署后，可以从浏览器访问/app/。当用户操作页面时，请求由 Nginx 转发给 Java，Java 查询 MySQL、访问 Redis 或调用 Python，最终将 JSON 数据返回前端。

验收时，需要检查首页、深层路由、静态资源、登录、数据库查询、模型接口和服务器日志。健康检查正常后，还应验证真实业务请求。

后续发布建议采用独立版本目录，例如：

/opt/example-app/ ├── releases/ │ ├── v1/ │ └── v2/ ├── current -> releases/v2 └── shared/

每次更新先在临时端口验证新版本，确认正常后再切换current指向。出现故障时，可以恢复上一版本并重启对应服务。前端文件需要保留旧版副本，数据库变更则需要单独的备份和恢复方案。

对于日常维护，前端更新通常只需重新发布dist；Java 更新需要替换 JAR；Python 更新需要检查依赖及模型兼容性；数据库结构变化必须经过备份和迁移验证。

至此，一个由 Vue、Spring Boot、Python 和数据库组成的全栈项目，就可以通过 ECS 提供运行环境，由 Nginx 统一接收公网请求，并通过版本管理支持后续更新。