宝塔配置

向军大叔每晚八点在 抖音 和 bilibli 直播

宝塔面板 是服务器端快速配置站点的软件，下面来学习使用宝塔面板来运行我们的node项目。

中间件

我们希望node与前端vue项目使用一个域名访问，所以要在nest.js中做处理。首先定义中间件 site.middleware.ts

当请求url不是以 /api 开始的就加载vue编译的vue_dist目录中的 index.html 文件，即加载vue项目。其它url请求为访问nest.js接口

import { Request, Response } from 'express'
import { readFileSync } from 'fs'
import path from 'path'

export function SiteMiddleware(req: Request, res: Response, next) {
  if (!req.path.match(/^\/api/)) {
    const content = readFileSync(path.resolve(__dirname, '../../vue_dist/index.html'))
    res.send(content.toString())
  }
  next()
}

然后在 main.ts 中使用中间件

app.use(SiteMiddleware)

先在本地测试好后，再进行服务器的处理

软件安装

下面在宝塔服务器安装PM2、Node等软件

PM2是用来管理node项目的支行，我们需要在宝塔应用商店安装 pm2与Node.js版本管理器

使用版本管理器在服务器安装node最新LTS版本

然后设置pm2要使用的node版本

FTP

首先创建hdcms的ftp目录

然后将项目使用ftp传输到网站，以下是目录结构

不需要将node_modules目录上传，因为文件太大，我们在服务器使用 pnpm i 安装，效率更高

.
├── README.md
├── dist										//nest.js编译目录
├── nest-cli.json
├── package.json
├── pnpm-lock.yaml
├── prisma
├── public
├── src
├── test
├── tsconfig.build.json
├── tsconfig.json
├── vue											//vue项目目录
└── vue_dist								//vue前端编译目录

nestJs

访问服务器在项目根目录执行命令安装依赖包

pnpm install

修改项目根目录的 .env 文件，设置正确的mysql连接参数，然后再执行数据迁移和数据填充

npx prisma migrate dev

如果报错，在 .env 文件中使用mysql的root连接

vue

vite.config.ts 配置文件中定义 base 配置段，用于声明静态文件的url前缀

...
base: isBuild ? '/vue_dist' : '/',
...

然后执行vue项目编译，然后将编译后的 vue_dist 目录上传到网站根目录

pnpm run build

快速配置（方法一）

下面使用宝塔页面的Node项目功能设置网站

下面是nest.js项目的项目配置

然后配置网站域名

接着配置ssl证书

使用PM2（方法二）

添加项目

下面在Pm2中添加nest.js项目，初次配置过程会较慢，你需要些耐心

然后设置项目的端口号

映射域名

下面设置网站域名

这时会在网站栏目中添加一个新站点

SSL

先将网站的反向代理关闭

然后申请SSL证书

接着开启强制证书访问

别忘记再把反向代理打开

现在通过域名应该可以访问到接口了

https://www.hdcms.com/api

访问测试

现在可以通过 https://www.hdcms.com 域名访问网站了