前端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 inpm start

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

6、进程守护、自动重启

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

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

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

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

点击进入工具:

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

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

配置端口

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/451337.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django学习-静态文件

注意:配置项是个元祖,如果只有一项,别忘了在元素后面加逗号 settings: STATICFILES_DIRS (os.path.join(BASE_DIR,static),)urls: path(test_static, views.test_static)views: def test_static(request):return render(request,test_stat…

中科星图(GVE)——过火面积识别(dNBR)和CART方法进行火灾识别

目录 简介 函数 sampleRegions(collection,properties,scale,projection,tileScale,geometries) gve.Classifier.Cart(maxNodes,minLeafPopulation,maxDepth) updateMask(mask) 代码 网址推荐 知识星球 机器学习 简介 过火面积识别(dNBR)和CART…

Jlink 直接读取单片机数据

1. 驱动版本 因人而异,这里我使用的是 “J-Flash V6.96” 本人驱动链接:夸克网盘 提取码:rgzk 2. 打开软件 3. 创建jlink工程 4. 选择芯片 此处本人使用芯片 “STM32F103VCT6” 5. 连接单片机 连接成功反馈 6. 读取单片机内部数据 …

WordPress监控用户行为回放插件

在数字营销的世界里,了解用户行为是提升用户体验和转化率的关键。nicen-replay 插件,它能够让您轻松回放用户在网站上的每一步操作,从点击到滚动,再到表单填写,每一个细节都清晰可见 nicen-replay,是一款可…

目标检测——Cascade R-CNN算法解读

论文: Cascade R-CNN: Delving into High Quality Object Detection (2017.12.3) 链接:https://arxiv.org/abs/1712.00726 Cascade R-CNN: High Quality Object Detection and Instance Segmentation (2019.6.24) 链接:https://arxiv.org/abs…

Miniconda管理虚拟环境【Python环境配置】

Miniconda管理虚拟环境【Python环境配置】 1. 下载并安装Miniconda2. 管理虚拟环境3. 管理虚拟环境中的包 1. 下载并安装Miniconda 1. 下载 从清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载Miniconda:https://mirrors.tuna.tsinghua.edu.cn/anaconda…

基于YOLO11/v10/v8/v5深度学习的安检X光危险品检测与识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…

技术分享:A-23OH型树脂在汽车涂装废溶剂回收中的应用

在当今汽车制造业竞争激烈的环境下,提高生产效率、降低成本的同时,满足环保要求已成为各制造商追求的核心目标。水性涂料因其环保、节能等多重优势,在汽车涂装领域的应用日益广泛。然而,随之而来的喷涂废溶剂处理问题也日益凸显。…

面试应该问什么?

在求职者面试的过程中,向面试官提问是一个展现自己积极态度、对职位和公司兴趣以及进一步了解工作环境和职业发展机会的重要环节。以下是一些求职者可以在面试中向面试官提问的问题,这些问题旨在帮助你更全面地了解未来的工作环境、团队文化、以及个人职…

【SSM详细教程】-04-Spring基于注解的组件扫描

精品专题: 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课…

HTML5教程(三)- 常用标签

1 文本标签-h 标题标签&#xff08;head&#xff09;&#xff1a; 自带加粗效果&#xff0c;从h1到h6字体大小逐级递减一个标题独占一行 语法 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5…

CANoe_CDD_FaultMemory_显示<DTC is defined in the database>解决方法

1、显示<DTC is defined in the database> 2、问题原因 a、在Base Variant中的Fault Memory没有数据 b、新建数据&#xff08;参考导入或者新建方法&#xff09; c、复制数据过来 &#xff08;在Fault Memory中Diagnostic Trouble Codes的Avariable中全选复制到此处&am…

FFmpeg的简单使用【Windows】--- 指定视频的时长

目录 功能描述 效果展示 代码实现 前端代码 后端代码 routers 》users.js routers 》 index.js app.js 功能描述 此案例是在上一个案例【FFmpeg的简单使用【Windows】--- 视频混剪添加背景音乐-CSDN博客】的基础上的进一步完善&#xff0c;可以先去看上一个案例然后再…

Java基于SSM微信小程序物流仓库管理系统设计与实现(lw+数据库+讲解等)

选题背景 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个…

mysql的各种存储引擎

文章目录 前言1. InnoDB特点 2. MyISAM特点innodb与myisam引擎之间的区别 3. MEMORY特点 4. ARCHIVE特点 5. NDBCluster特点 6. FEDERATED特点 7. CSV特点 总结 前言 MySQL 支持多种存储引擎&#xff0c;每种引擎都有其独特的功能和适用场景。存储引擎是指数据库管理系统用来存…

[PHP]__callStatic

第一种&#xff1a;以下代码不会触发__callStatic&#xff0c;也不会报错 test是空方法 <?php class A {public function test(){}public static function __callStatic($method, $args){print_r(aaaaaaaaaaaaaaaaaaaaa);} }A::test();第二种&#xff1a;以下代码不会触发…

MYSQL-多表查询和函数

第一题讲解 # 1. 查出至少有一个员工的部门&#xff0c;显示部门编号、部门名称、部门位置、部门人数。 分析:(分析要查的表): (显示的列):(关联条件):(过滤条件):[分组条件]:[排序条件]:[分页条件]:SELECT d.deptno, dname, loc, count(empno) FROM dept d JOIN emp e ON d…

C#从零开始学习(基本语法概念)(2)

深入C# 本章所有的代码都放在 https://github.com/hikinazimi/head-first-Csharp 控制台项目结构 每个C#程序采用同样的方式组织,命名空间,类和方法 using System;namespace helloworld//命名空间 {class Program//类{static void Main(string[] args)//程序入口{Console.Writ…

YOLOv11改进-卷积-空间和通道重构卷积SCConv

本篇文章将介绍一个新的改进模块——SCConv&#xff08;小波空间和通道重构卷积&#xff09;&#xff0c;并阐述如何将其应用于YOLOv11中&#xff0c;显著提升模型性能。为了减少YOLOv11模型的空间和通道维度上的冗余&#xff0c;我们引入空间和通道重构卷积。首先&#xff0c;…

C语言笔记(指针的进阶)

目录 1.字符指针 2.指针数组 3.数组指针 3.1.创建数组指针 3.2.&数组名和数组名 1.字符指针 int main() { char ch w;char* pc &ch;const char *p "abcdef";//常量字符串 产生的值就是首元素的地址//常量字符串不能被修改 因此需要加上一个…