Handwrite a service code to deploy "Vue3 + Ts background management system" to the test environment

 Early review 

Vue3 + TS automatically detects the online environment - version hot update reminder_Colorful Blog-CSDN Bloghttps://blog.csdn.net/m0_57904695/article /details/133245563?spm=1001.2014.3001.5501

Table of contents

Create a new server.js in the root directory:

Install:

run:

---

Simulate a scenario:

Today, the company's Ci Cd temporarily "shocked" and needed to temporarily connect to the local interface of a back-end partner. The front-end computer serves as the server, and the computer cannot be turned off or the screen is locked (otherwise others will not be able to access it). Submit to the gitlab repository and need to be updated simultaneously

Solution: Express + PM2 + script hot update

Create a new server.js in the root directory:

// 使用代理，解决接口不通过服务报错的问题
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加设置的端口 [重要]

Install:

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

Submit the warehouse to automatically update the address (the last line of the server.js file above is also what others want to access). It is recommended to use the automated submission plug-in, which can detect code quality, vulnerabilities, formats, variable naming, etc. For details, refer to

Build Vue3 + VIte + Ts project from scratch - and integrate eslint, prettier, stylelint, husky, lint-staged, pinia, axios, loding, dynamic routing...-CSDN Blog

 If you don't use the submission plug-in here, you can manually package it (it will be updated as long as the dist changes). You need to pull other people's code from time to time, and then package and keep the link to the latest code. You can also write a script to let it run automatically!

run:

Now that the service has been created and the corresponding dependencies and pm2 process management have been installed, we try to run node server.js

In order to close the computer link and still be able to access it, we start the PM2 process:

ReferenceBasic use of pm2_Usage of pm2_Unknown architect's blog-CSDN blog 

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

pm2 delete all // 删除所有进程

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

The whole text is over, all codes are in the text.

 _____________________________________  Expected to see again  ____________________________________________