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

🕗 发布于 2025-01-21 08:00 nuxt3 vue3 前端

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

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

"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

先将.output下的全部文件复制到server-project文件夹下，然后新建ssl文件夹，将证书文件放入；
新建.env文件，定义环境变量，添加如下内容：

NITRO_PORT=443 //端口号
NITRO_SSL_KEY="./ssl/demo.key" //相对于根目录的路径
NITRO_SSL_CERT="./ssl/demo.crt" //相对于根目录的路径，也可以是.pem文件

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

修改./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和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
    }
  ]
}

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

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

原文地址：https://blog.csdn.net/Mr_WangGeGe/article/details/145264447

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：大模型GUI系列论文阅读 DAY2：《ScreenAgent：一种基于视觉语言模型的计算机控制代理》
下一篇：leetcode hot 100 -搜索二维矩阵

[操作系统] 进程的调度
CPU内有多个寄存器，每个寄存器作用都不同寄存器就是CPU内部的临时空间，存放正在运行的进程的临时数据寄存器不包含寄存器内的数据，寄存器只是临时空间！比如说当计算1 + 1时，两个1单独存放在不同的寄
阅读更多2025-01-21
MS81878运算放大器可P2P兼容OPA188/ADA4077-1
其工作电压可以在单电源下从4V到36V或者双电源下从±2V到±18V。可兼容OPA188/OPA2188/OPA4188/ADA4077-1/ADA4077-2/ADA4077-4。该器件具有宽工作电
阅读更多2025-01-21
Trimble三维激光扫描-地下公共设施维护的新途径【沪敖3D】
通过使用三维激光扫描技术，改变了地下公共设施未来维护和维修工作的方式，显著提高了效率！
阅读更多2025-01-21
LeetCode hot 力扣热题100 排序链表
对拆分后的两部分链表分别递归调用 sortList，直到链表被拆分为单个节点（此时链表自然是有序的）。• 最终 [2 -> 4] 和 [1 -> 3] 合并为 [1 -> 2 -&g
阅读更多2025-01-21
第一讲方程组的几何解释——以列向量线性组合的角度看方程组
第一讲方程组的几何解释——以列向量线性组合的角度看方程组
阅读更多2025-01-21
AI刷题-病毒在封闭空间中的传播时间
以后我想试着一篇博客就写一道题解，尽可能的地把题解思路讲清楚（ps：因为我昨天看之前写的题解的时候有点云里雾里，这就违背我写题解的初衷了）
阅读更多2025-01-21
网络编程 | UDP组播通信
组播是介于单播与广播之间，在一个局域网内，将某些主机添加到组中，并设置一个组地址。将数据发送到组播地址时，加入到该组的所有主机都能接收到数据。组播是主机间一对多的通信模式，组播是一种允许一个或多个组
阅读更多2025-01-21
创建第一个GUI程序
Python 是一种非常强大的编程语言。它自带了内置的 tkinter 模块。我们只需几行代码（准确来说是四行）就可以构建出我们的第一个 Python 图形用户界面（GUI）。
阅读更多2025-01-21
PT8M2302 触控 A/D 型 8-Bit MCU
PT8M2302 是一款可多次编程（MTP）A/D 型 8 位 MCU，其包括 2K*16bit MTP ROM、256*8bit SRAM、ADC、PWM、Touch 等功能，具有高性能精简指令集、
阅读更多2025-01-21
记一次虚机上传过慢问题排查
最近线上虚机有个特殊的用户反馈，用户反馈虚机从A服务器下载文件特别慢，于是scpA服务器数据到本地client，发现只有几十K的流量。当时第一反应怀疑是虚机负载压力比较大，但是查看虚机IO以及负载都很
阅读更多2025-01-21

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

相关文章