nestjs+vue3前后端项目并配置ssl(nest打包与nginx篇)

本文使用的技术栈: Vue3+Vite+Axios+Pinia、Nestjs+Typeorm+mysql2

本篇记录nestjs打包和nginx操作

nest

nest打包依赖问题

正常情况下，前端打包后的/dist文件夹是可以直接通过node启动的，但是nestjs不会把依赖打包。

所以nest项目最好是git pull拉取项目，然后在服务器安装依赖并打包。

nest打包环境变量问题

如果在nest中通过了ConfigModule使用.env，需要把.env放到打包后的/dist中，否则无法找到环境变量

pm2启动nest静态文件问题

目录简略结构如下

my-project/
├── dist/
│   ├── users/              # 项目的表
│   ├── ...                 # 其余文件
│   └── main.js             # 项目的启动文件
├── node_module/
│   ├── ...                 # 依赖包
|   └── ...                 # 依赖包
├── src/
│   ├── users/              # 项目的表
│   ├── utils/              # 工具
│   ├── app.module.ts       # app模块
│   └── main.ts             # 入口文件
├── .env                    # 环境变量
├── ...                     # 其他文件
├── .gitignore              # Git 忽略文件
├── package.json            # 项目配置文件
└── README.md               # 项目说明文件

我在my-project/src下运行sudo pm2 start ../dist/main.js命令，发现有报错。

打印出来发现，报错居然出现在main.ts。

尝试重启、删除再启动都无效。

后面进入/dist使用sudo pm2 start ./main.js才成功启动了main.js

ssl

前端ssl

ps:不建议用node启动express重定向/到/index.html，这样会导致网页刷新后404

服务器配置nginx后，在nginx.conf内进行如下配置

http {
  server {
      listen 443 ssl;

      server_name 你的域名;

      ssl_certificate 你的证书;
      ssl_certificate_key 你的密钥;

      ssl_session_cache shared:SSL:1m;
      ssl_session_timeout  5m;

      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
      ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

      ssl_prefer_server_ciphers on;

      location / {
          root 你的html文件所在的目录;
          index index.html index.htm;
          try_files $uri $uri/ /index.html;
      }
      location /api/ {
          proxy_pass 转发后端接口;
          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_set_header X-Forwarded-Proto $scheme;
      }
  }
}

ssl_certificate用cer或者crt文件都可以

ssl_certificate_key就是key文件

后端ssl问题

当前端配置了ssl后，https向http的后端发起请求会出错。如下图

现在就有两种解决办法，我个人总感觉第二种不太好，但是没做过后端，不清楚第二种合不合适。

一、nginx转发

我的后端在服务器的3000端口挂着，所以我在nginx里面，对本机的3000端口进行转发，路径设置的/api/，也就是上面nginx配置中的location /api/

二、把ssl也给nest装上

进入nest的main.ts
定义一个对象，并导入key和cert

将对象放进nest的工厂函数，全部代码如下

# main.ts

const httpsOptions = {
  key: fs.readFileSync('密钥'),
  cert: fs.readFileSync('证书'),
};

async function bootstrap() {
  const app = await NestFactory.create(AppModule, httpsOptions);
  app.enableCors();
  await app.listen(process.env.PORT ?? 3000);
}
bootstrap();

苏某的博客