🐛 fix: add basePath to support subdirectory (lobehub#1179)

* 🔧 chore: test the base path * 🐛 fix: fix api base path * 🐛 fix: fix api base path * 🐛 fix: fix api base path * 🐛 fix: fix image base path * 🐛 fix: fix api base path * 🐛 fix: fix image base path * 🐛 fix: fix manifest.json * 🐛 fix: fix manifest.json * ✅ test: fix test * 🔧 chore: clean code * 🔧 chore: clean code * 📝 docs: update docs * 🐛 fix: fix api base path * ✅ test: fix test * 🐛 fix: fix image base path * 🐛 fix: fix image base path
weijihailanzhou · Feb 9, 2024 · 43e544a · 43e544a
1 parent 105e1a8
commit 43e544a
Show file tree

Hide file tree

Showing 22 changed files with 103 additions and 46 deletions.
diff --git a/docs/Deployment/Environment-Variable.md b/docs/Deployment/Environment-Variable.md
@@ -7,6 +7,7 @@ LobeChat provides additional configuration options during deployment, which can
 - [General Variables](#general-variables)
   - [`ACCESS_CODE`](#access_code)
   - [`ENABLE_OAUTH_SSO`](#enable_oauth_sso)
+  - [`NEXT_PUBLIC_BASE_PATH`](#next_public_base_path)
 - [Authentication Service Providers](#authentication-service-providers)
   - [Common Settings](#common-settings)
   - [Auth0](#auth0)
@@ -41,7 +42,14 @@ LobeChat provides additional configuration options during deployment, which can
 - Type: Optional
 - Description: Enable OAuth single sign-on (SSO) for LobeChat. Set to `1` to enable OAuth SSO. See [Authentication Service Providers](#authentication-service-providers) for more details.
 - Default: `-`
-- Example: `1` or `0`
+- Example: `1`
+
+### `NEXT_PUBLIC_BASE_PATH`
+
+- Type：Optional
+- Description：add `basePath` for LobeChat
+- Default: `-`
+- Example: `/test`
 
 ## Authentication Service Providers
 

diff --git a/docs/Deployment/Environment-Variable.zh-CN.md b/docs/Deployment/Environment-Variable.zh-CN.md
@@ -7,6 +7,7 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 - [通用变量](#通用变量)
   - [`ACCESS_CODE`](#access_code)
   - [`ENABLE_OAUTH_SSO`](#enable_oauth_sso)
+  - [`NEXT_PUBLIC_BASE_PATH`](#next_public_base_path)
 - [身份验证服务](#身份验证服务)
   - [通用设置](#通用设置)
   - [Auth0](#auth0)
@@ -41,7 +42,14 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 - 类型：可选
 - 描述：为 LobeChat 启用单点登录 (SSO)。设置为 `1` 以启用单点登录。有关详细信息，请参阅[身份验证服务](#身份验证服务)。
 - 默认值: `-`
-- 示例: `1` 或 `0`
+- 示例: `1`
+
+### `NEXT_PUBLIC_BASE_PATH`
+
+- 类型：可选
+- 描述：为 LobeChat 添加 `basePath`
+- 默认值: `-`
+- 示例: `/test`
 
 ## 身份验证服务
 

diff --git a/next.config.mjs b/next.config.mjs
@@ -7,6 +7,8 @@ const buildWithDocker = process.env.DOCKER === 'true';
 // if you need to proxy the api endpoint to remote server
 const API_PROXY_ENDPOINT = process.env.API_PROXY_ENDPOINT || '';
 
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
+
 const withBundleAnalyzer = analyzer({
   enabled: process.env.ANALYZE === 'true',
 });
@@ -22,6 +24,7 @@ const withPWA = nextPWA({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   compress: isProd,
+  basePath,
   experimental: {
     optimizePackageImports: [
       'emoji-mart',

diff --git a/src/app/chat/features/ChatHeader/ShareButton/style.ts b/src/app/chat/features/ChatHeader/ShareButton/style.ts
@@ -1,11 +1,13 @@
 import { createStyles } from 'antd-style';
 
+import { imageUrl } from '@/const/url';
+
 export const useStyles = createStyles(({ css, token, stylish, cx }, withBackground: boolean) => ({
   background: css`
     padding: 24px;
 
     background-color: ${token.colorBgLayout};
-    background-image: url('/images/screenshot_background.webp');
+    background-image: url(${imageUrl('screenshot_background.webp')});
     background-position: center;
     background-size: 120% 120%;
   `,

diff --git a/src/app/chat/features/TopicListContent/Topic/index.tsx b/src/app/chat/features/TopicListContent/Topic/index.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
+import { imageUrl } from '@/const/url';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
@@ -60,7 +61,7 @@ export const Topic = memo(() => {
         <Flexbox flex={1}>
           <EmptyCard
             alt={t('topic.guide.desc')}
-            cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
+            cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
             desc={t('topic.guide.desc')}
             height={120}
             onVisibleChange={(visible) => {

diff --git a/src/app/market/features/ShareAgentButton/Inner.tsx b/src/app/market/features/ShareAgentButton/Inner.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { AGENTS_INDEX_GITHUB } from '@/const/url';
+import { AGENTS_INDEX_GITHUB, imageUrl } from '@/const/url';
 
 const Inner = memo(() => {
   const { t } = useTranslation('market');
@@ -14,7 +14,7 @@ const Inner = memo(() => {
       <Image
         alt={'banner'}
         height={602}
-        src={'/images/banner_market_modal.webp'}
+        src={imageUrl('banner_market_modal.webp')}
         style={{ height: 'auto', marginBottom: 24, width: '100%' }}
         width={1602}
       />

diff --git a/src/app/metadata.ts b/src/app/metadata.ts
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import { getClientConfig } from '@/config/client';
 import { getServerConfig } from '@/config/server';
 
 import pkg from '../../package.json';
@@ -8,6 +9,10 @@ const title = 'LobeChat';
 const { description, homepage } = pkg;
 
 const { METADATA_BASE_URL = 'https://chat-preview.lobehub.com/' } = getServerConfig();
+const { BASE_PATH } = getClientConfig();
+
+// if there is a base path, then we don't need the manifest
+const noManifest = !!BASE_PATH;
 
 const metadata: Metadata = {
   appleWebApp: {
@@ -22,7 +27,7 @@ const metadata: Metadata = {
     shortcut:
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
   },
-  manifest: '/manifest.json',
+  manifest: noManifest ? undefined : '/manifest.json',
   metadataBase: new URL(METADATA_BASE_URL),
   openGraph: {
     description: description,

diff --git a/src/app/settings/common/Common.tsx b/src/app/settings/common/Common.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
+import { imageUrl } from '@/const/url';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { localeOptions } from '@/locales/resources';
 import { useChatStore } from '@/store/chat';
@@ -118,19 +119,19 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
             options={[
               {
                 icon: Sun,
-                img: '/images/theme_light.webp',
+                img: imageUrl('theme_light.webp'),
                 label: t('settingTheme.themeMode.light'),
                 value: 'light',
               },
               {
                 icon: Moon,
-                img: '/images/theme_dark.webp',
+                img: imageUrl('theme_dark.webp'),
                 label: t('settingTheme.themeMode.dark'),
                 value: 'dark',
               },
               {
                 icon: Monitor,
-                img: '/images/theme_auto.webp',
+                img: imageUrl('theme_auto.webp'),
                 label: t('settingTheme.themeMode.auto'),
                 value: 'auto',
               },

diff --git a/src/config/client.ts b/src/config/client.ts
@@ -38,6 +38,7 @@ declare global {
 }
 
 export const getClientConfig = () => ({
+  BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH || '',
   // Vercel Analytics
   ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL === '1',
   VERCEL_DEBUG: process.env.NEXT_PUBLIC_VERCEL_DEBUG === '1',

diff --git a/src/const/url.ts b/src/const/url.ts
@@ -1,5 +1,7 @@
 import urlJoin from 'url-join';
 
+import { withBasePath } from '@/utils/basePath';
+
 import pkg from '../../package.json';
 import { INBOX_SESSION_ID } from './session';
 
@@ -19,3 +21,5 @@ export const AGENTS_INDEX_GITHUB_ISSUE = urlJoin(AGENTS_INDEX_GITHUB, 'issues/ne
 export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
   mobile ? `/chat/mobile?session=${id}` : `/chat?session=${id}`;
 export const MANUAL_UPGRADE_URL = 'https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync';
+
+export const imageUrl = (filename: string) => withBasePath(`/images/${filename}`);
diff --git a/src/features/AgentSetting/AgentConfig/index.tsx b/src/features/AgentSetting/AgentConfig/index.tsx
@@ -7,6 +7,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { imageUrl } from '@/const/url';
 
 import { useStore } from '../store';
 import ModelSelect from './ModelSelect';
@@ -46,13 +47,13 @@ const AgentConfig = memo(() => {
               options={[
                 {
                   icon: MessagesSquare,
-                  img: `/images/chatmode_chat_${isDarkMode ? 'dark' : 'light'}.webp`,
+                  img: imageUrl(`chatmode_chat_${isDarkMode ? 'dark' : 'light'}.webp`),
                   label: t('settingChat.chatStyleType.type.chat'),
                   value: 'chat',
                 },
                 {
                   icon: LayoutList,
-                  img: `/images/chatmode_docs_${isDarkMode ? 'dark' : 'light'}.webp`,
+                  img: imageUrl(`chatmode_docs_${isDarkMode ? 'dark' : 'light'}.webp`),
                   label: t('settingChat.chatStyleType.type.docs'),
                   value: 'docs',
                 },

diff --git a/src/hooks/useSTT.ts b/src/hooks/useSTT.ts
@@ -9,7 +9,7 @@ import isEqual from 'fast-deep-equal';
 import { SWRConfiguration } from 'swr';
 
 import { createHeaderWithOpenAI } from '@/services/_header';
-import { OPENAI_URLS } from '@/services/_url';
+import { API_ENDPOINTS } from '@/services/_url';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
@@ -39,7 +39,7 @@ export const useSTT = (config: STTConfig) => {
       options = {
         api: {
           headers: createHeaderWithOpenAI(),
-          serviceUrl: OPENAI_URLS.stt,
+          serviceUrl: API_ENDPOINTS.stt,
         },
         autoStop,
         options: {

diff --git a/src/hooks/useTTS.ts b/src/hooks/useTTS.ts
@@ -10,7 +10,7 @@ import {
 import isEqual from 'fast-deep-equal';
 
 import { createHeaderWithOpenAI } from '@/services/_header';
-import { OPENAI_URLS, TTS_URL } from '@/services/_url';
+import { API_ENDPOINTS } from '@/services/_url';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
@@ -36,7 +36,7 @@ export const useTTS = (content: string, config?: TTSConfig) => {
       options = {
         api: {
           headers: createHeaderWithOpenAI(),
-          serviceUrl: OPENAI_URLS.tts,
+          serviceUrl: API_ENDPOINTS.tts,
         },
         options: {
           model: ttsSettings.openAI.ttsModel,
@@ -64,7 +64,7 @@ export const useTTS = (content: string, config?: TTSConfig) => {
       useSelectedTTS = useMicrosoftSpeech;
       options = {
         api: {
-          serviceUrl: TTS_URL.microsoft,
+          serviceUrl: API_ENDPOINTS.microsoft,
         },
         options: {
           voice: config?.voice || voice,

diff --git a/src/services/_url.ts b/src/services/_url.ts
@@ -1,21 +1,39 @@
-export const URLS = {
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import { transform } from 'lodash-es';
+
+import { withBasePath } from '@/utils/basePath';
+
+const mapWithBasePath = <T extends object>(apis: T): T => {
+  return transform(apis, (result, value, key) => {
+    if (typeof value === 'string') {
+      // @ts-ignore
+      result[key] = withBasePath(value);
+    } else {
+      result[key] = value;
+    }
+  });
+};
+
+export const API_ENDPOINTS = mapWithBasePath({
   config: '/api/config',
-  market: '/api/market',
   proxy: '/api/proxy',
-};
 
-export const PLUGINS_URLS = {
+  // agent markets
+  market: '/api/market',
+
+  // plugins
   gateway: '/api/plugin/gateway',
-  store: '/api/plugin/store',
-};
+  pluginStore: '/api/plugin/store',
 
-export const OPENAI_URLS = {
+  // chat
+  chat: (provider: string) => withBasePath(`/api/chat/${provider}`),
+
+  // image
   images: '/api/openai/images',
+
+  // TTS & STT
   stt: '/api/openai/stt',
   tts: '/api/openai/tts',
-};
-
-export const TTS_URL = {
   edge: '/api/tts/edge-speech',
   microsoft: '/api/tts/microsoft-speech',
-};
+});
diff --git a/src/services/chat.ts b/src/services/chat.ts
@@ -16,7 +16,7 @@ import { fetchAIFactory, getMessageError } from '@/utils/fetch';
 
 import { createHeaderWithAuth } from './_auth';
 import { createHeaderWithOpenAI } from './_header';
-import { PLUGINS_URLS } from './_url';
+import { API_ENDPOINTS } from './_url';
 
 interface FetchOptions {
   signal?: AbortSignal | undefined;
@@ -81,7 +81,7 @@ class ChatService {
       provider,
     });
 
-    return fetch(`/api/chat/${provider}`, {
+    return fetch(API_ENDPOINTS.chat(provider), {
       body: JSON.stringify(payload),
       headers,
       method: 'POST',
@@ -102,7 +102,7 @@ class ChatService {
 
     const gatewayURL = manifest?.gateway;
 
-    const res = await fetch(gatewayURL ?? PLUGINS_URLS.gateway, {
+    const res = await fetch(gatewayURL ?? API_ENDPOINTS.gateway, {
       body: JSON.stringify({ ...params, manifest }),
       // TODO: we can have a better auth way
       headers: createHeadersWithPluginSettings(settings, createHeaderWithOpenAI()),

diff --git a/src/services/file.ts b/src/services/file.ts
@@ -1,9 +1,10 @@
 import { FileModel } from '@/database/models/file';
 import { DB_File } from '@/database/schemas/files';
-import { URLS } from '@/services/_url';
 import { FilePreview } from '@/types/files';
 import compressImage from '@/utils/compressImage';
 
+import { API_ENDPOINTS } from './_url';
+
 class FileService {
   private isImage(fileType: string) {
     const imageRegex = /^image\//;
@@ -43,7 +44,7 @@ class FileService {
   }
 
   async uploadImageByUrl(url: string, file: Pick<DB_File, 'name' | 'metadata'>) {
-    const res = await fetch(URLS.proxy, { body: url, method: 'POST' });
+    const res = await fetch(API_ENDPOINTS.proxy, { body: url, method: 'POST' });
     const data = await res.arrayBuffer();
     const fileType = res.headers.get('content-type') || 'image/webp';
 

diff --git a/src/services/global.ts b/src/services/global.ts
@@ -1,6 +1,7 @@
-import { URLS } from '@/services/_url';
 import { GlobalServerConfig } from '@/types/settings';
 
+import { API_ENDPOINTS } from './_url';
+
 const VERSION_URL = 'https://registry.npmmirror.com/@lobehub/chat';
 
 class GlobalService {
@@ -15,7 +16,7 @@ class GlobalService {
   };
 
   getGlobalConfig = async (): Promise<GlobalServerConfig> => {
-    const res = await fetch(URLS.config);
+    const res = await fetch(API_ENDPOINTS.config);
 
     return res.json();
   };

diff --git a/src/services/imageGeneration.ts b/src/services/imageGeneration.ts
@@ -1,7 +1,8 @@
 import { createHeaderWithOpenAI } from '@/services/_header';
-import { OPENAI_URLS } from '@/services/_url';
 import { OpenAIImagePayload } from '@/types/openai/image';
 
+import { API_ENDPOINTS } from './_url';
+
 interface FetchOptions {
   signal?: AbortSignal | undefined;
 }
@@ -10,7 +11,7 @@ class ImageGenerationService {
   async generateImage(params: Omit<OpenAIImagePayload, 'model' | 'n'>, options?: FetchOptions) {
     const payload: OpenAIImagePayload = { ...params, model: 'dall-e-3', n: 1 };
 
-    const res = await fetch(OPENAI_URLS.images, {
+    const res = await fetch(API_ENDPOINTS.images, {
       body: JSON.stringify(payload),
       headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
       method: 'POST',