阿里云轻量级服务器利用宝塔面板部署前后端分离项目

服务器部署简明指南

• 购买阿里云轻量服务器（选择宝塔镜像）
• 记录关键信息（账号密码、配置等）
• 登录宝塔面板，按需安装MySQL/Redis等组件

• 开放安全组端口（阿里云+宝塔）
• 配置数据库连接（本地host改为localhost）
• Maven打包项目，上传jar包至服务器
• 在宝塔"Java项目"中添加并启动服务

• 修改axios配置（生产环境baseURL）
• npm build生成dist静态文件
• 宝塔新建站点：
  • 无代理：添加伪静态路由规则
  • 需代理：配置Nginx反向代理（指定/api等路径）

• 确保所有使用端口已放行
• 代理配置需区分路由请求
• 数据库文件可通过Workbench导出导入

注意:这一连串下来可能涉及多个账号密码或者配置什么的,最好一边搞一边拿记事本把重要信息贴下来 

购买服务器

上阿里云买一个轻量级服务器,选择宝塔镜像

 然后在实例这根据面板一步步操作,登录宝塔面板

宝塔准备

登录宝塔后会让你选择下载哪些应用,可以先不下,也可以选最推荐的先下了,然后再根据自己需要增加或删除,我这个是下了这几个,注意一下软件版本

 数据库:我这里用的是mysql和redis

 至于数据库的sql文件去本地workebench导出就行

 至于redis下了就有,默认没有密码

 后端部署

首先端口设置成你已经开放的,端口安全组开放直接搜很简单的(注意阿里云那里和宝塔都要开放)

然后数据库就设置成刚刚服务器安装的 ,因为数据库和后端运行在同一服务器,所以host改为localhost,不是的话按你数据库在哪配置,这里用户名和密码就是你刚刚设置的

然后利用maven.package 将项目打成jar包,执行后在target目录下会有一个jar,右击在explorer中打开

 然后点击宝塔面板的文件目录创个文件夹取个应景的名字上传你的jar包

然后来到"网站"目录里面,选择java项目.点击添加java项目

 指定刚上传的jar包,填写相关信息,jdk按你项目使用的下载

 点击确定就ok了,然后启动一下如果是未启动的话,接着可以访问后端接口测试一下了

 前端部署

关注你的axios配置,如果你是这样配置,baseURL得改成你后端部署的url

const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL, // 从环境变量读取
timeout: 60000,
});

如果你没有指定baseURL而是通过server转发,因为前端的 devServer.proxy 配置仅在本地开发时生效，当你将前端代码打包并部署到服务器后，这个配置不会生效。这是因为它属于 webpack-dev-server 的配置，仅用于开发环境（npm run dev），而生产环境（打包后的静态文件）不会使用这些代理规则。这种情况标记成需要代理.

server: {
port: 39005,
proxy: {
"/api": {
// target: 'http://localhost:9090',
target: 'http://47.122.88.208:39001',
changeOrigin: true, // 是否修改请求源
ws: false,
secure: false,
// rewrite: (path) => path.replace(/^\\/api/, ''), // 可选: 重写路径
// target: 'http://202.194.14.120:9090,
},

 然后前端执行npm run build 打包成dist文件夹

宝塔新建站点

点击确认后会生成

点击根目录直接去上传前端文件 

确认后点击网站名 

 域名管理按需添加,默认80

不需要代理时在伪静态这里添加如下代码保存:这段伪静态代码的作用是在用户请求的路径不存在对应静态资源时，将请求转发（重定向）到 index.html，并带上原请求路径参数 s=/<路径>，帮助前端单页应用进行路由控制。

location / {
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=/$1 last;
break;
}
}

 需要代理情况下不要配置伪代码,而是点击反向代理

添加后默认任何请求都会转发到后端,但对路由的请求不应该转发到后端,所以要修改配置文件 

点击配置文件,将内容替换为下面 将需要代理的路径替换成你的,ip也替换成你的,不会就问ai

#PROXY-START/
location / {
try_files $uri $uri/ /index.html;
}

# 代理 /api 路径到后端
location ^~ /api {
proxy_pass http://47.122.88.208:39001;
proxy_set_header Host 47.122.88.208;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_http_version 1.1;

add_header X-Cache $upstream_cache_status;

# 静态文件缓存规则
set $static_fileQ5Xpo0Qc 0;
if ($uri ~* "\\.(gif|png|jpg|css|js|woff|woff2)$") {
set $static_fileQ5Xpo0Qc 1;
expires 1m;
}
if ($static_fileQ5Xpo0Qc = 0) {
add_header Cache-Control no-cache;
}
}

# 新增：代理 /auth 路径到后端
location ^~ /auth {
proxy_pass http://47.122.88.208:39001;
proxy_set_header Host 47.122.88.208;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_http_version 1.1;

add_header X-Cache $upstream_cache_status;
add_header Cache-Control no-cache; # 认证接口通常不缓存
}

#PROXY-END/

然后所有部署就结束了,注意把需要用到的端口都放行了