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…

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节点才…

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

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

Qt之QDjango-db的简单使用

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

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

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

【Linux】Linux重要工具

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

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时,线性表为一个空表。 常见的线性表:顺序表,链表,栈和队列... 线性表在逻辑上是线性结构,可以说是连续的一条直线。但是在物理结构上…

红外热成像之无人机载荷

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

linux tty 终端

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

在 vscode + cmake + GNU 工具链的基础上配置 JLINK

安装 JLINK JLINK 官网链接 下载安装后找到安装路径下的可执行文件 将此路径添加到环境变量的 Path 中。 创建 JFlash 项目 打开 JFlash,选择新建项目 选择单片机型号 在弹出的窗口中搜索单片机 其他参数根据实际情况填写 新建完成: 接下来设置…

智能建筑时代的核心选择——基于SAIL-RK3576核心板的AI边缘计算网关方案

随着智能建筑技术的不断发展,建筑设备正日益向“智慧化”迈进。传统的建筑管理系统往往依赖中央服务器和云端平台进行数据处理和控制,但在实时监控、安防及能耗管理等关键环节,延迟和数据安全问题依然存在。此外,物联网设备数量激…

python列表如何不重复

python列表不重复的方法: python内置的set()方法可以去掉列表里面重复的元素,调用该方法就可以让python列表不重复了 a [23, 15, 15, 56, 89, 89, 56] a set(a) print(a) 运行结果如下:

【Redis】事务的概念及用法

事务的概念及用法 什么是事务事务的操作开启事务(MULTI)执行事务(EXEC)中止事务(DISCARD)为事务提供检查(WATCH)取消对key的监控(UNWATCH) 为什么Redis不支持…

两份PDF文档,如何比对差异,快速定位不同之处?

PDF文档比对是通过专门的工具或软件,自动检测两个PDF文件之间的差异,并以可视化的方式展示出来。这些差异可能包括文本内容的修改、图像的变化、表格数据的调整、格式的改变等。比对工具通常会标记出新增、删除或修改的部分,帮助用户快速定位…

Flutter:搜索页,搜索bar封装

view 使用内置的Chip简化布局 import package:chenyanzhenxuan/common/index.dart; import package:ducafe_ui_core/ducafe_ui_core.dart; import package:flutter/material.dart; import package:get/get.dart; import package:tdesign_flutter/tdesign_flutter.dart;import i…