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

px不是xp

已于 2025-07-21 13:25:28 修改

阅读量841

点赞数 21

CC 4.0 BY-SA版权

文章标签：阿里云服务器云计算

于 2025-07-10 21:28:45 首次发布

本文链接：https://blog.youkuaiyun.com/px0405/article/details/149257910

服务器部署简明指南

服务器准备

购买阿里云轻量服务器（选择宝塔镜像）
记录关键信息（账号密码、配置等）
登录宝塔面板，按需安装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/

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