Skip to content

Commit c713b57

Browse files
wqcstrongwqcstrong
authored
feat: support sub-path deployment (#106)
* support sub-path * fix debug button link * upgrade api * update build_docker action
1 parent 63026a8 commit c713b57

File tree

9 files changed

+76
-42
lines changed

9 files changed

+76
-42
lines changed

‎backend/go.mod

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module github.com/HuolalaTech/page-spy-web/backend
22

33
go 1.21
44

5-
require github.com/HuolalaTech/page-spy-api v1.3.1
5+
require github.com/HuolalaTech/page-spy-api v1.3.2
66

77
require (
88
github.com/golang-jwt/jwt v3.2.2+incompatible // indirect

‎backend/go.sum

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
github.com/HuolalaTech/page-spy-api v1.3.1 h1:DdoOgsFs/SwjIrcrc6N+cXDsFN213wVPixDzk4WKfX8=
22
github.com/HuolalaTech/page-spy-api v1.3.1/go.mod h1:njVR6tXPbDvvA/ecpLY5+9Pu43bOI5tnK+yscNdiMkU=
3+
github.com/HuolalaTech/page-spy-api v1.3.2-alpha.1 h1:giDGOOrqwKuT794PJGM+QUwWH2zSesQebOSsYTLQIXE=
4+
github.com/HuolalaTech/page-spy-api v1.3.2-alpha.1/go.mod h1:njVR6tXPbDvvA/ecpLY5+9Pu43bOI5tnK+yscNdiMkU=
5+
github.com/HuolalaTech/page-spy-api v1.3.2 h1:X+hP0Z0EThysgeCWyvfH/baSgL59kHqejcAwcCEBqmY=
6+
github.com/HuolalaTech/page-spy-api v1.3.2/go.mod h1:njVR6tXPbDvvA/ecpLY5+9Pu43bOI5tnK+yscNdiMkU=
37
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
48
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
59
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=

‎index.html

+48-24
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,54 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>PageSpy</title>
8+
<link rel="icon" href="/favicon.ico" />
9+
<link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
10+
<script>
11+
// Resolve the correct address from different deployment base paths.
12+
const base = location.pathname.endsWith('/')
13+
? location.pathname.slice(0, -1)
14+
: location.pathname;
15+
// https://exp.com => 'exp.com'
16+
// https://exp.com/ => 'exp.com'
17+
// https://exp.com/page-spy => 'exp.com/page-spy'
18+
// https://exp.com/page-spy/ => 'exp.com/page-spy'
19+
window.DEPLOY_BASE_PATH = location.host + base;
320

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>PageSpy</title>
9-
<link rel="icon" href="/favicon.ico">
10-
<link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg">
11-
<script src="/source-map/source-map.min.js"></script>
12-
<script>
13-
const mappingWasmUrl = new URL('/source-map/mappings.wasm', window.location.href).toString()
14-
sourceMap.SourceMapConsumer.initialize({
15-
"lib/mappings.wasm": mappingWasmUrl
16-
});
17-
</script>
18-
<script src="/shiki/dist/index.jsdelivr.iife.js"></script>
19-
<script>
20-
const shikiURL = new URL('/shiki', window.location.origin).toString()
21-
window.shiki.setCDN(shikiURL)
22-
</script>
23-
</head>
21+
const sourceBaseUrl = `${location.protocol}//${window.DEPLOY_BASE_PATH}`;
2422

25-
<body>
26-
<div id="root"></div>
27-
<script src="/src/main.tsx" type="module"></script>
28-
</body>
23+
const loadScript = (src, cb) => {
24+
const script = document.createElement('script');
25+
script.src = src;
26+
script.onload = () => {
27+
cb && cb();
28+
};
29+
document.head.appendChild(script);
30+
};
2931

32+
// source-map
33+
const sourcemapSDK = sourceBaseUrl + '/source-map/source-map.min.js';
34+
const mappingWasmUrl = sourceBaseUrl + '/source-map/mappings.wasm';
35+
loadScript(sourcemapSDK, () => {
36+
window.sourceMap.SourceMapConsumer.initialize({
37+
'lib/mappings.wasm': mappingWasmUrl,
38+
});
39+
});
40+
41+
// shiki
42+
const shikiSDK = sourceBaseUrl + '/shiki/dist/index.jsdelivr.iife.js';
43+
const shikiCDN = sourceBaseUrl + '/shiki';
44+
loadScript(shikiSDK, () => {
45+
window.shiki.setCDN(shikiCDN);
46+
});
47+
</script>
48+
</head>
49+
50+
<body>
51+
<div id="root"></div>
52+
<script src="/src/main.tsx" type="module"></script>
53+
</body>
3054
</html>

‎src/App.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
import { ConfigProvider } from 'antd';
22
import React from 'react';
3-
import { BrowserRouter, HashRouter } from 'react-router-dom';
3+
import { HashRouter } from 'react-router-dom';
44
import RouteConfig from './routes/config';
55
import zh from 'antd/es/locale/zh_CN';
66
import en from 'antd/es/locale/en_US';
77
import { useLanguage } from './utils/useLanguage';
8-
import { isDoc } from './utils/constants';
98
import { ErrorBoundary } from './components/ErrorBoundary';
109

11-
// const basename = isDoc ? '/page-spy-web' : '/';
12-
const basename = '/';
13-
1410
export const App = () => {
1511
const [lang] = useLanguage();
1612

1713
return (
1814
<React.StrictMode>
19-
<BrowserRouter basename={basename}>
15+
<HashRouter>
2016
<ErrorBoundary>
2117
<ConfigProvider
2218
locale={lang === 'zh' ? zh : en}
@@ -30,7 +26,7 @@ export const App = () => {
3026
<RouteConfig />
3127
</ConfigProvider>
3228
</ErrorBoundary>
33-
</BrowserRouter>
29+
</HashRouter>
3430
</React.StrictMode>
3531
);
3632
};

‎src/apis/request.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { InvokeParams, request } from '@huolala-tech/request';
33
import { RequestFailed } from './RequestFailed';
44

55
export const API_BASE_URL =
6-
import.meta.env.VITE_API_BASE || window.location.host;
6+
import.meta.env.VITE_API_BASE || window.DEPLOY_BASE_PATH;
77

88
export interface Options extends Omit<InvokeParams, 'method' | 'url' | 'data'> {
99
data?: unknown;

‎src/components/InjectSDK/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { CodeBlock } from '../CodeBlock';
55
import React from 'react';
66
import './index.less';
77
import { Link } from 'react-router-dom';
8+
import { resolveProtocol } from '@/utils';
89

910
export const InjectSDKModal = ({
1011
children,
@@ -17,7 +18,9 @@ export const InjectSDKModal = ({
1718
return [
1819
{
1920
title: t('inject.load-script'),
20-
code: `<script crossorigin="anonymous" src="${window.location.origin}/page-spy/index.min.js"></script>`,
21+
code: `<script crossorigin="anonymous" src="${resolveProtocol()[0]}${
22+
window.DEPLOY_BASE_PATH
23+
}/page-spy/index.min.js"></script>`,
2124
},
2225
{
2326
title: (

‎src/pages/RoomList/index.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import clsx from 'clsx';
1818
import { PropsWithChildren, useCallback, useMemo, useState } from 'react';
1919
import { useTranslation } from 'react-i18next';
2020
import './index.less';
21+
import { Link } from 'react-router-dom';
2122

2223
const { Title } = Typography;
2324
const { Option } = Select;
@@ -188,14 +189,18 @@ export const RoomList = () => {
188189
pointerEvents: !client ? 'none' : 'auto',
189190
}}
190191
shape="round"
191-
onClick={() => {
192-
if (!client) return;
193-
window.open(
194-
`/devtools?version=${name}&address=${address}`,
195-
);
196-
}}
197192
>
198-
{t('common.debug')}
193+
{!client ? (
194+
t('common.debug')
195+
) : (
196+
<Link
197+
to={`/devtools?version=${name}&address=${address}`}
198+
target="_blank"
199+
style={{ display: 'block' }}
200+
>
201+
{t('common.debug')}
202+
</Link>
203+
)}
199204
</Button>
200205
</div>
201206
</Tooltip>

‎src/types/env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ interface ImportMeta {
1515
interface Window {
1616
sourceMap: typeof import('source-map');
1717
shiki: typeof import('shiki');
18+
// Resolved in /index.html
19+
DEPLOY_BASE_PATH: string;
1820
}
1921

2022
interface OptionName {

‎vite.config.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default ({ mode, command }) => {
99
const isProd = command === 'build';
1010

1111
return defineConfig({
12-
base: buildDoc ? './' : '/',
12+
base: './',
1313
build: {
1414
target: ['chrome100'],
1515
sourcemap: isProd ? 'hidden' : true,

0 commit comments

Comments
 (0)