零、提前构建好Ngnix静态站点



一、准备目录（本地构建）

mkdir c2c-viz && cd c2c-viz
npm init -y
npm i react react-dom
npm i -D esbuild

把准备上传的tsx组件文件重命名为 后续使用的组建名.tsx ，此处以C2CLatencyViz.tsx为例，并放进当前目录；同时新建一个入口 main.tsx 与一个静态页面 index.html。

二、入口渲染文件

新建 main.tsx（用于把组件挂载到页面）：

// main.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import C2CLatencyViz from './C2CLatencyViz';

const el = document.getElementById('root');
if (el) {
  createRoot(el).render(<C2CLatencyViz />);
}

三、静态页面

新建 index.html（放一个挂载点，并引入打包后的 JS）：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Core-to-Core Latency Matrix</title>
  <meta http-equiv="Cache-Control" content="no-store" />
  <style>body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial}</style>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

四、打包

使用 esbuild 生成一个能直接在浏览器运行的单文件 bundle.js：

npx esbuild main.tsx \
  --bundle \
  --minify \
  --outfile=bundle.js \
  --platform=browser \
  --format=iife \
  --loader:.tsx=tsx --loader:.ts=ts \
  --jsx=automatic

产物应包含：index.html、bundle.js 两个文件。把需要链接的其他素材放置到同目录（与 index.html 同级）。

五、上传部署到服务器

把这三个文件上传到站点根目录：

/opt/1Panel/1panel/apps/openresty/openresty/www/sites/xxxx.com/index

最终该目录至少包含：

index.html
bundle.js