前端SSR框架（Next、Nuxt）使用宝塔面板摆设

1、摆设的本质

SSR服务端渲染的框架摆设区别于通例的CSR项目标摆设，并不是打包之后访问某个文件就行，而是需要在服务器中运行项目之后访问某个地址，无论是基于Vue的Nuxt.js框架还是基于React的Next.js框架道理都是一样的
因此区别于CSR我们打包拷贝到服务器需要而外注意两个问题：如何让项目跑起来、如何让项目一直在跑
2、固定项目标运行端口

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

1. server:{
2.     port:6666,   //自定义前端端口号
3.     host:"0.0.0.0",    //允许任意ip访问
4.     timing:false
5. },

复制代码

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

1. "scripts": {
2.         "dev": "next dev -p 6666",
3.         "build": "next build",
4.         "start": "next start -p 6666"
5.     },

复制代码

3、防火墙设置

在“安全”处设置你设置的端口

4、情况设置

为了项目能够正常运行，我们需要在服务器安装node，方式和在电脑上划一，可以手动也可以借助工具
下面推荐宝塔的两个工具可以轻松完成设置在宝塔的软件商店中可以下载
PM2:

Node.js版本管理器 :

5、打包与测试

1. 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拷贝进去，但建议在终端安装

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

1. npm i
3. npm start

复制代码

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

6、进程保卫、自动重启

在终端直接启动项目确实可以访问，但是这不是恒久的，因此我们需要设置进程保卫、自动重启
进程保卫是指将一个应用程序或服务持续在后台运行，并包管它即使因某种原因（如瓦解、系统重启等）停止，也能自动恢复运行。保卫进程会不断监控目标应用程序的状态，一旦检测到进程挂掉或退出，就会尝试重新启动它。
自动重启是指当进程异常退出（如瓦解、报错）时，系统或进程管理器会自动将该进程重新启动，包管服务的持续可用性。
通过第我们安装的PM2应用可以完成这一设置
点击进入工具：

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

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

设置端口

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。