nuxt3项目打包部署到服务器后配置端口号和开启https

server/2025/1/24 12:21:07/

nuxt3打包后的项目部署相对于一般vite打包的静态文件部署要稍微麻烦一些,还有一个主要的问题是开发环境配置的.env环境变量在打包后部署时获取不到,具体的解决方案可以参考我之前文章 nuxt3项目打包后获取.env设置的环境变量无效的解决办法。
这里使用的方法是在部署时的项目根目录增加.env文件,并在server/index.mjs修改代码读取。网上搜索到的通过更改./server/chunks/_/nitro.mjs定义的port这种方法在现版本已不适用。

本文是只使用node的部署方案,未用nginx反向代理。

本次项目使用的主要依赖版本如下:

"node":"22.12.0",
"nuxt":"3.15.2",
"vue":"3.5.13",
"vue-router":"4.5.0"

部署项目的服务器版本为:

Windows Server 2022 Datacenter

我们先将项目执行打包,在成功打包后,会有一行代码提示:

✔ You can preview this build using node .output/server/index.mjs   

也就是说只要执行node .output/server/index.mjs,我们的项目就能跑起来了,执行后终端输出:

Listening on http://[::]:3000

可以看到默认使用的是http并且端口号是3000,那如何修改到使用https和目标端口号呢,这时需要打开.output/server/index.mjs文件,看看代码是如何执行的,主要是这段代码:

const cert = process.env.NITRO_SSL_CERT;
const key = process.env.NITRO_SSL_KEY;
const nitroApp = useNitroApp();
const server =cert && key? new Server({ key, cert }, toNodeListener(nitroApp.h3App)): new Server$1(toNodeListener(nitroApp.h3App));
const port = destr(process.env.NITRO_PORT || process.env.PORT) || 3e3;
const host = process.env.NITRO_HOST || process.env.HOST;
const path = process.env.NITRO_UNIX_SOCKET;
const listener = server.listen(path ? { path } : { port, host }, (err) => {if (err) {console.error(err);process.exit(1);}
const protocol = cert && key ? "https" : "http";

很明显,它都是通过环境变量来判断是开启http还是https,以及是否有定义端口号,那我们只需要这里定义的环境变量能正常获取就行了。

需要注意的是:开启https还需要提供相应的SSL/TLS证书

假如项目部署的根目录是:D:\server-project

  1. 先将.output下的全部文件复制到server-project文件夹下,然后新建ssl文件夹,将证书文件放入;
  2. 新建.env文件,定义环境变量,添加如下内容:
NITRO_PORT=443 //端口号
NITRO_SSL_KEY="./ssl/demo.key" //相对于根目录的路径
NITRO_SSL_CERT="./ssl/demo.crt" //相对于根目录的路径,也可以是.pem文件

结果如图:
在这里插入图片描述

  1. 修改server-project/server/index.mjs,修改处已加注释说明,全文如下:
import process from "node:process";
globalThis._importMeta_ = { url: import.meta.url, env: process.env };
import { Server as Server$1 } from "node:http";
import { Server } from "node:https";
import {t as toNodeListener,d as destr,u as useRuntimeConfig,a as trapUnhandledNodeErrors,s as setupGracefulShutdown,b as useNitroApp,
} from "./chunks/_/nitro.mjs";
import "node:crypto";
import "node:buffer";
import "node:fs";
import "node:url";
import "uuid";
import "node:path";
/*  新增加的代码--start */
import { resolve } from "node:path";
import { loadEnvFile } from "node:process";
import { readFileSync } from "node:fs";
loadEnvFile(resolve(process.cwd(), "./.env"));
/*  新增加的代码--end */
const cert = process.env.NITRO_SSL_CERT;
const key = process.env.NITRO_SSL_KEY;
const nitroApp = useNitroApp();/* server更改前const server =cert && key? new Server({ key, cert }, toNodeListener(nitroApp.h3App)): new Server$1(toNodeListener(nitroApp.h3App));
*/// server修改后,主要是将cert和key的值读取后返回给Server
const server =cert && key? new Server({key: readFileSync(resolve(process.cwd(), key)),cert: readFileSync(resolve(process.cwd(), cert)),},toNodeListener(nitroApp.h3App)): new Server$1(toNodeListener(nitroApp.h3App));
// 修改代码结束
const port = destr(process.env.NITRO_PORT || process.env.PORT) || 3e3;
const host = process.env.NITRO_HOST || process.env.HOST;
const path = process.env.NITRO_UNIX_SOCKET;
const listener = server.listen(path ? { path } : { port, host }, (err) => {if (err) {console.error(err);process.exit(1);}const protocol = cert && key ? "https" : "http";const addressInfo = listener.address();if (typeof addressInfo === "string") {console.log(`Listening on unix socket ${addressInfo}`);return;}const baseURL = (useRuntimeConfig().app.baseURL || "").replace(/\/$/, "");const url = `${protocol}://${addressInfo.family === "IPv6"? `[${addressInfo.address}]`: addressInfo.address}:${addressInfo.port}${baseURL}`;console.log(`Listening on ${url}`);
});
trapUnhandledNodeErrors();
setupGracefulShutdown(listener, nitroApp);
const nodeServer = {};export { nodeServer as default };
//# sourceMappingURL=index.mjs.map

代码修改完成后,在server-project目录下执行:

node ./server/index.mjs

到这一步,输入域名后网站就能正常访问了。

本次项目使用的是pm2部署,那么就还需要在server-project目录下新建一个pm2的配置文件ecosystem.config.json(也可以是ecosystem.config.js)和logs文件夹,这个按自己的部署需求配置就可以了,我的配置如下:

{"apps": [{"script": "./server/index.mjs","name": "web","instances": 1,"error_file": "./logs/err.log","out_file": "./logs/out.log","log_date_format": "YYYY-MM-DD HH:mm:ss","log_type": "json","ignore_watch": ["node_modules", "ssl", "logs"],"port": 443}]
}

配置完成后执行:

pm2 start ecosystem.config.json

对于NITRO_HOST这个环境变量不建议设置,让其自行分配,除非是必须,经过自己的实测,如果设置了这个值,比如:127.0.0.1,在服务器的浏览器上输入https://127.0.0.1,可以正常访问,但在外网通过域名则不能访问。

这种方法也有弊端,就是如果每打包一次,就得按以上方法修改一次,有些繁琐,如果有更好的方案,也欢迎大家多多推荐。


http://www.ppmy.cn/server/161014.html

相关文章

智能化加速标准和协议的更新并推动验证IP(VIP)在芯片设计中的更广泛应用

作者:Karthik Gopal, SmartDV Technologies亚洲区总经理 智权半导体科技(厦门)有限公司总经理 随着AI技术向边缘和端侧设备广泛渗透,芯片设计师不仅需要考虑在其设计中引入加速器,也在考虑采用速度更快和带宽更高的总…

99.10 金融难点通俗解释:投资资本回报率(ROIC)

目录 0. 承前1. 简述2. 比喻:养鸡赚钱2.1 第一步:分清投入2.2 第二步:开始经营2.3 第三步:计算收益2.4 第四步:计算ROIC 3. 生活中的例子3.1 高效率经营3.2 普通经营3.3 低效率经营 4. 小朋友要注意4.1 ROIC看什么4.2 …

Java数据结构 (从0构建链表(LinkedList))

在本文中,我们将基于 MySingleLinkedList 类,深入探讨单链表的实现,包括创建、插入、删除等核心操作,同时分享完整的代码示例。单链表是一种灵活的数据结构,适用于处理需要频繁插入和删除操作的场景,例如实…

【mybatis】一对多查询

书接上文,当多表查询,为了一个查询出全部,使用了GROUP_CONCAT和json_object函数,但是当数据量过大时,需要更改mysql的数据库配置,调大group_concat_max_len配置参数。 但是项目中可能存在线上数据库不让重…

高质量编程 性能优化学习笔记

高质量编程 & 性能优化学习笔记 目录 高质量编程 编程原则编码规范 性能优化 性能优化建议实战pprof性能调优案例 自动内存管理 常见内存管理方式 Go内存管理及优化 Go内存分配Go内存管理优化 编译器和静态分析 编译器静态分析 Go编译器优化 函数内联逃逸分析…

深入探索 Nginx 的高级用法:解锁 Web 服务器的强大潜能

在当下互联网技术飞速发展的浪潮中,Nginx 凭借其轻量级、高性能的特性,在 Web 服务器和反向代理服务器领域脱颖而出,成为众多开发者和运维工程师的得力工具。它不仅能高效处理静态资源,在负载均衡、反向代理等方面也表现出色。然而…

深入探索Python人脸识别技术:从原理到实践

一、引言在当今数字化时代,人脸识别技术已然成为了计算机视觉领域的璀璨明星,广泛且深入地融入到我们生活的各个角落。从门禁系统的安全守护,到金融支付的便捷认证,再到安防监控的敏锐洞察,它的身影无处不在,以其高效、精准的特性,极大地提升了我们生活的便利性与安全性…

靠右行驶数学建模分析(2014MCM美赛A题)

笔记 题目 要求分析: 比较规则的性能,分为light和heavy两种情况,性能指的是 a.流量与安全 b. 速度限制等分析左侧驾驶分析智能系统 论文 参考论文 两类规则分析 靠右行驶(第一条)2. 无限制(去掉了第一条…