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.hqwc.cn/news/91793.html

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

相关文章

Python小知识 - 使用Python进行数据分析

使用Python进行数据分析 数据分析简介 数据分析,又称为信息分析,是指对数据进行综合处理、归纳提炼、概括总结的过程,是数据处理的第一步。 数据分析的目的是了解数据的内在规律,为数据挖掘,并应用于商业决策、科学研究…

FTP文件传输服务器

目录 一、FTP协议两种工作模式 二、FTP数据两种传输模式 三、FTP用户分类 四、VSFTP配置案例 4.1匿名开放模式 4.2本地用户模式 4.3虚拟用户模式 五、实验总结 一、FTP协议两种工作模式 主动模式: 1、客户端主动向ftp服务器发送控制连接,三次握手控制连接…

YOLOv5算法改进(10)— 替换主干网络之GhostNet

前言:Hello大家好,我是小哥谈。GhostNet是一种针对计算机视觉任务的深度神经网络架构,它于2020年由中国科学院大学的研究人员提出。GhostNet的设计目标是在保持高精度的同时,减少模型的计算和存储成本。GhostNet通过引入Ghost模块…

Jaeger的经典BUG原创

前端,笔者在使用Jaeger进行Trace监控的时候,当数据量增大到一定数量级时,出现了一次CPU暴增导致节点服务器挂了的经典案例,这里对案例进行一个简单的抽象,供大家参考: 首先通过pprof对耗时的函数进行定位&…

前端需要理解的性能优化知识

优化的目的是展示更快、交互响应快、页面无卡顿情况。 1 性能指标 2 分析方法 使用 ChromeDevTool 作为性能分析工具来观察页面性能情况。其中Network观察网络资源加载耗时及顺序,Performace观察页面渲染表现及JS执行情况,Lighthouse对网站进行整体评分…

智能电销机器人,主要体现的价值是什么

21世纪科技的迅速发展,人工智能逐渐走入大家的视线,越来越多的机器人出现在我们生活中。见的最多的有电销公司的智能语音机器人、在仓库拣货打包的机器人、商场店铺供娱乐对话的机器人。机器人活跃在各行各业中,降低了人工成本,代…

git在windows上安装

介绍git工具在windows上如何安装 git官网下载地址 1.1、下载 https://github.com/git-for-windows/git/releases/download/v2.36.0.windows.1/Git-2.36.0-64-bit.exe自行选择版本,这里我选择的是 Git-2.36.0-64-bit这个版本 1.2、安装 安装路径选择英文且不带空格…

金融帝国实验室(Capitalism Lab)官方正版游戏『2023秋季特卖』

「金融帝国实验室」(Capitalism Lab)Enlight 官方正版游戏「2023秋季特卖」 ■时间:2023.09.01~2023.10.15 ■游戏开发商:Enlight Software Ltd. 请您认准以下官方正版游戏购买链接:支持“支付宝&a…

ESB(Enterprise Service Bus,即企业服务总线)

以前用过部分功能,但是没有很好地去理解过。 ESB(Enterprise Service Bus,即企业服务总线)是传统中间件技术与XML、Web服务等技术结合的产物。ESB提供了网络中最基本的连接中枢,是构筑企业神经系统的必要元素。 企业服…

k8s etcd 简介

Etcd是CoreOS基于Raft协议开发的分布式key-value存储,可用于服务发现、共享配置以及一致性保障(如数据库选主、分布式锁等)。 如,Etcd也可以作为微服务的注册中心,比如SpringCloud也基于ETCD实现了注册中心功能&#…

导入excel数据给前端Echarts实现中国地图-类似热力图可视化

导入excel数据给前端Echarts实现中国地图-类似热力图可视化 程序文件: XinqiDaily/frontUtils-showSomeDatabaseonMapAboutChina/finalproject xin麒/XinQiUtilsOrDemo - 码云 - 开源中国 (gitee.com) https://gitee.com/flowers-bloom-is-the-sea/XinQiUtilsOr…

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

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