【前端】NodeJS 部署到 Window 并以 EXE 文件运行

前言

前面介绍了 NodeJs 服务器连接数据库 的基本操作,为了满足企业人可以便捷地使用,不必深入理解源代码以及复杂的部署,为此将客户端和服务端打包在一起,通过 Windows 可执行文件来运行项目。

基本思路

利用 pkg 来打包服务端的操作来打包部署客户端以及服务端。

基本使用

安装打包工具

安装服务端的打包工具 pkg

pnpm install -g pkg

配置打包工具

在项目包配置文件里面,配置 pkg 的基本信息:
package.json

{
	...
	"main": "server.js",
	"bin": "server.js",
	"pkg": {
	    "assets": [ 
	      "dist/**/*",
		  "node_modules/.pnpm/registry.npmmirror.com+@azure+identity@3.4.1/node_modules/open/xdg-open" 
	    ],
	    "targets": [ "node16-win-x64" ],
	    "outputPath": "dist"
	},
	"dependencies": {
		"cors": "^2.8.5",
	    "express": "^4.18.2",
	    "nodemon": "^3.0.2",
	    "tedious": "^16.6.1",
	    ...
	}
}

bin:需要被打包的脚本,即服务端 server.js 脚本文件;
pkg.assets:配置需要打包的资源;
pkg.targets:配置需要打包成的执行文件的平台;
pkg.outputPath:配置需要打包生成执行文件的输出目录;
dependencies:服务端需要用到的依赖项;
main:主模块入口文件;

打包客户端代码

打包客户端代码,会生成到 dist 目录下:

npm run build

服务端配置网站

利用服务端配置网站后,也不会存在跨域的问题,如果需要联动调试的话,也可以进行调试,只不过可能就需要设置一下跨域问题:

const express = require('express');
const path = require('path');
const app= express();
const port = 3000;

// 配置客户端打包页面的访问目录
app.use(express.static(path.join(__dirname, 'dist')));

var server = app.listen(port, () => {
    var host = server.address().address;
    console.info(`http://${host}:${port} 服务器启动成功`);
})

配套项目地址

hjhcos / toptech-node-server,请修改文件 server.js 的数据库配置

效果视频

NodeJS服务端打包

### 部署智能体至自定义前端页面 为了将智能体部署到自定义前端页面,通常涉及几个关键技术环节:选择合适的智能体框架、配置服务器环境以及集成必要的通信接口。具体操作如下: #### 1. 准备工作 确保拥有一个支持Node.js运行环境的服务器实例,在本地环境中可以利用Docker容器简化安装过程[^1]。 #### 2. 安装依赖库和服务端程序 使用npm或yarn管理项目所需的JavaScript包,执行命令`npm install`下载所有必需项;接着设置好Express或其他HTTP中间件作为后端支撑平台。 ```bash # 初始化一个新的nodejs应用程序 npm init -y # 添加express web framework和其他必要模块 npm install express body-parser cors ws ``` #### 3. 构建RESTful API 或 WebSocket 接口 创建用于接收来自客户端请求的服务端逻辑处理函数,并通过WebSocket实现实时双向通讯功能。 ```javascript const express = require('express'); const { createServer } = require('http'); const WebSocket = require('ws'); // 创建 Express 应用程序 let app = express(); app.use(express.json()); // 启动 HTTP Server 并挂载 WebSocket 支持 let server = createServer(app); let wss = new WebSocket.Server({ server }); wss.on('connection', (ws) => { console.log('新连接建立...'); // 处理消息事件 ws.on('message', function incoming(message) { console.log(`收到消息: ${message}`); // 发送响应给客户端 ws.send(JSON.stringify({ type: 'response', content: `已接收到您的信息 "${message}"`, })); }); }); server.listen(8080, () => { console.log('监听端口 8080...'); }); ``` #### 4. 嵌入智能交互组件于HTML文件中 在目标网页内部引入WebSockets Client Library并与上述搭建好的服务端保持持久化链接状态,从而允许用户输入查询并通过AJAX调用来获取返回的结果数据。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chatbot Demo</title> <script src="/socket.io/socket.io.js"></script> <style> /* 自定义样式 */ </style> </head> <body> <div id="chatbox-container"> <!-- 对话框 --> </div> <input type="text" placeholder="请输入..." id="user-input"/> <button onclick="sendMessage()">发送</button> <script> var socket; function connectToSocket() { const url = window.location.protocol === "https:" ? "wss://" : "ws://"; socket = io(url + location.host); socket.on('connect', ()=>{ console.log("成功连接"); }); socket.on('response', ({content})=>{ displayMessage(content); }); } function sendMessage(){ let userInput=document.getElementById('user-input').value; document.getElementById('user-input').value=''; if(userInput){ displayMessage(`您说: ${userInput}`,true); socket.emit('message', JSON.stringify({type:'request',content:userInput})); } } function displayMessage(text,isUser=false){ var chatBoxContainer = document.getElementById('chatbox-container'); var messageElement = document.createElement('p'); messageElement.textContent=text; isUser?messageElement.classList.add('user-message'):null; chatBoxContainer.appendChild(messageElement); } window.onload=()=>{ connectToSocket(); }; </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hjhcos

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值