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

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.mzph.cn/bicheng/68823.shtml

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

相关文章

如何使用CRM数据分析和洞察来支持业务决策和市场营销?

如何使用CRM数据分析和洞察来支持业务决策和市场营销? 大家好!今天咱们聊聊一个特别重要的话题——如何利用客户关系管理(CRM)系统中的数据进行分析与洞察能够帮助我们做出更好的业务决策以及提升市场营销效果。其实啊&#xff0…

关于linux的ld.so.conf.d

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github:codetoys,所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的,可以在任何平台上使用。 源码指引:github源…

STM32-CAN总线

1.CAN总线简介 CAN总线是由BOSCH公司开发的一种简洁易用、传输速度快、易扩展、可靠性高的串行通信总线 2.CAN总线特征 两根通信线(CAN_H、CAN_L),线路少,无需共地差分信号通信(相对的是单端信号)&#…

在线宠物用品|基于vue的在线宠物用品交易网站(源码+数据库+文档)

|在线宠物用品交易网站 目录 基于springbootvue的在线宠物用品交易网站 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:✌️大厂码农|毕设布道师&am…

StarRocks 怎么让特定的SQL路由到FE master节点的

背景 本文基于 StarRocks 3.1.7 大家都知道对于Starrocks来说 FE 是分 master和follower的,而只有master节点才能对元数据进行写操作。但是为什么呢?哪里有体现呢? 这其中的原因在网上是搜不到的,所以大家只知道只有master节点才…

JavaScript语言的正则表达式

JavaScript语言的正则表达式详解 正则表达式(Regular Expression,简称Regex或RegExp)是一种强大的文本处理工具,可以在字符串中执行模式匹配和替换操作。在JavaScript中,正则表达式是处理字符串时不可或缺的部分&…

Android SystemUI——快捷面板的创建(十四)

上一篇文章介绍了快捷面板界面 QSFragment 的创建流程,这里我们继续介绍快捷按键 QSTile 和管理 QSTile 生命周期和服务注册的 QSTileHost。 一、QSTileHost初始化 Android 9.0 以及之前的版本,实例化 QSTileHost 类是在 StatusBar 的 makeStatusBarView() 方法中。 1、Sta…

AI时代下 | 通义灵码冲刺备战求职季

AI时代下 | 通义灵码冲刺备战求职季 什么是通义灵码使用智能编程助手备战求职靠谱吗体验心得 AI时代下,备战求职季有了不一样的方法,使用通义灵码冲刺备战求职季,会有什么样的体验? 什么是通义灵码 在开始话题之前,首…

Qt之QDjango-db的简单使用

QDjango是一款由C编写、依托于Qt库的Web开发框架,其设计理念受到了广受欢迎的Python框架Django的影响。这个项目旨在提供一个高效、灵活且易于使用的工具集,帮助开发者构建高质量的Web应用。其项目地址: https://gitcode.com/gh_mirrors/qd/qdjango&…

冯诺依曼架构和哈佛架构的主要区别?

冯诺依曼架构(Von Neumann Architecture)和哈佛架构(Harvard Architecture)是两种计算机体系结构,它们在存储器组织、指令处理和数据存取等方面有明显的不同。以下是它们的主要区别: 1.存储器结构 冯诺依曼…

NoETL | 数据虚拟化如何在数据不移动的情况下实现媲美物理移动的实时交付?

在我们之前的文章中,我们回顾了Denodo在逻辑数据仓库和逻辑数据湖场景中所使用的主要优化技术(具体内容请参阅之前的文章)。 数据架构 | 逻辑数据仓库与物理数据仓库性能对比_物理数仓、逻辑数仓-CSDN博客文章浏览阅读1.5k次,点赞…

【Linux】Linux重要工具

Linux中一切皆文件💓💓💓 目录 ✨说在前面 🍋知识点一:Linux软件包管理器yum •🌰1. 什么是软件包 •🌰2. 查看软件包 •🌰3. 如何安装、卸载软件 🍋知识点二&#…

JS通过ASCII码值实现随机字符串的生成(可指定长度以及解决首位不出现数值)

在之前写过一篇“JS实现随机生成字符串(可指定长度)”,当时写的过于简单和传统,比较粗放。此次针对此问题,对随机生成字符串的功能进行优化处理,对随机取到的字符都通过程序自动来完成。 在写之前&#xff…

K8S-Pod资源清单的编写,资源的增删改查,镜像的下载策略

1. Pod资源清单的编写 1.1 Pod运行单个容器的资源清单 ##创建工作目录 mkdir -p /root/manifests/pods && cd /root/manifests/pods vim 01-nginx.yaml ##指定api版本 apiVersion: v1 ##指定资源类型 kind: Pod ##指定元数据 metadata:##指定名称name: myweb ##用户…

【C++】在线五子棋对战项目网页版

目录 1.Websocket 1.1.Websocket的简单认识 1.2.什么是轮询呢? 1.3.websocket协议切换过程 1.4.websocketpp库常用接口认识 1.5.websocketpp库搭建服务器流程 1.6.websocketpp库搭建服务器 2.mysqlclient库-接口认识 3.项目模块的划分: 4.项目…

pytest+playwright落地实战大纲

前言 很久没有更新博客,是因为在梳理制作Playwright测试框架实战相关的课程内容。现在课程已经完结,开个帖子介绍下这门课程(硬广, o(〃^▽^〃)o) 课程放在CSDN学习频道, 欢迎关注~ PyTestPl…

数据结构-ArrayList和顺序表

1.线性表 线性表是n个具有相同类型的数据元素所组成的有限序列,当n0时,线性表为一个空表。 常见的线性表:顺序表,链表,栈和队列... 线性表在逻辑上是线性结构,可以说是连续的一条直线。但是在物理结构上…

红外热成像之无人机载荷

电力巡检 相较于传统的人工电力巡线方式,无人机巡检能够在高空对人工难以达到或无法检测的设备进行检测,实现了电子化、信息化、智能化巡检,可以提高巡检的工作效率和应急抢险水平。 森林防火 无人机搭载红外光电系统能在森林高空进行全天候监…

Typescript新特性关键字readyonly详细解读

readonly修饰符:首先是一个关键字,对类中的属性成员进行修饰,修饰后,该属性成员,就不能在外部被随意的修改了 一 构造函数中,可以对只读的属性成员的数据进行修改 (()>{//定义一个类型class Person {/…

linux tty 终端

linux tty 终端 一、终端二、终端的类型1、虚拟终端2、伪终端 pty3、串口终端4、控制终端 三、内核中的终端1、open2、write3、read1. 读取数据2. 数据返回3. 常见的 termios 四、编程实验 作者: baron 个人博客: baron-z.cn 基于网站原因csdn上面的图片有压缩, 如果不是很清楚…