前端SSR框架(Next、Nuxt)利用宝塔面板部署

1、部署的本质

SSR服务端渲染的框架部署区别于常规的CSR项目的部署,并不是打包之后访问某个文件就行,而是需要在服务器中运行项目之后访问某个地址,无论是基于Vue的Nuxt.js框架还是基于React的Next.js框架道理都是一样的

因此区别于CSR我们打包拷贝到服务器需要而外注意两个问题:如何让项目跑起来、如何让项目一直在跑

2、固定项目的运行端口

Nuxt项目在nuxt.config.js中加入:

复制代码
server:{
    port:6666,   //自定义前端端口号
    host:"0.0.0.0",    //允许任意ip访问
    timing:false
},

Next项目在package.json中修改指令:

复制代码
 "scripts": {
        "dev": "next dev -p 6666",
        "build": "next build",
        "start": "next start -p 6666"
    },

3、防火墙设置

在"安全"处设置你设置的端口

4、环境配置

为了项目能够正常运行,我们需要在服务器安装node,方式和在电脑上一致,可以手动也可以借助工具

下面推荐宝塔的两个工具可以轻松完成配置在宝塔的软件商店中可以下载

PM2:

Node.js版本管理器 :

5、打包与测试

复制代码
npm run build

Nuxt项目将打出来的包(.nuxt)和nuxt.config.js、package.json、package-lock.json、static文件夹、public文件夹以及一些配置文件打成压缩包放在服务器项目根目录

Next项目将打出来的包(.next)和next.config.js、package.json、package-lock.json、static文件夹、public文件夹以及一些配置文件打成压缩包放在服务器项目根目录

如下图已Next框架为例,红框部分直接来自本地项目,我做了配置build文件夹相当于.next:

也可以将node_modules拷贝进去,但建议在终端安装

打开终端执行下列命令,测试项目能否跑通

复制代码
npm i

npm start

如果安装环境没有什么问题、项目启动成功的话,现在我们可以通过服务器IP地址 + 端口号访问项目了,但是当我们关闭服务器终端后项目就无法访问

6、进程守护、自动重启

在终端直接启动项目确实可以访问,但是这不是长久的,因此我们需要配置进程守护、自动重启

进程守护是指将一个应用程序或服务持续在后台运行,并保证它即使因某种原因(如崩溃、系统重启等)停止,也能自动恢复运行。守护进程会不断监控目标应用程序的状态,一旦检测到进程挂掉或退出,就会尝试重新启动它。

自动重启是指当进程异常退出(如崩溃、报错)时,系统或进程管理器会自动将该进程重新启动,保证服务的持续可用性。

通过第我们安装的PM2应用可以完成这一配置

点击进入工具:

选择并切换node版本,刚下载下来好像是默认4.x来的,我忘记了

新建项目,启动文件直接写npm就行了,目录根据自己来

配置端口

完成后启动就大功告成了!!!!这样你就可以根据IP地址 + 端口号访问项目了,并且网站开启了进程守护、自动重启

相关推荐
Yhame.3 分钟前
【使用层次序列构建二叉树(数据结构C)】
c语言·开发语言·数据结构
言之。9 分钟前
【Go语言】RPC 使用指南(初学者版)
开发语言·rpc·golang
小墨宝18 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED34 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿38 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子38 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
投笔丶从戎1 小时前
Kotlin Multiplatform--01:项目结构基础
android·开发语言·kotlin
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm