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

devtools/2025/1/23 16:11:44/

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/devtools/152927.html

相关文章

Java菜鸟养成计划(java基础)--java数据类型

数据类型 1、什么是数据类型?2、java中的数据类型有哪些?3、基本数据类型有哪些?3.1、布尔类型(boolean)3.2、字符类型3.3、整形(默认int)3.4、浮点型【默认double】小数3.5、基本数据类型之间的…

【力扣】2.两数相加

题目 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。 请你将两个数相加,并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外,这两个数都不会…

回归算法、聚类算法、决策树、随机森林、神经网络

这也太全了!回归算法、聚类算法、决策树、随机森林、神经网络、贝叶斯算法、支持向量机等十大机器学习算法一口气学完!_哔哩哔哩_bilibili 【线性回归、代价函数、损失函数】动画讲解_哔哩哔哩_bilibili 14分钟详解所有机器学习算法:…

基于单片机的智能家居控制系统设计及应用

摘要 : 智能家居控制系统包括对家电实现远距离控制和近距离控制的一种控制型系统,通过系统内的 TC35 模块对控制信息进行采集,并将这些控制信息发送到 STC89C52 模块中去,由单片机发出系统控制指令,从而实现家居家电的控制。 关键词 :单片机 ; 智能家居 ; 家居生活 ; 控…

第3天:阿里巴巴微服务解决方案概览

一、阿里巴巴微服务解决方案概述 阿里巴巴在微服务领域贡献了多个开源项目,形成了完整的微服务解决方案,广泛应用于分布式系统开发。其中,Spring Cloud Alibaba 是基于 Spring Cloud 构建的一站式微服务解决方案,集成了多个阿里巴…

BUUCTF_Web(October 2019 Twice SQL injection)

October 2019 Twice SQL injection 知识点: 二次注入: 当用户提交的恶意数据被存入数据库后,应用程序再把它读取出来用于生成新的SQL语句时,如果没有相应的安全措施,是有可能发生SQL注入的,这种注入就叫…

计算机网络 (55)流失存储音频/视频

一、定义与特点 定义:流式存储音频/视频是指经过压缩并存储在服务器上的多媒体文件,客户端可以通过互联网边下载边播放这些文件,也称为音频/视频点播。 特点: 边下载边播放:用户无需等待整个文件下载完成即可开始播放…

过年远控家里电脑打游戏,哪款远控软件最好用?

马上过年了,像小编这样的“网瘾少年”实在是放不下每天都在玩的PC游戏,但过年回家又不太可能背着高性能的PC(因为重),那么不如试试远程控制家里的电脑玩游戏。 现在市面上有不少远程控制软件,这些软件哪些…