我的全栈(Vue3+Nest)博客项目开源啦

前情提要

这篇文章将指导你如何部署Vue3+Nest项目。

在看这篇文章之前可以先看看我的上一篇文章->耗时两个多月,我的全栈项目(vue3+nest)完成啦 - 掘金 (juejin.cn),里面是我对我的项目做了一个简单的介绍。

仓库地址:四十的个人博客: 一个Vue3+Nest的个人博客 (gitee.com)

如果觉得不错还请给我一个star支持一下喔。😀😀😀

服务器配置

我这里使用服务器配置是2核4G,应该2核2G也可以

Nest部署

因为我很多配置是使用宝塔的,所以下文很多部分我会使用宝塔进行部署

如果不想用宝塔也没关系,那么跟着文章一步步去手动在服务器装配置也行。

1.安装宝塔

bash 复制代码
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运行程序

bash 复制代码
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里的配置文件就好

txt 复制代码
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的部署就结束了,感谢您阅读本项目的部署文档!

最后,我希望这个项目能为你的学习或者工作带来价值。如果你有任何建议或意见,也欢迎与我分享。

相关推荐
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
会发光的猪。7 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客7 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
前端李易安8 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
周全全8 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ8 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六8 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui