手写一个服务代码将《Vue3 + Ts 后台管理系统》部署测试环境

前期回顾

模拟一个场景：

今天公司的Ci Cd，临时”休克了“，需要暂时链接后端某小伙伴本机接口，前端电脑作为服务器，且不能关闭电脑或锁屏，（不然别人就访问不了）。提交gitlab仓库，需要同步更新

解决方式：Express + PM2 + 脚本热更新

根目录新建 server.js：

// 使用代理，解决接口不通过服务报错的问题
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

// 创建一个 Express 应用
const app = express();

// 设置 API 代理
app.use(
	'/api',
	createProxyMiddleware({
		target: 'http://ccc:8091/', // 这里需要替换为你的服务器地址或后端人员本机ip [重要]
		changeOrigin: true,
		pathRewrite: {
			'^/api': '', // 如果 API 服务器的路径不需要 '/api' 前缀，就用这个规则去掉
		},
	})
);

// 设置静态文件服务，将 dist 目录作为静态资源目录
app.use(express.static('dist'));

// 启动 Express 服务器
app.listen(3000, () => {
	console.log('服务器启动成功！');
});

// 自动打开浏览器
const { exec } = require('child_process');
exec('start http://xxx:3000');// 自己ip加设置的端口 [重要]

安装：

pnpm install express http-proxy-middleware
pnpm install -g pm2

提交仓库自动更新地址（上面server.js文件最后一行，也是别人要访问的），这里推荐使用自动化提交插件，可以检测代码质量、漏洞、格式、变量命名等详情参考

从零搭建 Vue3 + VIte + Ts 项目 —— 并集成eslint 、prettier、stylelint、husky、lint-staged、pinia、axios、loding、动态路由…-CSDN博客

这里如果没有使用提交插件手动打包也可以，（只要dist变动就会更新）你需要时常拉取别人的代码，然后打包保持链接是最新的代码，也可以写一个脚本让其自动跑！

运行：

现在已经新建了服务，也安装的对应的依赖及pm2 进程管理，我们尝试运行 node server.js

为了关闭电脑链接依旧可以访问，我们开启PM2进程：

参考pm2基本使用_pm2使用_不知名架构师的博客-CSDN博客

pm2 stop all // 停止所有的应用程序

pm2 delete all // 删除所有进程

pm2 start serve.js // 监控server.js文件

全文结束，所有代码都在文中。

_______________________________ 期待再见 _______________________________

手写一个服务代码将 《Vue3 + Ts 后台管理系统》部署测试环境

根目录新建 server.js：

安装：

运行：

猜你喜欢

手写一个服务代码将《Vue3 + Ts 后台管理系统》部署测试环境