nsbp-cli 0.2.44 → 0.2.46

package/README.md

@@ -147,7 +147,7 @@ node ./bin/nsbp.js --help  # Test CLI locally
 
 - **Package Name**: `nsbp-cli`
 - **Bin Command**: `nsbp` (install globally and run `nsbp --help`)
-- **Version**: `0.2.44`
+- **Version**: `0.2.46`
 - **Dependencies**: chalk, commander, fs-extra, inquirer
 - **Package Manager**: Uses pnpm (also compatible with npm)
 - **Node Version**: >=16.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsbp-cli",
-  "version": "0.2.44",
+  "version": "0.2.46",
   "description": "CLI tool for creating NSBP (Node React SSR by Webpack) projects",
   "main": "index.js",
   "homepage": "https://nsbp.erishen.cn/",

package/templates/basic/.env.development

@@ -11,3 +11,4 @@ ENABLE_RATE_LIMIT=0
 # ==================== 调试配置 ====================
 # 启用详细日志便于调试
 # DEBUG=nsbp:*
+

package/templates/basic/.env.example

@@ -14,6 +14,14 @@ ENABLE_RATE_LIMIT=0
 # Docker 镜像标签（可选）
 # DOCKER_IMAGE_TAG=latest
 
+# Docker 主机端口映射（可选，默认值见下方说明）
+# 生产环境主机端口（默认：8081）
+HOST_PORT=8081
+# 开发环境主机端口（默认：3001）
+HOST_PORT_DEV=3001
+# 调试端口（开发环境使用，默认：9229）
+DEBUG_PORT=9229
+
 # ==================== 调试配置 ====================
 # 启用详细日志（开发时有用）
 # DEBUG=nsbp:*
@@ -31,3 +39,4 @@ ENABLE_RATE_LIMIT=0
 # 2. 敏感信息（密钥、密码）请放在 .env.local 中
 # 3. .env.local 不会被提交到 Git，适合存放敏感信息
 # 4. 优先级：.env.local > .env > 默认值
+# 5. 修改端口后需要重启 Docker 容器：docker-compose down && docker-compose up -d

package/templates/basic/.env.production

@@ -15,3 +15,11 @@ ENABLE_RATE_LIMIT=1
 # ==================== 其他配置 ====================
 # 时区
 TZ=Asia/Shanghai
+
+# Docker 主机端口映射（可选，默认值见下方说明）
+# 生产环境主机端口（默认：8081）
+HOST_PORT=8091
+# 开发环境主机端口（默认：3001）
+HOST_PORT_DEV=3001
+# 调试端口（开发环境使用，默认：9229）
+DEBUG_PORT=9229

package/templates/basic/Makefile

@@ -19,57 +19,57 @@ help: ## Show this help message
 	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
 
 build: ## Build Docker images for production
-	$(COMPOSE) -f docker/docker-compose.yml build
+	$(COMPOSE) build
 
 build-dev: ## Build Docker images for development
-	$(COMPOSE) -f docker/docker-compose.dev.yml build
+	$(COMPOSE) -f docker-compose.dev.yml build
 
 dev: ## Start development environment (removes orphan containers)
-	$(COMPOSE) -f docker/docker-compose.dev.yml up --build --remove-orphans
+	$(COMPOSE) -f docker-compose.dev.yml up --build --remove-orphans
 
 prod: ## Start production environment (removes orphan containers)
-	$(COMPOSE) -f docker/docker-compose.yml up -d --remove-orphans
+	$(COMPOSE) up -d --remove-orphans
 
 down: ## Stop and remove containers (including orphan containers)
 	@echo "Stopping production containers..."
-	@$(COMPOSE) -f docker/docker-compose.yml down --remove-orphans || echo "Warning: Failed to stop production containers"
+	@$(COMPOSE) down --remove-orphans || echo "Warning: Failed to stop production containers"
 	@echo "Stopping development containers..."
-	@$(COMPOSE) -f docker/docker-compose.dev.yml down --remove-orphans || echo "Warning: Failed to stop development containers"
+	@$(COMPOSE) -f docker-compose.dev.yml down --remove-orphans || echo "Warning: Failed to stop development containers"
 	@echo "Cleaning up any remaining nsbp containers..."
 	@docker ps -a --filter "name=nsbp-" --format "{{.Names}}" | xargs -r docker stop
 	@docker ps -a --filter "name=nsbp-" --format "{{.Names}}" | xargs -r docker rm
 	@echo "Cleanup complete!"
 
 clean: ## Stop containers, remove images and volumes (including orphan containers)
-	$(COMPOSE) -f docker/docker-compose.yml down -v --rmi all --remove-orphans
-	$(COMPOSE) -f docker/docker-compose.dev.yml down -v --rmi all --remove-orphans
+	$(COMPOSE) down -v --rmi all --remove-orphans
+	$(COMPOSE) -f docker-compose.dev.yml down -v --rmi all --remove-orphans
 
 logs: ## View logs
-	$(COMPOSE) -f docker/docker-compose.yml logs -f
+	$(COMPOSE) logs -f
 
 logs-dev: ## View development logs
-	$(COMPOSE) -f docker/docker-compose.dev.yml logs -f
+	$(COMPOSE) -f docker-compose.dev.yml logs -f
 
 restart: ## Restart production containers
-	$(COMPOSE) -f docker/docker-compose.yml restart
+	$(COMPOSE) restart
 
 restart-dev: ## Restart development containers
-	$(COMPOSE) -f docker/docker-compose.dev.yml restart
+	$(COMPOSE) -f docker-compose.dev.yml restart
 
 rebuild: ## Rebuild and restart production containers (removes orphan containers)
-	$(COMPOSE) -f docker/docker-compose.yml up -d --build --remove-orphans
+	$(COMPOSE) up -d --build --remove-orphans
 
 rebuild-dev: ## Rebuild and restart development containers (removes orphan containers)
-	$(COMPOSE) -f docker/docker-compose.dev.yml up -d --build --remove-orphans
+	$(COMPOSE) -f docker-compose.dev.yml up -d --build --remove-orphans
 
 shell: ## Open shell in production container
-	$(COMPOSE) -f docker/docker-compose.yml exec app sh
+	$(COMPOSE) exec app sh
 
 shell-dev: ## Open shell in development container
-	$(COMPOSE) -f docker/docker-compose.dev.yml exec app sh
+	$(COMPOSE) -f docker-compose.dev.yml exec app sh
 
 test: ## Run tests (if configured)
-	$(COMPOSE) -f docker/docker-compose.yml exec app $(PM) test
+	$(COMPOSE) exec app $(PM) test
 
 env-dev: ## Set up development environment
 	@if [ -f .env.development ]; then \

package/templates/basic/{docker/docker-compose.dev.yml → docker-compose.dev.yml}

@@ -4,12 +4,12 @@
 services:
   app:
     build:
-      context: ..
+      context: .
       dockerfile: docker/Dockerfile.dev
     container_name: nsbp-app-dev
     ports:
-      - "3001:3001"
-      - "9229:9229"  # Node.js debug port
+      - "${HOST_PORT_DEV:-3001}:${PORT:-3001}"
+      - "${DEBUG_PORT:-9229}:9229"  # Node.js debug port
     environment:
       - NODE_ENV=${NODE_ENV:-development}
       - PORT=${PORT:-3001}

package/templates/basic/{docker/docker-compose.yml → docker-compose.yml}

@@ -4,11 +4,11 @@
 services:
   app:
     build:
-      context: ..
+      context: .
       dockerfile: docker/Dockerfile
     container_name: nsbp-app
     ports:
-      - "8091:3001"
+      - "${HOST_PORT:-8081}:${PORT:-3001}"
     environment:
       - NODE_ENV=${NODE_ENV:-production}
       - PORT=${PORT:-3001}

package/templates/basic/gitignore

@@ -22,6 +22,7 @@ public/*.json
 .env.*.local
 .env.development
 .env.production
+!docker/.env
 
 # Logs
 logs

package/templates/basic/src/client/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useMemo } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import routers from '@/Routers'
@@ -9,13 +9,13 @@ import Theme from '@components/Theme'
 import { loadableReady } from '@loadable/component'
 
 const App = () => {
-  // 优先使用服务端预取的状态初始化 store
-  const [store, setStore] = useState(() => {
+  // 使用 useMemo 确保 store 只创建一次，避免每次渲染都创建新 store
+  const store = useMemo(() => {
     if (isSEO() && window?.context?.state) {
       return getStore(window.context.state)
     }
     return getStore()
-  })
+  }, []) // 空依赖数组，只执行一次
 
   return (
     <Theme>

package/templates/basic/src/containers/Home.tsx

@@ -107,13 +107,30 @@ const Home: React.FC = () => {
   const [isLoaded, setIsLoaded] = useState(false)
 
   useEffect(() => {
-    // 模拟页面加载
+    // 客户端模拟页面加载动画
     const timer = setTimeout(() => {
       setIsLoaded(true)
     }, 500)
     return () => clearTimeout(timer)
   }, [])
 
+  // 客户端处理页面加载器的淡出和移除
+  useEffect(() => {
+    if (!isLoaded) return
+
+    const removeLoader = () => {
+      const loader = document.getElementById('pageLoader')
+      if (loader) {
+        loader.classList.add('fade-out')
+        setTimeout(() => loader.remove(), 500)
+      }
+    }
+
+    // 延迟移除加载器
+    const removeTimer = setTimeout(removeLoader, 300)
+    return () => clearTimeout(removeTimer)
+  }, [isLoaded])
+
   return (
     <GlobalStyle>
       {!isLoaded && (
@@ -121,19 +138,6 @@ const Home: React.FC = () => {
           <div className="loader-spinner"></div>
         </div>
       )}
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-          setTimeout(() => {
-            const loader = document.getElementById('pageLoader');
-            if (loader) {
-              loader.classList.add('fade-out');
-              setTimeout(() => loader.remove(), 500);
-            }
-          }, 800);
-        `
-        }}
-      />
       <Helmet>
         <title>Nsbp.js - 轻量级 React SSR 框架</title>
         <meta

package/templates/basic/src/server/index.ts

@@ -7,6 +7,9 @@ import { useCurrentFlag, outPhotoDicPath } from '@utils/config'
 
 const app = express()
 
+// 0. Trust proxy - Important for HTTPS reverse proxy (nginx)
+app.set('trust proxy', true)
+
 // 1. Security headers (helmet)
 app.use(
   helmet({

package/templates/basic/src/server/utils.tsx

@@ -46,11 +46,9 @@ export const render = (req: any, res: any) => {
 
   const queryDispatch = (callback: any) => {
     return (dispatch: any) => {
-      setTimeout(() => {
-        dispatch({ type: REQUEST_QUERY, query })
-
-        callback && callback()
-      }, 0)
+      // 直接同步执行，避免 setTimeout 导致的竞态条件
+      dispatch({ type: REQUEST_QUERY, query })
+      callback && callback()
     }
   }