Nuxt3打包部署到Linux(node+pm2安装和运行步骤+nginx代理)

最近,我们项目组的工作接近尾声,需要把项目部署上线。由于前端第一次使用Nuxt3框架,后端也是第一次部署Nuxt3项目,所以刚开始出现了很多问题。在我上网搜索很多教程后,得到了基本的流程。

1.服务器安装node.js环境

Nuxt3官方文档https://nuxt.com/docs/getting-started/installation通过官方文档我们可知,nuxt3要求nodejs 环境在16.10.0v以上

1.下载安装包

# 下载到当前文件夹(可以访问https://nodejs.org/dist/这个地址选择源)
wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz

2.解压

# 解压到当前文件夹
tar xf node-v16.14.0-linux-x64.tar.xz

3.建一个node文件夹并且把解压的文件夹移动到当前目录

mv node-v16.14.0-linux-x64 /usr/local/node

4.配置环境变量

# 编辑配置文件
vim /etc/profile# 在profile文件末尾添加(移动的位置)
export NODEJS=/usr/local/node
export PATH=$NODEJS/bin:$PATH

5.保存后重新加载配置

source /etc/profile

6.检查nodejs是否配置成功

node -v

 出现版本即代表安装成功

7.配置淘宝镜像并查看是否成功

# 配置淘宝镜像
npm config set registry=https://registry.npmmirror.com/
# 检测是否切换成功
npm config get registry

2.安装Nuxt3的运行管理工具 pm2

npm install pm2 -g

3.将前端打包好的 .output 文件上传到服务器

上传成功后可能 ls 不显示,这个时候可以 ls -a 一下,就可以发现 .output 文件了

4.配置ecosystem.config.js文件

如果要使用pm2 管理运行项目,需要在根目录下配置 ecosystem.config.js 文件

module.exports = {apps: [{name: 'NuxtAppName',  // 设置启动项目名称exec_mode: 'cluster',instances: 'max',// 注意这里的相对路径script: './.output/server/index.mjs'}]
}

此时项目结构是这样的

5.使用pm2 启动 nuxt3项目

需要在项目的根目录下面执行命令

pm2 start ecosystem.config.js
# 然后使用下边的命令看一下启动的服务列表
pm2 list

 online就表示成功了,能够正常访问项目了。此时可以用命令看一下3000端口是否在运行

netstat -nltp
[root@FrankZhang .output]# netstat -nltp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 0.0.0.0:6379            0.0.0.0:*               LISTEN      32246/./redis-serve 
tcp        0      0 0.0.0.0:111             0.0.0.0:*               LISTEN      570/rpcbind         
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      21866/nginx: master 
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1357/sshd           
tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN      1137/master         
tcp        0      0 0.0.0.0:443             0.0.0.0:*               LISTEN      21866/nginx: master 
tcp6       0      0 :::33060                :::*                    LISTEN      4743/mysqld         
tcp6       0      0 :::3306                 :::*                    LISTEN      4743/mysqld         
tcp6       0      0 :::111                  :::*                    LISTEN      570/rpcbind         
tcp6       0      0 :::80                   :::*                    LISTEN      21866/nginx: master 
tcp6       0      0 :::8085                 :::*                    LISTEN      21078/interviewV2   
tcp6       0      0 :::3000                 :::*                    LISTEN      1233/PM2 v5.3.0: Go 

在运行说明项目部署成功了。

设置自动重启,当服务器故障或者重启的时候,pm2会自动重启,不需要人为重启pm2服务

pm2 startup

如果出现问题,项目启动不起来,可以查看pm2服务执行日志,在日志里找出问题。一下是一些常用的Pm2命令

pm2 logs name(服务名)     //查看服务执行日志
pm2 delete name(服务名)   //删除服务
pm2 stop name(服务名)     //停止服务
pm2 start name(服务名)    //启动服务
pm2 restart name(服务名)  //重启服务

6.Nginx配置代理,80访问3000

因为3000端口不是我们期望让用户得知的,希望通过Nginx的反向代理,隐藏真实的端口,我们可以在nginx的配置文件里这样写

server {listen      80;listen    [::]:80;server_name localhost;location / {proxy_pass http://localhost:3000;}location /interviewV2/ {proxy_pass http://127.0.0.1:8085;}
}

这个和传统的前端打包 dist 文件配置nginx不一样。dist是一种静态资源,nuxt3是在服务器上运行一个服务,通过nginx代理到这个服务的端口号从而访问项目的前端页面。然后在操作页面的时候会发请求到后端项目的端口。然后整个项目就跑通了。

注意:如果是docker启动的nginx,一定要看好docker0的ip地址,就不能填写localhost,127.0.0.1这种ip了,因为docker启动的容器,相当于一台服务器去请求另一台服务器,这个地方要填docker0的IP。

可以使用 ifconfig 命令来查看当前docker0的IP

以上就是Nuxt3项目部署的全部内容了。

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

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

相关文章

华为鲲鹏服务器

1.简介 鲲鹏通用计算平台提供基于鲲鹏处理器的TaiShan服务器、鲲鹏主板及开发套件。硬件厂商可以基于鲲鹏主板发展自有品牌的产品和解决方案;软件厂商基于openEuler开源OS以及配套的数据库、中间件等平台软件发展应用软件和服务;鲲鹏开发套件可帮助开发…

深入解析SNMP协议及其在网络设备管理中的应用

SNMP(Simple Network Management Protocol,简单网络管理协议)作为一种用于网络设备管理的协议,在实现网络设备的监控、配置和故障排除方面发挥着重要的作用。本文将深入解析SNMP协议的工作原理、重要概念和功能,并探讨…

C++自创题目——第一期

一、题目描述: 在一段时间内,到达港口的船有n艘,其中每艘船的信息包括:到达时间t(表示第t秒),船上乘客数k,以及k名乘客的国籍。输出前3600s内每艘船上国籍种数,并输出国籍种数最少的船只的到达时间。 二、…

docker使用harbor进行镜像仓库管理演示以及部分报错解决

目录 一.安装harbor和docker-compose 1.下载 2.将该文件修改为这样,修改好自己的hostname和port,后文的用户和密码可以不改也可以改,用于登录 3.安装 二.修改daemon.json文件和/etc/hosts文件 三.使用powershell作windows端域名映射 四…

【ArcGIS Pro二次开发】(63):批量更改字段别名

在我工作中遇到的大多数图斑,字段名称一般是英文,字段别名是中文,使用起来是比较方便的。 但有时候也会遇到一些不一样的情况,不知是经过了怎样的处理,图斑的字段别名被修改成了和字段名称一样的英文,这样…

[JAVA学习笔记]常用类

String类: 一、存放位置: 字符串对象创建好后不能修改 String是引用数据类型,但是这里作为方法参数传递的时候,效果跟基本数据类型是一样的。也就是说在堆中创建出来的字符串”monkey”是不能被改变的,如果…

ThinkPHP 资源路由的简单使用,restfull风格API

ThinkPHP 资源路由的简单使用,restfull风格API 一、资源控制器二、资源控制器简单使用 一、资源控制器 资源控制器可以轻松的创建RESTFul资源控制器,可以通过命令行生成需要的资源控制器,例如生成index应用的TestR资源控制器使用&#xff1a…

cyclictest stress 工具 使用

工具介绍 1. Cyclictest 准确且重复地测量线程的预期唤醒时间与它实际唤醒的时间之间的差异,以提供有关系统延迟的统计数据。 它可以测量由硬件、固件和操作系统引起的实时系统延迟 2.stress是Linux的一个压力测试工具,可以对CPU、Memory、IO、磁盘进行…

【车载雷达信号处理】利用sinc函数实现扣点

针对信号处理流程中多次FFT输出的频谱结果,在特殊的场景下,可能存在针对某一特定频点的固定"虚警",所以针对某一个特定频点进行“扣点”的操作是常有的信号处理流程需求。不仅如此,针对最大能量值的扣点也能在不适合使用…

基于白冠鸡算法优化的BP神经网络(预测应用) - 附代码

基于白冠鸡算法优化的BP神经网络(预测应用) - 附代码 文章目录 基于白冠鸡算法优化的BP神经网络(预测应用) - 附代码1.数据介绍2.白冠鸡优化BP神经网络2.1 BP神经网络参数设置2.2 白冠鸡算法应用 4.测试结果:5.Matlab代…

【C++】SLT——Vector详解

本片要分享的是关于STL中Vector的内容,Vector的内容于string非常相似,只要会使用string那么学习Vector时会非常流畅。 目录 1.vector介绍 2.vector的简单实用 2.1.简单的无参构造 ​编辑2.2.简单带参构造 2.3.迭代器区间初始化 2.4.vector的遍历 …

C/C++ 个人笔记

仅供个人复习, C语言IO占位符表 %d十进制整数(int)%ldlong%lldlong long%uunsigned int%o八进制整型%x十六进制整数/字符串地址%c单个字符%s字符串%ffloat,默认保留6位%lfdouble%e科学计数法%g根据大小自动选取f或e格式,去掉无效0 转义符表…

C语言程序设计——小学生计算机辅助教学系统

题目:小学生计算机辅助教学系统 编写一个程序,帮助小学生学习乘法。然后判断学生输入的答案对错与否,按下列任务要求以循序渐进的方式分别编写对应的程序并调试。 任务1 程序首先随机产生两个1—10之间的正整数,在屏幕上打印出问题…

基于vue和element的脚手架【vue-element-admin 和vue-element-plus-admin 】

vue-element-admin vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现 介绍 | vue-element-adminA magical vue adminhttps://panjiachen.github.io/vue-element-admin-site/zh/guide/ vue-element-plus-admin vue-element-plus-admin 是一…

如何在Windows / Mac / iPhone / Android / Online上将MP4转换为MP3

如果只想保留MP4视频的音频轨道,则可以将MP4转换为MP3格式。 MP3是几乎所有设备,播放器和编辑器都支持的数字音频格式。无论您将MP4视频转换为MP3音频以进行脱机播放或进一步编辑,都可以提取音轨并保存为MP3格式。这是在不损失质量的情况下将…

图形化管理工具ossbrowser

文章目录 一、OSS介绍二、通过工具管理OSS三、安装四、使用-通过AK五、免责声明摘抄 一、OSS介绍 云对象存储OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)…

基于Spring Gateway路由判断器实现各种灰度发布场景

文章目录 1、灰度发布实现1.1 按随机用户的流量百分比实现灰度1.2 按人群划分实现的灰度1.2.1 通过Header信息实现灰度1.2.2 通过Query信息实现灰度1.2.3 通过RemoteAdd判断来源IP实现灰度 2、路由判断器2.1. After2.2. Before2.3. Between2.4. Cookie2.5. Header2.6. Host2.7.…

【算法刷题之哈希表篇(1)】

目录 1.哈希表基础理论2.leetcode-242. 有效的字母异位词(1)方法一:排序(2)方法二:哈希表 3.leetcode-349. 两个数组的交集(1)方法一:哈希表(2)方…

会员管理系统实战开发教程06-会员充值

我们上篇讲解了会员开卡的操作,有了会员卡之后日常就是给会员进行充值,充值的逻辑是对余额进行累加,而且要记录充值的情况。 1 创建充值记录表 打开控制台,点击号创建数据源 输入数据源名称充值记录 点击编辑添加字段 先添加…

【C进阶】深度剖析数据在内存中的存储

目录 一、数据类型的介绍 1.类型的意义: 2.类型的基本分类 二、整形在内存中的存储 1.原码 反码 补码 2.大小端介绍 3.练习 三、浮点型在内存中的存储 1.一个例子 2.浮点数存储规则 一、数据类型的介绍 前面我们已经学习了基本的内置类型以及他们所占存储…