大家好，我是程序员鱼皮。9月，我处于极度爆肝状态，成功完结了最新带大家做的项目 面试刷题平台 。

当我们做完一个项目后，一定要记得把项目上线，这样才算是完成了学习的 “闭环”，写到简历上也才有竞争力。

我不仅将这个项目的代码开源给大家，还专门录制了一期 保姆级 部署上线的视频教程，供大家自学，没有上线过项目的朋友一定要看一看哦！

代码开源：/liyupi/mian…

上线视频教程：…

下面也通过文字给大家分享一些部署项目的关键操作，希望大家能够掌握快速上线项目的方法。

包括：

服务器初始化部署规划安装依赖后端部署前端部署测试验证一、服务器初始化

首先购买一台服务器，各大云服务商的新用户都有优惠。推荐轻量应用服务器，提供了很多开箱即用的模板，帮我们预装了环境和软件，省时省力。

鱼皮这里选择一台预装了宝塔 Linux 应用的轻量应用服务器，配置为 2 核 2 G，部署咱们的项目（核心功能版）足够了。但一定要注意，操作系统如果是 CentOS，必须 >= 8，否则无法支持本项目的前端部署！ 一般选择最新版本就好了，如下图：

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

进入应用管理标签页，登录宝塔。首次登录时，需要先登录服务器，通过输入命令的方式获取宝塔默认账号密码，如图：

点击登录后，进入到 web 终端，复制脚本并执行，会得到初始账号密码和面板地址：

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

二、部署规划

在正式操作前后端部署前，我们要先进行一个规划，比如要部署哪些项目和服务、需要哪些依赖、占用哪些端口等。

为了方便，本项目前端和后端均使用宝塔面板进行部署，可以很方便地管理服务器。

涉及到具体的部署方式，前端要遵循 Next.js 服务端渲染的部署模式，基于 Node.js 运行；后端可以直接运行 jar 包。

前端：通过 Nginx 进行转发，访问地址为 {域名}。由于是 Node 服务，实际运行在 3000 端口。

后端：通过 Nginx 进行转发，访问地址为 {域名}/api。实际运行在 8101 端口。

为什么要用 Nginx 转发呢？

这样可以让前端和后端访问域名一致，保证不会出现跨域问题。

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

三、安装依赖1、Node 环境

进入宝塔面板 - 网站 - Node 项目，会提示安装 Node 版本管理器，点击安装：

然后就可以用它来安装 Node.js 版本了，首先要更新版本列表，然后选择 > 18.18.x 的稳定版本，此处鱼皮选择 v20.17.0 安装：

2、数据库

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

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

在 IDEA 中打开后端项目，通过数据库面板在本地检查连接是否正常：

执行脚本，初始化库表并导入初始示例数据，然后记得验证数据库表是否创建成功。

3、Redis

在宝塔面板的软件商店中，搜索并安装 Redis，版本选择默认的即可：

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

修改配置后，一定要重载配置。最后，在 IDEA 数据库面板中验证本地能否连接远程 Redis：

4、Java 环境

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

建议多安装几个版本，比如 JDK 8、11、17，需要用哪个版本的时候可以随时切换。

接下来，我们分别进行后端和前端部署。注意，由于前端 Next.js 服务端渲染项目部署时会调用后端接口，所以必须先部署后端。

四、后端部署1、修改配置和代码

修改 application-prod 生产环境配置，包括数据库、Redis 等，替换为上述安装依赖时指定的配置（如用户名、密码）。

2、打包部署

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

打包成功，得到 jar 包文件，需要上传 jar 包到服务器：

然后添加 Java 项目，注意端口要和生产环境的配置保持一致，并且项目执行命令中，要指定生产环境的配置！

启动成功后，能够看到状态和端口占用如图：

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

3、Nginx 转发

新建一个站点（Nginx），域名填写当前服务器 IP 或者自己的域名，根目录随意填写即可。

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

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

五、前端部署1、修改配置

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

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

2、打包部署

1）修改 Next.js 配置文件 next.config.mjs，使用 standalone 模式部署，这样上传到服务器的时候可以不用上传 node_modules 目录。

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
};
​
export default nextConfig;

2）执行 package.json 文件中定义的 build 命令，执行打包构建。

构建时，可能会遇到一些类型错误，这类错误不影响运行，但是会在 Next.js 打包时被检测，可以根据实际情况修改。或者直接在打包时忽略 TypeScript 错误。修改 next.config.mjs 配置文件即可：

/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
      // !! WARN !!
      // Dangerously allow production builds to successfully complete even if
      // your project has type errors.
      // !! WARN !!
      ignoreBuildErrors: true,
  },
};
​
export default nextConfig;

打包成功后，看到下图信息，能够很直观地看到哪些页面用到了静态渲染和服务端渲染：

然后在 .next 目录下会生成 standalone 目录，该目录就是可以独立部署的前端包。但是必须按照如下模式组织目录，一定不能有错！

将项目根目录下的 public 目录移动到 .next/standalone 内将 .next/static 目录移动到 .next/standalone/.next 内

组织好的目录结构如下：

把 standalone 目录下的所有文件上传到服务器上（可以新建一个 mianshiya-frontend 目录）：

上传到服务器后，添加 Node 项目。注意修改启动选项（start 或者自定义命令 node server.js）和项目端口（3000）：

3、Nginx 转发

修改 Nginx 配置，访问前端资源时，反向代理到 Node.js 服务，配置代码和后端反向代理类似：

location / {
 proxy_pass  http://127.0.0.1:3000;
 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 "";
}

一定要注释掉下列配置！让静态资源能够正确被反向代理。 否则访问页面时，静态资源的加载可能会出错：

六、测试验证

最后，我们来对上线效果进行验证。

访问主页、题库大全页、题目大全页，都能正常访问：

访问题库详情页，正常显示：

登录管理员账号，可以正常访问和使用管理能力：

最后

至此，整个项目已经完成上线，希望大家能通过这个项目掌握企业级项目的开发、优化和上线方法，得到全方面编程技能和程序员素养的提升。如果上线过程中遇到错误，也别慌张，看前后端的日志进行排查即可，视频教程中也给大家举了个排查问题的例子，建议观看。

代码开源：/liyupi/mian…

上线视频教程：…