摘要本文以阿里云 ECS 服务器为例完整演示了前后端分离项目从零部署上线的全过程。内容涵盖宝塔面板的安装与运行环境配置、RDS 云数据库的创建与白名单设置、后端 Java 项目的打包、前端 Vue 项目的构建以及前后端文件上传到宝塔、Java 后端启动、前端网站创建、Nginx 反向代理配置和安全组端口放行等关键步骤并针对部署过程中常见的 502 错误给出了排查思路。背景1我已经提前购买了一年99元的最低配置2G2核的阿里云云服务器如果你只是学习足够了但是如果是多人同时使用并上线建议你买好一点的如果你是新用户可以去免费使用1个月2我把数据都存放在了云数据库RDS中但这也是需要花钱购买的如果你是新用户同样可以去免费使用1个月但是这个云数据库比较贵且如果你服务器用的阿里云那你云数据库也必须使用阿里云的我建议如果你想用云数据库那你可以服务器和数据库都买阿里云的因为他的数据库便宜一点。如果你不想花云数据库的钱那你可以把数据也部署到宝塔上但是你需要服务器买的内存稍微大一点3此外我购买了域名不了解的可以了解一下需要进行备案后续我会更新怎么把服务器的项目转到自己的域名上演示项目为前后端分离项目后端在idea中操作、前端在VS code中操作1. 部署宝塔1.1 进入阿里云网址后在自己购买的服务器上找到这个界面https://oss.console.aliyun.com/overview阿里云登录 - 欢迎登录阿里云安全稳定的云计算服务平台1. 2 点击立即登录如果你从来没登录过进入到这个界面点击登录后1.3 把命令粘贴到 Workbench 终端回车执行出现确认提示时输入y回车等待 2-5 分钟即可安装完成。if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec注意保存好自己的账号和密码后续实在找不到的可以重新把命令粘贴到 Workbench 终端回车执行注意端口号每个人不一样我的是 13356 端口把它复制一下1.4. 点击云服务器管理控制平台点击网络与安全组 - 添加入方向规则再去和端口对齐书写配置完成后在浏览器网址中输入你的外网 IPv4 面板地址在之前的面板账户信息里有输入账号密码点击登录登录成我这个界面就是登录成功1. 5 宝塔面板安装运行环境回到宝塔面板只装 3 个东西MySQL 我没有装数据库已经用 RDS 了。如果你用的宝塔内数据库那你就去下载。推荐你项目中用的版本和宝塔中版本最好一样例如电脑的数据库是 8.0 版本的那么最好宝塔也下 8.0 版本的左侧点软件商店搜索安装Nginx选稳定版比如 1.22/1.24/1.30用来跑前端页面、做接口反向代理JDK选择Java环境管理器1.2就可以后续在配置时候注意项目用哪个JDK宝塔就选择哪个Java 项目管理器免费插件可视化管理 Java jar 包不用敲命令行安装需要几分钟等全部显示「已安装」再往下走。2. 数据库的部署对于数据库有两种方案第一种是在宝塔里直接下载 MySQL另一种是使用 RDS 云数据库且如果服务器是阿里云的那么云数据库最好也使用阿里云的这里我使用 RDS 云数据库进行演示后续也会更新在宝塔里直接下载 MySQL后的安装教程2.1 创建云数据库实例如果自己有就跳过注意如果你的云服务器地址在北京那么云数据库也必须在北京同理同时都在杭州或者其他地方也可以2. 2 创建完实例之后必做 5 步操作和你之前连本地数据库、宝塔数据库完全一样只是地址变了2.2.1 设置白名单在当前 RDS 详情页 → 左侧点白名单与安全组→ 找到default分组点「修改」必须添加两个 IP1你的 ECS 内网 IP去 ECS 实例详情页能看到比如你之前的172.22.166.21这是给服务器上的 Java 项目访问用的2你本地电脑的公网 IP百度搜「我的 IP」就能看到这是给你自己用 Navicat 连数据库导数据用的2.2.2 创建数据库高权限账号新建各个业务库左侧点账号管理→ 创建账号账号名、密码自己设置一定要记下来后面项目配置要用2.2.3 创建业务数据库左侧点数据库管理→ 创建数据库每个项目建一个独立的库库名和你本地项目里的库名完全一致字符集统一选utf8mb42.2.4 本地 Navicat 连接 RDS导入数据1在 RDS 基本信息页左侧导航栏找到数据库连接点击进去页面里能看到内网地址已经自动生成Java 后端用这个点击按钮开通外网地址确认弹窗等待 1‑3 分钟生成外网域名2打开 Navicat新建 MySQL 连接主机填 RDS 外网地址端口3306用户名 / 密码填你刚才创建的高权限账号3连接成功后右键对应数据库 → 运行 SQL 文件把你本地的数据库备份导入进去3. 后端 Java 打包先改配置再打包3.1 配置后端打开 IDEA找到每个项目的application.yml/application.properties修改数据库连接配置这是最核心的改动spring: datasource: # 原来本地/虚拟机的写法127.0.0.1:3306 # 现在改成RDS的【内网地址】不要写外网地址 url: jdbc:mysql://rm-xxx.mysql.rds.aliyuncs.com:3306/你的库名?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: 你的RDS高权限账号名 password: 你的RDS账号密码RDS 内网地址在 RDS 基本信息页就能看到同地域 ECS 走内网速度快、不耗流量、更安全右侧 Maven 面板 → 点击package执行打包打包完成后去项目的target文件夹里找 jar 包正确的包项目名-版本号.jar通常是 target 里最大的那个文件不要用xxx.jar.original、源码包、class 文件夹target 里十几个文件是编译产物、依赖包、文档等你只需要这一个可执行 jar 包3.2 打包后端进入后端目录cd D:\Code2\zznursing_1 mvn clean package -DskipTests项目已经在application.yml中默认使用devspring: profiles: active: dev打包成功后上传D:\Code2\zznursing_1\zzyl-admin\target\zzyl-admin.jar不要上传*.jar.original zzyl-common-*.jar zzyl-framework-*.jar4. Redis 的部署项目中没有可省略此步骤查 Redisspring: redis: host: 192.168.100.168 port: 6379 password: xxxx服务器上如果没有 Redis这个地址不能继续使用。你需要在 ECS 安装 Redis并把host改成127.0.0.1或使用云 Redis改成云 Redis 地址Redis 密码必须与实际密码一致5. 前端打包大体操作思路后面有我的具体操作打开 VS Code 前端项目如果你都在idea中操作的那就在idea中操作先改接口请求地址baseURL推荐方案改成相对路径后续用 Nginx 反向代理转发不用写死 IP跨域也一起解决不推荐直接写服务器公网 IP 后端端口会有跨域问题终端执行打包命令Vue/React 通用npm run build4. 打包完成后项目根目录会生成一个dist文件夹这就是前端全部静态文件5.1 前端配置文件D:\Code2\zznursing-vue3_1\.env.production当前接口配置VITE_APP_BASE_API /dev-api另外项目使用 WebSocket建议补充VITE_APP_SOCKET_URL ws://你的ECS公网IP:88如果以后绑定域名再改成VITE_APP_SOCKET_URL ws://你的域名:885.2 打包前端cd D:\中州养老\Code2\zznursing-vue3_1 npm run build:prod成功后上传dist文件夹中的全部内容不要把dist文件夹再套一层。6. 上传前后端到宝塔上6.1. 上传前端文件打开D:\中州养老\Code2\zznursing-vue3_1\dist把dist里面的全部内容上传到宝塔网站根目录例如/www/wwwroot/zzyl-ui注意上传的是dist里面的文件不要变成/www/wwwroot/zzyl-ui/dist/index.html正确应该是/www/wwwroot/zzyl-ui/index.html6.2 后端上传到宝塔Java 项目管理器中填写Jarzzyl-admin.jar JDKJDK 11 端口8080 启动参数--spring.profiles.activedev启动后日志看到Started ... in ... seconds才表示后端启动成功。6.3 重新打包后的最终文件后端上传D:\中州养老\Code2\zznursing_1\zzyl-admin\target\zzyl-admin.jar前端上传D:\中州养老\Code2\zznursing-vue3_1\dist7. 在宝塔上进行前后端部署到服务器上7.1 上传前端文件你当前路径是/www/wwwroot双击打开文件夹zzyl点击上方上传/下载 → 上传文件选择本地前端D:\中州养老\Code2\zznursing-vue3_1\dist建议先把dist压缩成dist.zip再上传。上传后右键dist.zip选择解压最终确认存在/www/wwwroot/zzyl/dist/index.html如果看到的是/www/wwwroot/zzyl/dist/dist/index.html说明多套了一层需要把里面文件移动出来。7.2 上传后端 Jar返回/www/wwwroot点击上方新建 → 文件夹新建zzyl-java进入/www/wwwroot/zzyl-java上传后端文件D:\中州养老\Code2\zznursing_1\zzyl-admin\target\zzyl-admin.jar最终路径应该是/www/wwwroot/zzyl-java/zzyl-admin.jar7.3 创建上传目录进入/www/wwwroot/zzyl点击新建 → 文件夹创建uploadPath最终路径/www/wwwroot/zzyl/uploadPath这要和后端配置中的ruoyi: profile: /www/wwwroot/zzyl/uploadPath保持一致。7.4 启动 Java 后端点击左侧软件商店确认已经安装Java 项目管理器宝塔官方 Java 部署入口一般是“网站 → Java项目”然后点击“添加项目”。(docs.bt.cn)填写项目名称zzyl-backend Jar 文件/www/wwwroot/zzyl-java/zzyl-admin.jar JDKJDK 11 端口8080 启动参数--spring.profiles.activedev点击提交并启动。日志中看到Started ...表示后端启动成功。如果日志出现 Redis 连接失败检查spring: redis: host: 127.0.0.1 port: 6379 password: 你的Redis密码7.5 创建前端网站点击左侧网站如果已经有名为zzyl的网站直接点它右侧的设置如果没有点击右上角添加站点。宝塔官方流程也是先进入“网站”再添加站点并指定网站根目录。(docs.bt.cn)填写域名123.57.244.144:88 根目录/www/wwwroot/zzyl/dist PHP版本纯静态不要创建本地 MySQL 数据库。7.6 修改 Nginx 配置进入网站设置 →配置文件确保包含下面内容server { listen 88; server_name 123.57.244.144; root /www/wwwroot/zzyl/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location /dev-api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /ws/ { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; } }你的前端使用的是/dev-api所以这里必须写location /dev-api/不能写成/api/。保存后点击重载 Nginx。7.7 放行安全组阿里云 ECS 安全组只新增端口88 来源0.0.0.0/0不要开放8080 6379 3306RDS 白名单添加的是 ECS内网 IP172.22.166.21不是123.57.244.144。7.8. 防火墙端口设置浏览器里的502不是前端、Nginx 或 Java 后端造成的而是公网到 ECS 的88端口还没有正常放行或被本机防火墙拦住。现在去阿里云控制台操作进入ECS 控制台→实例→ 点击你的实例。打开安全组页签。点击安全组名称或「配置规则 / 管理规则」。选择入方向→添加规则。按下面填写