「Vue3 + Ts バックグラウンド管理システム」をテスト環境に導入するためのサービスコードを手書きする

 早期レビュー 

Vue3 + TS はオンライン環境を自動的に検出します - バージョン ホット アップデート リマインダー_Colorful Blog-CSDN ブログhttps://blog.csdn.net/m0_57904695/article /details/133245563?spm =1001.2014.3001.5501

目次

ルート ディレクトリに新しいserver.jsを作成します。

インストール：

走る：

---

シナリオをシミュレートします。

今日、会社の 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文件

テキスト全体が終わり、すべてのコードがテキスト内にあります。

 _______________________________  期待再见  _______________________________