feat: 配置生产环境后端服务器动态地址支持
- 添加环境变量支持,可通过 NEXT_PUBLIC_API_BASE_URL 配置后端地址 - 实现智能地址获取:无配置时自动使用当前域名+3006端口 - 添加 .env.template 模板文件,方便部署时配置 - 更新 package.json 脚本支持通过 PORT 环境变量配置前端端口 - 修改 .gitignore 允许模板文件提交但保护敏感环境文件 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,12 @@
|
|||||||
"allow": [
|
"allow": [
|
||||||
"Bash(pnpm dlx:*)",
|
"Bash(pnpm dlx:*)",
|
||||||
"Bash(pnpm dev:*)",
|
"Bash(pnpm dev:*)",
|
||||||
"Bash(mkdir:*)"
|
"Bash(mkdir:*)",
|
||||||
|
"Bash(git remote add:*)",
|
||||||
|
"Bash(git push:*)",
|
||||||
|
"Bash(git add:*)",
|
||||||
|
"Bash(npm run build:*)",
|
||||||
|
"Bash(git add:*)"
|
||||||
],
|
],
|
||||||
"deny": []
|
"deny": []
|
||||||
}
|
}
|
||||||
|
|||||||
11
.env.template
Normal file
11
.env.template
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
# 环境配置模板
|
||||||
|
# 部署时复制此文件为 .env.production 并修改相应配置
|
||||||
|
|
||||||
|
# 前端服务端口(默认 3000)
|
||||||
|
PORT=3000
|
||||||
|
|
||||||
|
# 后端 API 基础地址
|
||||||
|
# NEXT_PUBLIC_API_BASE_URL=http://当前域名:3006
|
||||||
|
|
||||||
|
# 环境
|
||||||
|
NODE_ENV=production
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -32,6 +32,7 @@ yarn-error.log*
|
|||||||
|
|
||||||
# env files (can opt-in for committing if needed)
|
# env files (can opt-in for committing if needed)
|
||||||
.env*
|
.env*
|
||||||
|
!.env.template
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
|
|||||||
17
lib/api.ts
17
lib/api.ts
@@ -8,13 +8,28 @@ import {
|
|||||||
ScriptUploadItem
|
ScriptUploadItem
|
||||||
} from './types';
|
} from './types';
|
||||||
|
|
||||||
const API_BASE_URL = 'http://localhost:3006';
|
const getApiBaseUrl = () => {
|
||||||
|
// 检查是否有配置的环境变量(构建时注入)
|
||||||
|
const envUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
|
||||||
|
if (envUrl && envUrl !== 'undefined') {
|
||||||
|
return envUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在浏览器环境中,没有配置则使用当前域名
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
return `${window.location.protocol}//${window.location.hostname}:3006`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 服务端渲染时的默认值
|
||||||
|
return 'http://localhost:3006';
|
||||||
|
};
|
||||||
|
|
||||||
class ApiClient {
|
class ApiClient {
|
||||||
private async request<T>(
|
private async request<T>(
|
||||||
endpoint: string,
|
endpoint: string,
|
||||||
options: RequestInit = {}
|
options: RequestInit = {}
|
||||||
): Promise<ApiResponse<T>> {
|
): Promise<ApiResponse<T>> {
|
||||||
|
const API_BASE_URL = getApiBaseUrl(); // 每次请求时动态获取
|
||||||
const url = `${API_BASE_URL}${endpoint}`;
|
const url = `${API_BASE_URL}${endpoint}`;
|
||||||
|
|
||||||
const response = await fetch(url, {
|
const response = await fetch(url, {
|
||||||
|
|||||||
@@ -4,8 +4,9 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev --turbopack",
|
"dev": "next dev --turbopack",
|
||||||
"build": "next build --turbopack",
|
"build": "next build --turbopack",
|
||||||
"start": "next start"
|
"start": "next start -p ${PORT:-3000}",
|
||||||
|
"start:prod": "next start -p ${PORT:-3000}"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-checkbox": "^1.3.3",
|
"@radix-ui/react-checkbox": "^1.3.3",
|
||||||
|
|||||||
Reference in New Issue
Block a user