记录Nuxt 3 官网项目的一次部署

本来以为就是一次简单的部署,之前也是部署过几次nuxt项目了,所以,并没有要记录的想法。但是过程出现了很多问题,最后考虑还是写下来吧。留个记录(完整的配置部署过程)

这里我将要说明两种部署方式以供选择,直接开始...

一、工程相关

由于官网内容较少,无需单独运营,而且给的时间也比较少,故而,没有后端接口,没有后台管理,无需跟后端进行接口交互,静态资源也都是在工程里面

1. 工程配置 -- package.json

平平无奇,最开始的时候,我连 "start": "nuxt start", 都没有加入

{"name": "my-nuxt-app","private": true,"type": "module","scripts": {"build": "nuxt build","dev": "nuxt dev","start": "nuxt start","generate": "nuxt generate","preview": "nuxt preview","postinstall": "nuxt prepare"},"dependencies": {"axios": "^1.6.8","nuxt": "^3.11.1","vue": "^3.4.21","vue-router": "^4.3.0"},"devDependencies": {"less": "^4.2.0"}
}

2.工程配置 -- nuxt-config.ts

网上有很多文章介绍这个nuxt.config 的相关配置,如何如何修改,如何如何部署,我这只介绍最简单、最少的配置来实现部署,如果想要学习,可以看看官方文档或者其他的问题,很多

这里没有配置server,所以默认都是在 3000 端口

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({devtools: {enabled: true},pages: true
})

二、开始部署

阿里云服务器 ubuntu 24

1.基础环境 -- node npm

云服务器使用的是和本地相同版本的 node-v18.20.3,尽量保持一致

// nodejs官网下载 node-v18.20.3-linu-x64.tar.xz
// ftp 上传到服务器 /usr/local/src/ // 解压
tar -xvf node-v18.20.3-linu-x64.tar.xz// 重命名
mv node-v18.20.3-linux-x64 nodejs// 软连接
npm: ln -s /usr/local/src/nodejs/bin/npm /usr/local/bin
ln -s /usr/local/src/nodejs/bin/node /usr/local/bin// 检查
npm -v
node -v

2.基础环境 -- pm2

利用pm2来启动nuxt项目,所以需要安装

// 安装
npm install -g pm2// 软连接
ln -s /usr/local/src/nodejs/bin/pm2 /usr/local/bin// 检查
pm2 -v

3.工程上传

我这里 将本地工程的所有文件压缩,上传到服务器

// 新建路径 /root/workspace/website/// 解压缩
unzip my-nuxt-app.zip// 进入文件夹
cd my-nuxt-app// 删除 pnpm-lock.yaml or npm-lock.yaml
rm -rf pnpm-lock.yaml// 删除 node_modules
rm -rf node_modules/// 安装依赖
pnpm install // npm install// 运行工程
npm run dev

能够看到工程已经运行在了 3000 端口 

问题来了,这样只是作为了一个前台进程运行,关闭了终端或命令行,进程就会被终止。

三、借助PM2 -- 第一种方式

前面已经安装了pm2,这里先说一下第一种方式,已经验证成功

// 进入工程根目录
cd /root/workspace/website/my-nuxt-app/// 执行 hll是pm2的实例名称,2 代表实例数量,用于负载均衡,如果-i 0或者-i max,则根据当前机器核数确定实例数目
pm2 -i 2 -n hll start ./node_modules/.bin/nuxt -- start// 查看
pm2 list// 保存
pm2 save

到这里,也就成功了,这就是我第一次的部署过程,nginx、https、自启动 放到后面 

参考了这篇文章 nuxt pm2使用、启动、问题解决方案_pm2启动nuxt-CSDN博客

四、借助PM2 -- 第二种方式

为什么会有第二种,其实都是一样的;原因是,第一次部署完成后,也能正常使用,但是服务器发生了迁移,系统还是ubuntu24,我还是按照第一次的操作,发现不行了

pm2 list

pm2 log hll

这个错误可能是由于几个原因造成的:

脚本损坏:nuxt 脚本可能已损坏。这可能是由于不正确的 npm 安装、网络问题或其他原因导致

环境差异:虽然不太可能,但您的服务器上的 shell 环境可能与脚本预期的不同

PM2 配置:PM2 启动脚本的方式可能不正确,导致无法正确解释 nuxt 脚本

重新安装依赖,发现没什么卵用

好...好...好...,我直接一个大跳,直接运行 node_modules/.bin/nuxt

什么情况啊,直接给 ssh 干掉了???报错找不到文件???

进入 node_modules/.bin

 

要解决这个问题,你可以尝试以下:

检查 nuxt 脚本内容
进入 node_modules/.bin/ 目录,检查 nuxt 文件的内容。这通常是一个指向 nuxt 包中某个可执行文件的符号链接或脚本。确保脚本中的路径和命令是正确的。

重新安装依赖
删除 node_modules 文件夹和 package-lock.json 文件(如果你使用的是 npm),然后重新运行 npm install

使用全局安装的 nuxt
如果你全局安装了 nuxt(通过 npm install -g nuxt),你可以尝试直接运行 nuxt 命令,而不是通过 node_modules/.bin/ 目录。

检查环境变量
确保 PATH 环境变量没有包含可能导致路径解析错误的条目。特别是,如果 PATH 中包含了一个名为 nuxt 的目录,这可能会干扰 Node.js 的模块解析。

使用 npm scripts
在 package.json 文件中定义一个 start 脚本,例如 "start": "nuxt start",然后通过 npm start 命令来启动你的 Nuxt 应用。这通常是一个更安全、更可移植的方法,因为它不会依赖于特定于项目的 node_modules/.bin/ 目录。

检查文件权限
确保 node_modules/.bin/nuxt 文件具有执行权限。你可以使用 chmod +x node_modules/.bin/nuxt 命令来添加执行权限。


这里采用  npm scripts

// package.json 加入start"start": "nuxt start",// 执行
pm2 start npm --name "my-nuxt-app" -- run start

到这里,完成部署

五、PM2自启动

创建 systemd 服务文件
在 /etc/systemd/system/ 目录下创建一个新的 systemd 服务文件,例如 pm2-my-nuxt-app.service

编辑服务文件
将以下内容添加到服务文件中(你可能需要根据你的实际情况进行调整):注意:替换 your-usernameyour-groupvX.X.X 和 /path/to/your/project/package.json 为你的实际值。

[Unit]  
Description=PM2 process manager  
After=syslog.target network.target  [Service]  
Type=simple  
User=your-username # 替换为你的用户名  
Group=your-group   # 替换为你的用户组名,通常与用户名相同  
Environment=PATH=/usr/bin:/usr/local/bin:/usr/sbin:/usr/local/sbin:/home/your-username/.nvm/versions/node/vX.X.X/bin:/home/your-username/.npm-global/bin  
Environment=NODE_ENV=production  
ExecStart=/usr/local/bin/pm2 start /path/to/your/project/package.json --name "my-nuxt-app"  
ExecStop=/usr/local/bin/pm2 stop my-nuxt-app  
ExecReload=/usr/local/bin/pm2 reload my-nuxt-app  
Restart=always  [Install]  
WantedBy=multi-user.target

重新加载 systemd 配置
运行 sudo systemctl daemon-reload 以重新加载 systemd 配置文件。

启用并启动服务

运行 sudo systemctl enable pm2-my-nuxt-app.service 和 sudo systemctl start pm2-my-nuxt-app.service 来启用并启动服务。

六、Nginx 配置

// 更新升级
apt-get update// 安装nginx
apt install nginx// 进入
cd /etc/ngxin/// 编辑 nginx.conf
vim nginx.conf

这里比较重要的点 user root 

user root;
worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;
include /etc/nginx/modules-enabled/*.conf;events {worker_connections 768;# multi_accept on;
}http {### Basic Settings##sendfile on;tcp_nopush on;types_hash_max_size 2048;# server_tokens off;# server_names_hash_bucket_size 64;# server_name_in_redirect off;include /etc/nginx/mime.types;default_type application/octet-stream;### SSL Settings##ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLEssl_prefer_server_ciphers on;### Logging Settings##access_log /var/log/nginx/access.log;### Gzip Settings##gzip on;# gzip_vary on;# gzip_proxied any;# gzip_comp_level 6;# gzip_buffers 16 8k;# gzip_http_version 1.1;# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;### Virtual Host Configs### include /etc/nginx/conf.d/*.conf;# include /etc/nginx/sites-enabled/server {listen    80;server_name    hetingtech.com;rewrite ^(.*) https://$server_name$1 permanent; # 这里重定向到https}server {listen       443 ssl;server_name  xxxx.com; # 域名或ip#charset koi8-r;#access_log  logs/host.access.logssl_certificate /root/workspace/website/hetingtech.com.pem;   # ָ证书ssl_certificate_key /root/workspace/website/hetingtech.com.key;  # ָ证书ssl_session_cache    shared:SSL:1m; # 开启缓存 1Mssl_session_timeout  5m; # 指定客户端可以重用会话参数的时间#ssl_protocols TLSv1.2 TLSv1.3;ssl_ciphers HIGH:!aNULL:!MD5; # 选择加密套件ssl_prefer_server_ciphers on; # 设置协商加密算法时,优先使用我们服务端的加密套件,而不是客户端浏览器的加密套件location / {proxy_buffer_size 4096k;proxy_buffers 4 4096k;# proxy_busy_buffers_size 64k;client_max_body_size 1000m;proxy_pass http://localhost:3000;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}
// 检查
nginx -t// 启动 nginx
systemctl start nginx// 检查
systemctl status nginx

七、阿里云

1.安全组规则修改

如果没有配置安全组,端口将无法访问

2.DNS域名解析配置

记录值修改为你的阿里云的公网ip

3. ICP备案

备案需要填写公司的信息,主体负责人需要生物验证,需要经过 阿里云APP 上传主体负责人的身份证,公司的运营执照,为了便于通过验证,上传的材料要直接拍照原件

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

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

相关文章

开源网安软件安全国产化替代解决方案亮相2024澳门万讯论坛

近日,2024万讯论坛在澳门成功举办。本次论坛由万讯电脑科技主办,旨在引进国内尖端科技厂商,提供全方位的信创解决方案,分享信创化过程中所面临的挑战及阶段性转换经验。开源网安作为拥有软件安全领域全链条产品的厂商,…

Analytical Model(分析模型)和Compact model(紧凑模型)有什么不同

Analytical Model(分析模型) 和 Compact Model(紧凑模型) 在电子工程和半导体物理领域有着不同的应用和特点: Analytical Model(分析模型): 理论基础:分析模型基于物理原理和数学公…

jeecg dictText字典值

前端列表的字典值回显,配置了数据字典后,在本地测试可以回显中文的数据, 但在线上服务器不能正常回显出来; 原因是在前端拿到records的列表值时可以拿到dictText的字典,但是线上服务器没有dictText的值; …

聚焦 Navicat 17 新特性 | 模型设计优化与创新

随着 Navicat 17 的正式发布,受到了广泛的关注和讨论。Navicat 产品力又一次大跃迁。新引入的特性显著增强了用户的数据库管理和数据分析体验,包括:模型设计与同步、数据字典、数据分析(data profiling)、用户体验、查…

共享门店模式:快速打造连锁实体店

在数字化浪潮的冲击下,许多线下实体店正面临前所未有的挑战。然而,在这个变革的时代,共享门店模式,也被称为“共享股东”,正以其独特的魅力,为实体店带来新的生机。 一、共享门店模式的崭新定义 共享门店…

​水经微图Web版1.8.0发布

让每一个人都有自己的地图! 水经微图(简称“微图”)新版已上线,在该版本中主要新增了注册登录功能,线与面图层新增矩形、圆或军标等绘制功能,以及其它功能的优化。 现在,为你分享一下本轮迭代…

PostgreSQL调优工具:PGTune

PostgreSQL调优工具:PGTune 1,PGTune网址 https://pgtune.leopard.in.ua/#/ 参数解释: DB Version:数据库版本 OS Type:操作系统 DB Type:数据库类型,一般默认即可 Total Memory (RAM)&#x…

巨详细Linux安装MySQL

巨详细Linux安装MySQL 1、查看是否有自带数据库或残留数据库信息1.1检查残留mysql1.2检查并删除残留mysql依赖1.3检查是否自带mariadb库 2、下载所需MySQL版本,上传至系统指定位置2.1创建目录2.2下载MySQL压缩包 3、安装MySQL3.1创建目录3.2解压mysql压缩包3.3安装解…

2 - 力扣高频 SQL 50 题(基础版)

2.寻找用户推荐人 考点: sql里面的不等于,不包含null -- null 用数字判断筛选不出来 select name from Customer where referee_id !2 OR referee_id IS NULL;

UML行为图-状态图

概述 创建 UML 状态图的目的是研究类、角色、子系统或组件的实时行为。状态图不仅可用于描述用户接口、设备控制器和其他具有反馈的子系统,还可用于描述在生命期中跨越多个不同性质阶段的被动对象的行为,在每一阶段该对象都有自己特殊的行为。 一、状态…

2024最全软件测试面试八股文(答案+文档+视频讲解)

Part1 1、你的测试职业发展是什么? 测试经验越多,测试能力越高。所以我的职业发展是需要时间积累的,一步步向着高级测试工程师奔去。而且我也有初步的职业规划,前3年积累测试经验,按如何做好测试工程师的要点去要求自…

Python-3.12.0文档解读-内置函数zip()详细说明+记忆策略+常用场景+巧妙用法+综合技巧

一个认为一切根源都是“自己不够强”的INTJ 个人主页:用哲学编程-CSDN博客专栏:每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 详细说明 基本用法 示例 特性 高级用法 注意事项 版本更新 示例代码 记忆策略…

UI的学习(一)

UI的学习(一) 文章目录 UI的学习(一)UIlabelUIButtonUIButton的两种形式UIButton的事件触发 UIView多个视图之间的关系 UIWindowUIViewController一个视图推出另一个视图 定时器和视图移动UISwitchUISlider和UIProgressSlid步进器与分栏控制器UITextFieldUIScrollView有关实现它…

个人笔记-随意记录

常见问题? 1.linux重启服务 端口被占用如何解决? 查看某个端口被占用的进程 netstat -tulnp | grep :23454 强制杀死进程 kill -9 1776 重启服务即可

解决Chat打开时Unable to load conversation 的问题

在开梯子的情况下打开chat依然很卡,这里选择edge的浏览器无痕模式(新建InPrivate窗口),在无痕窗口下打开chat就可以了。

python ---requests

python包管理工具 pip 若发现报错,则可以通过 -i 命令指定软件源 requests库安装 通过 pip ,如上 或通过 pycharm 搜索 requests ,并安装即可 下载成功的证明 requests库使用 模拟 http 重要参数如下 如何模拟发包 支持模拟各种 http meth…

SpringMVC:消息转换器

1. HttpMessageConvertor 简介 HttpMessageConverter是Spring MVC中非常重要的一个接口。翻译为:HTTP消息转换器。该接口下提供了很多实现类,不同的实现类有不同的转换方式。 转换器 如上图所示:HttpMessageConverter接口的可以将请求协议转…

基于ESP32-S3芯片的通用型无线模组方案,启明云端乐鑫一级代理商

随着物联网技术的飞速发展,智能设备正以前所未有的速度进入到我们的日常生活中,AIoT(人工智能物联网)已成为智能家居、智能设备、智能安防等领域的核心技术。 作为乐鑫一级代理商,基于ESP32-S3芯片,启明云…

科技云报道:走出“实验室”,GenAI迎来关键拐点

科技云报道原创。 对传统产业来说,GenAI是一场“哥白尼式的革命”,它改变了传统的业务模式,开启了人类与AI合作的新纪元。基于AI助手和大语言模型,企业能够实现智能运营的目标。 如果说,2022年是AI大模型元年&#x…

【全开源】Java AI绘画MJ绘画源码小程序APP公众号源码AI绘图

🎨 探索AI绘画的奥秘 一、引言:AI绘画的魅力 🌈 在这个数字化飞速发展的时代,AI绘画已经不再是遥不可及的梦想。通过源码小程序,我们可以轻松探索AI绘画的奥秘,感受科技与艺术的完美结合。今天&#xff0…