前情提要
这篇文章将指导你如何部署Vue3+Nest项目。
在看这篇文章之前可以先看看我的上一篇文章->耗时两个多月，我的全栈项目(vue3+nest)完成啦 - 掘金 (juejin.cn),里面是我对我的项目做了一个简单的介绍。
仓库地址：四十的个人博客: 一个Vue3+Nest的个人博客 (gitee.com)
如果觉得不错还请给我一个star支持一下喔。😀😀😀
服务器配置
我这里使用服务器配置是2核4G，应该2核2G也可以
Nest部署
因为我很多配置是使用宝塔的，所以下文很多部分我会使用宝塔进行部署
如果不想用宝塔也没关系，那么跟着文章一步步去手动在服务器装配置也行。
1.安装宝塔
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
2.安装数据库
在宝塔中安装
然后在添加数据库，并把准备好的sql文件导入就好
3.安装redis
给自己打个广告，细致入微教你用nest集成redis - 掘金 (juejin.cn)
在宝塔软件商店找到redis
安装后点击它，然后调整配置
4.配置minio
给自己打个广告：保姆级教你用nest集成minio - 掘金 (juejin.cn)
我当时想在linux中直接配置minio，可是怎么也弄不好，所以我用了docker进行搭建minio容器。
这里推荐一篇文章，我当时就是跟着它配置好的Docker 搭建 Minio 容器 (完整详细版)_docker minio_Touch&的博客-CSDN博客
5.安装pm2
在软件商店中下载PM2管理器，它里面还顺便内置了nvm。
用pm2启动node项目可以确保我们项目能够持久运行，发生意外情况帮助我们重新启动项目。并且pm2里面也有日志管理，帮助我们看程序报错。
6.部署nest
创建一个文件夹用来存放nest的代码，把除了node_module和dist包以外的文件全部放进去
重点来了！！！
我们在命令行进入到nest目录中
执行npm install安装node_module包，这个过程无比漫长，要几分钟都是有可能的。更有甚者还会报错！！！
看吧，现在就失败了
解决方案：切换node版本为16.20.0，安装node-gyp ，多试几次
然后再打包
因为我在nest配置了环境变量
这里打包出了dist文件并不能直接运行，我们需要手动将.env.production文件放入dist中
这里给大家展示一下我环境变量文件是怎样的
然后通过pm2运行程序
pm2 start dist/main.js --name test --env .env.production
这里的test是指PM2启动一个名为test的node.js应用程序，入口文件是dist/main.js，同时使用.env.production进行配置
如果是使用宝塔上的pm2还可以在宝塔上的pm2去看程序情况
那么这样就表示我们的nest部署成功，可以通过域名端口访问啦！！！
可能有人觉得这样部署很麻烦，会试着从本地把dist放到服务器上，然后再用pm2运行，这样是无法运行成功的，具体原因可以自行研究啦。
真希望node项目的部署有一天能像java那样打包出个jar包放服务器就能用多好啊。
到此nest部署完毕，大家不一定要按照我的这种方法，也可以试着用docker部署nest。
Vue部署
前端的部署就很简单了，只需要配置nginx就好了。
前台的环境变量文件，我的环境变量环境文件都是一份.env.development,一份.env.production，
如果是.env.production就不要写NODE_DEV了，不然部署的时候会有问题。后台的环境变量文件不需要写VITE_WS_URL
大家在自己的服务器自行安装好nginx，然后把前端的前台和后台代码分别打包放进服务器里。
这是其中一个的配置，另一个只需要照猫画虎，都把它们放进你的ngin里的配置文件就好
server
{
listen 你的端口;
server_name 你的ip;
index index.php index.html index.htm default.php default.htm default.html;
#文件存放路径
root /www/wwwroot/blog/blog-vue/dist;
#SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
#SSL-END
#ERROR-PAGE-START 错误页配置，可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END
#PHP-INFO-START PHP引用配置，可以注释或修改
include enable-php-74.conf;
#PHP-INFO-END
#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
include /www/server/panel/vhost/rewrite/你的域名.conf;
#REWRITE-END
#禁止访问的文件或目录
location ~ ^/(.user.ini|.htaccess|.git|.env|.svn|.project|LICENSE|README.md)
{
return 404;
}
#一键申请SSL证书验证目录相关设置
location ~ .well-known{
allow all;
}
#禁止在证书验证目录放入敏感文件
if ( $uri ~ "^/.well-known/.*.(php|jsp|py|js|css|lua|ts|go|zip|tar.gz|rar|7z|sql|bak)$" ) {
return 403;
}
location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
error_log /dev/null;
access_log /dev/null;
}
location ~ .*.(js|css)?$
{
expires 12h;
error_log /dev/null;
access_log /dev/null;
}
access_log /www/wwwlogs/你的ip.log;
error_log /www/wwwlogs/你的ip.error.log;
}
尾语
至此就Vue和Nest的部署就结束了，感谢您阅读本项目的部署文档！
最后，我希望这个项目能为你的学习或者工作带来价值。如果你有任何建议或意见，也欢迎与我分享。
