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

news2024/10/20 3:47:46

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地址 + 端口号访问项目了,并且网站开启了进程守护、自动重启

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024年中国工业大模型行业发展研究报告|附43页PDF文件下载

工业大模型伴随着大模型技术的发展,逐渐渗透至工业,处于萌芽阶段。 就大模型的本质而言,是由一系列参数化的数学函数组成的计算系统,且是一个概率模型,其工作机制是基于概率和统计推动进行的,而非真正的理解…

to_sql报错not all arguments converted during string formatting

报错: DatabaseError: Execution failed on sql SELECT name FROM sqlite_master WHERE typetable AND name?;: not all arguments converted during string formattingb 报错的代码如下: import pymysql import pandas as pd con pymysql.connect(…

如何测量场景的照度和色温?

1、问题背景 在我们平常的工作当中,经常都会使用照度计去测量当前场景的照度和色温,但测量时照度计具体该放在什么位置呢? 是和被测物体表面平行放置,还是和摄像头镜头位置平齐放置呢?本文将从照度、色温的概念出发&am…

ntfs MFT损坏(ntfs文件系统故障)导致oracle异常恢复---惜分飞

客户虚拟化环境,由于断电,启动数据库报ORA-01157错误,通过操作系统层面查看,发现文件是存在的,但是dbv检测报不可访问 感觉是文件系统损坏了,尝试把该文件拷贝到其他磁盘 查看操作系统事件,确认是ntfs文件系统的MFT损坏 基于这种情况,通过文件系统恢复工具进行恢复该文件…

【Java】Java 的反射机制(二):类的加载(拓展)

Java 的反射机制(二):类的加载(拓展) 1.类的加载过程1.1 Java 内存分析1.2 类的加载过程1.3 类的加载与 ClassLoader 的理解1.4 什么时候会发生类的初始化 2.类加载器 1.类的加载过程 1.1 Java 内存分析 1.2 类的加载…

观测云 AI 助手上线:智能运维,从此触手可及!

在当前的云原生时代,运维的复杂性和数据的爆炸式增长给企业带来了前所未有的挑战。为了帮助企业高效应对这些挑战,观测云自豪地推出了 AI 助手——智能化的运维助手,让每位用户都能轻松驾驭复杂的可观测性场景。 01 你身边的 PE 助手&#x…

vs2022配置opencv静态库

本文将在windows10环境下,vs2022Cmake3.24.4编译opencv静态库,包括win32-release,win32-debug, x64-release, x64-debug四种; 文章内容有点长,请耐心看下去。 一、安装VS2022 下载链接:https://visualstudio.micros…

【设计模式系列】装饰器模式

目录 一、什么是装饰器模式 二、装饰器模式中的角色 三、装饰器模式的典型应用场景 四、装饰器模式在BufferedReader中的应用 一、什么是装饰器模式 装饰器模式是一种结构型设计模式,用于在不修改对象自身的基础上,通过创建一个或多个装饰类来给对象…

海南聚广众达电子商务咨询有限公司靠谱吗怎么样?

在当今这个数字化浪潮席卷全球的时代,抖音电商以其独特的魅力成为了众多商家争相入驻的新蓝海。而在这片浩瀚的电商海洋中,如何找到一家既专业又可靠的合作伙伴,成为了众多商家心中的一大难题。今天,我们就来深入剖析一下海南聚广…

模电基础(放大电路的频率响应+multisim)

目录 1.频率响应的基本概念 1.1频率响应的基本概念 1.1.1高通滤波器 1.1.2低通滤波器 1.1.3波特图 1.1.4multisim仿真 1.2晶体管高效等效模型 1.2.1晶体管的混合π模型 1.2.2晶体管电流放大倍数的频率响应 ​1.3单管放大电路的频率响应 1.3.1单管共射放大电路的频率响…

如何查看默认网关地址:详细步骤

在日常的网络配置与故障排查中,了解并正确查看默认网关地址是一项基础且至关重要的技能。默认网关是连接本地网络与外部网络(如互联网)的关键节点,它扮演着数据包转发的重要角色。无论是家庭网络、办公室网络还是更复杂的网络环境…

Threejs 实现3D 地图(01)创建基本场景

"d3": "^7.9.0", "three": "^0.169.0", "vue": "^3.5.10" <script setup> import { onMounted,ref } from vue import * as THREE from three import * as d3 from "d3"; //莫开托坐标 矫正地图…

vue综合指南(二)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vuet篇专栏内容:vue综合指南(二) 目录 21、介绍虚拟DOM 22、vue生命周期的理解 23、vue父组件向子组件传递数据…

sql高级

数据库的范式 为了建立冗余较小、结构合理的数据库&#xff0c;设计数据库时必须遵循一定的规则。在关系型数据库中这种规则就称为范式。 范式是符合某一种设计要求的总结。要想设计一个结构合理的关系型数据库&#xff0c;必须满足一定的范式。实际上&#xff0c;数据库范式…

基于SSM+微信小程序的打印室预约管理系统(打印2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的打印室预约管理系统实现了管理员和用户两个角色。 1、管理员功能有个人中心&#xff0c;用户管理&#xff0c;附近打印店管理&#xff0c;文件打印管理&#xff0c;当…

iTOP-RK3568开发板独立NPU通过算法加特应用到以下的场景

iTOP-3568开发板采用瑞芯微RK3568处理器&#xff0c;内部集成了四核64位Cortex-A55处理器。主频高达2.0Ghz&#xff0c;RK809动态调频。集成了双核心架构GPU&#xff0c;ARM G52 2EE、支持OpenGLES1.1/2.0/3.2、OpenCL2.0、Vulkan1.1、内嵌高性能2D加速硬件。 内置独立NPU,算力…

Yocto - 使用Yocto开发嵌入式Linux系统_10 使用Yocto项目进行开发

Developing with the Yocto Project 在本书中&#xff0c;我们一直将 Poky 用作构建工具。换句话说&#xff0c;我们将其用作设计和生成镜像的工具&#xff0c;将镜像交付到产品。 So far in this book, we have used Poky as a build tool. In other words, we have used it a…

Nature 正刊丨核糖体如何塑造蛋白质折叠

01摘要 涉及人工智能的方法彻底改变了从氨基酸序列预测蛋白质结构的能力。然而&#xff0c;这些结构通过在细胞内折叠形成的过程仍然大多难以捉摸——尽管正确折叠对蛋白质功能的重要性&#xff0c;以及折叠失败与许多毁灭性疾病之间的联系。大多数蛋白质只有在核糖体&#xf…

鸿蒙网络编程系列23-实现一个基于鸿蒙API的HTTP服务器

1. 鸿蒙HTTP服务器可行性分析 看到这个题目&#xff0c;可能有的小伙伴会有一些疑问&#xff1a; “鸿蒙API从9到12我都翻烂了&#xff0c;也没见提供HTTP服务器的接口啊” “我BUG写得少&#xff0c;你可不要骗我” 的确&#xff0c;目前的鸿蒙API没有提供HTTP服务端的实现…

【每日一题】【算法双周赛】【第 20 场 小白入门赛评价/分享】赛后另类AI写题分析分享

第 20 场 小白入门赛 1. 四个亲戚【算法赛】2. 黛玉泡茶【算法赛】AI分析具体实现代码解析复杂度分析示例运行 结果二 3. 宝玉请安【算法赛】AI分析问题分析路径计算代码实现代码解析示例运行复杂度分析 结果&#xff1a; 交上去 4. 贾母祝寿【算法赛】AI分析问题分析实现步骤代…