高产胜那啥，带你上线我的新项目！seo优化

高产胜那啥，带你上线我的新项目！

news/2024/10/9 14:33:43

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

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

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

代码开源：https://github.com/liyupi/mianshiya-next

上线视频教程：https://www.bilibili.com/video/BV1mixreSE6t/

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

包括：

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

一、服务器初始化

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

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

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

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

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

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

二、部署规划

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

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

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

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

后端：通过 Nginx 进行转发，访问地址为 http://{域名}/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 "";
}