SpringBoot单机项目部署

服务器初始化

首先购买服务器，这里我们选用宝塔 Linux 应用的轻量应用服务器

购买好服务器后，进入控制台，可以看到新增的服务器信息，注意不要主动对外暴露公网 IP！

点击服务器进入详情页，在防火墙标签页中放通 8888 宝塔面板端口，否则无法在自己的电脑上访问宝塔。

首次登录时，需要先登录服务器，通过输入命令的方式获取宝塔默认账号密码，如图：

点击登录后，进入到 web 终端，复制脚本并执行：

根据终端输出的信息，访问宝塔面板，输入初始用户名和密码：

首次进入宝塔时，会提示我们安装环境，这里推荐安装 LNMP（包含 Nginx 服务器），适合部署前后端分离的项目：

首次进入宝塔面板时，记得修改面板账号密码（每次修改完都要重新登录）：

部署规划

做好规划后，我们需要在腾讯云控制台的防火墙中开通需要外网访问的服务端口，比如 MySQL 和 Redis：

安装依赖

数据库

宝塔面板已经自动安装 MySQL 数据库，我们可以直接使用。

先为后端项目添加一个数据库。数据库名称和我们项目需要的数据库名称保持一致（此处为 mianshiya），注意用户名、密码和访问权限：

Redis

在宝塔面板的软件商店中，搜索并安装 Redis：

安装完成后，需要配置 Redis，开启远程访问并配置密码，否则我们自己的电脑是无法连接 Redis 的：

修改配置后，一定要重载配置才能生效：

Java 环境

要部署 Java 项目，必须安装 JDK。在宝塔面板中，可以通过下图的方式快速安装指定版本的 JDK。此处我们先安装 JDK 17：

其他服务

比如 腾讯云 COS 对象存储、阿里云百炼 AI，可以去对应的官网开通。

如果不会开通的话，可以通过第 4 章教程开通 COS 对象存储，第 9 章教程开通阿里云百炼 AI。

注意，要给对象存储增加该服务器 IP（或者实际访问前端域名）的跨域配置，否则编辑图片时将无法正确加载图片。

后端部署

修改配置

修改 application-prod 生产环境配置，包括数据库、Redis、对象存储、阿里云百炼 AI 的 key 等，替换为上述安装依赖时指定的配置（如用户名、密码）。

注意为了性能，还要关闭 MyBatis Plus 的日志；为了安全，要给 Knife4j 接口文档设置用户名和密码。

参考配置如下：

# 线上配置文件
# @author <a href="https://github.com/liyupi">程序员鱼皮</a>
# @from <a href="https://codefather.cn">编程导航</a>
server:
  port: 8123
spring:
  # 数据库配置
  # todo 需替换配置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://81.69.229.63:3306/yu_picture
    username: yu_picture_root
    password: yu_picture_123456
  # Redis 配置
  # todo 需替换配置
  redis:
    database: 0
    host: 81.69.229.63
    port: 6379
    timeout: 5000
    password: 123456
mybatis-plus:
  configuration:
    # 生产环境关闭日志
    log-impl: ''
# 接口文档配置
knife4j:
  basic:
    enable: true
    username: root
    password: 123456
# 对象存储配置
cos:
  client:
    host: xxx
    secretId: xxx
    secretKey: xxx
    region: xxx
    bucket: xxx
# 阿里云 AI 配置
aliYunAi:
  apiKey: xxx

打包部署

首先更改 pom.xml 文件的打包配置，删除掉主类配置的 skip 配置，才能打包：

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <version>${spring-boot.version}</version>
            <configuration>
                <mainClass>com.yupi.yupicturebackend.YuPictureBackendApplication</mainClass>
                <skip>true</skip>
            </configuration>
        </plugin>
    </plugins>
</build>

在 IDEA 中打开后端项目，忽略测试并打包：

上传 jar 包到服务器，此处为了方便，就放到 web 根目录：

然后添加 Java 项目，在项目执行命令中，必须指定生产环境的配置！还可以根据需要调整内存：

但是，我们现在无法通过浏览器访问接口文档,这是因为我们的服务器防火墙没有放开 8123 端口。这里我们故意不放开，因为在之前的部署规划中，后端需要通过 Nginx 进行转发，从而解决跨域问题。

Nginx 转发

新建一个 Nginx 站点，域名填写当前服务器 IP 或者自己的域名，根目录随意填写即可（只要不包含中文）：

如果访问的是后端接口（地址有 /api 前缀），则 Nginx 将请求转发到后端服务，对应配置代码如下：

location /api {
  proxy_pass  http://127.0.0.1:8123;
  proxy_set_header Host $proxy_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_buffering off;
  proxy_set_header Connection "";
}

但是，对于本项目，光有 HTTP 转发配置还不够！后端还需要提供 WebSocket 连接，所以也要对 WebSocket 进行转发，再给 Nginx 补充下列配置：

# 代理 WebSocket 连接 (专门用于 WebSocket 请求)
location /api/ws {
  proxy_pass http://127.0.0.1:8123;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_buffering off;
  proxy_read_timeout 86400s;
}

修改完后，就可以通过 80 端口（可以省略）访问到接口了。

一定要注释掉下列配置！否则访问接口文档时，静态资源的加载可能会出错。因为浏览器会从本地缓存加载资源，而不是动态请求资源。

前端部署

修改配置

线上的前端需要请求线上的后端接口，所以需要修改 request.ts 文件中的请求地址为线上：

// 区分开发和生产环境
const DEV_BASE_URL = "http://localhost:8123";
const PROD_BASE_URL = "http://81.69.229.63";
// 创建 Axios 实例
const myAxios = axios.create({
  baseURL: PROD_BASE_URL,
  timeout: 10000,
  withCredentials: true,
});

此外，由于本项目用到了 WebSocket，还要同步修改 pictureEditWebSocket.ts 文件中的 WebSocket 的连接地址：

const DEV_BASE_URL = "ws://localhost:8123";
const PROD_BASE_URL = "ws://81.69.229.63";
const url = `${PROD_BASE_URL}/api/ws/picture/edit?pictureId=${this.pictureId}`

打包部署

1）参考 Vite 官网，在 package.json 文件中定义 pure-build 命令：

{
  "scripts": {
    "dev": "vite",
    "pure-build": "vite build",
    "build": "run-p type-check \"build-only {@}\" --",
  }
}

2）执行 pure-build 命令，执行打包构建。

注意，如果 Node.js 版本较低，会构建失败，这时可以到 官网 安装更新的版本，比如 v20.17.0 等长期支持版本。

构建成功后，可以得到用于部署的静态文件 dist 目录：

把 dist 目录下的所有文件上传到服务器上（可以新建一个 yu-picture-frontend 目录）。文件较多时，建议先在本地压缩，上传压缩包到服务器后再解压。如图：

Nginx 转发

一般来说，用户无法直接访问服务器上的文件，需要使用 Nginx 提供静态文件的访问能力。

修改已有站点的网站目录配置，指向前端文件根目录：

然后访问服务器地址（或者自己配置的域名），就能打开前端网站了.

但是经过验证，目前访问除了主页外的其他页面（比如 /add_picture），如果刷新页面，就会出现 404 错误。

这个问题是由于 Vue 是单页面应用（前端路由），打包后的文件只有 index.html，服务器上不存在对应的页面文件（比如 /add_picture.html），所以需要在 Nginx 配置转发。如果找不到某个页面文件，就加载主页 index.html 文件。

修改 Nginx 配置，补充下列代码：

location / {
  try_files $uri $uri/index.html /index.html;
}

测试验证