nsbp-cli 0.2.1 → 0.2.3

package/bin/nsbp.js

@@ -63,6 +63,12 @@ program
         '.prettierrc',
         '.prettierignore',
         '.gitignore',
+        '.dockerignore',
+        'docker-compose.yml',
+        'docker-compose.dev.yml',
+        'Dockerfile',
+        'Dockerfile.dev',
+        'Makefile',
         'README.md'
       ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsbp-cli",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "CLI tool for creating NSBP (Node React SSR by Webpack) projects",
   "main": "index.js",
   "files": [

package/templates/basic/.dockerignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules
+npm-debug.log
+yarn-error.log
+yarn-debug.log
+pnpm-debug.log
+pnpm-lock.yaml
+
+# Build outputs
+build
+public/js
+public/css
+public/client.*
+public/*.js
+public/*.js.map
+public/*.txt
+public/*.json
+.temp_cache
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile*
+docker-compose*.yml
+.dockerignore
+
+# CI/CD
+.github
+.gitlab-ci.yml
+
+# Environment
+.env.local
+.env.*.local
+
+# Logs
+logs
+*.log
+
+# CLI (for main project only)
+cli
+
+# Serena
+.serena

package/templates/basic/Dockerfile

@@ -0,0 +1,65 @@
+# Multi-stage build for production
+
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install pnpm and dependencies (including devDependencies for building)
+RUN npm install -g pnpm && pnpm install
+
+# Copy source code
+COPY . .
+
+# Build application
+RUN npm run build
+
+# Stage 2: Production
+FROM node:20-alpine AS production
+
+# Install dumb-init for proper signal handling
+RUN apk add --no-cache dumb-init
+
+# Create non-root user
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nodejs -u 1001
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install pnpm and only production dependencies
+RUN npm install -g pnpm && pnpm install --prod && pnpm store prune
+
+# Copy build artifacts from builder stage
+COPY --from=builder /app/build ./build
+COPY --from=builder /app/public ./public
+
+# Copy scripts and config
+COPY --from=builder /app/scripts ./scripts
+COPY --from=builder /app/tsconfig.json ./
+
+# Change ownership
+RUN chown -R nodejs:nodejs /app
+
+# Switch to non-root user
+USER nodejs
+
+# Expose port
+EXPOSE 3001
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD node -e "require('http').get('http://localhost:3001', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"
+
+# Use dumb-init to handle signals properly
+ENTRYPOINT ["dumb-init", "--"]
+
+# Start application
+CMD ["node", "./scripts/start.js"]

package/templates/basic/Dockerfile.dev

@@ -0,0 +1,52 @@
+# Development Dockerfile
+
+FROM node:20-alpine
+
+# Install dumb-init for proper signal handling
+RUN apk add --no-cache dumb-init
+
+# Create non-root user
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nodejs -u 1001
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files first to leverage Docker cache
+COPY package*.json ./
+
+# Install pnpm and all dependencies (including devDependencies)
+RUN npm install -g pnpm && pnpm install && pnpm store prune
+
+# Copy application code
+COPY . .
+
+# Create build directory with proper permissions
+RUN mkdir -p /app/build && \
+    chown -R nodejs:nodejs /app
+
+# Create entrypoint script to fix volume permissions
+RUN printf '#!/bin/sh\n\
+# Fix permissions for volume mounts before switching user\n\
+if [ -d "/app/build" ]; then\n\
+  chown -R nodejs:nodejs /app/build 2>/dev/null || true\n\
+  chmod -R 755 /app/build 2>/dev/null || true\n\
+fi\n\
+if [ -d "/app/node_modules" ]; then\n\
+  chown -R nodejs:nodejs /app/node_modules 2>/dev/null || true\n\
+fi\n\
+# Switch to nodejs user and execute command\n\
+exec su-exec nodejs:nodejs "$@"\n' > /entrypoint.sh && \
+    chmod +x /entrypoint.sh
+
+# Install su-exec for user switching
+RUN apk add --no-cache su-exec
+
+# Expose port
+EXPOSE 3001
+
+# Use entrypoint (runs as root, fixes perms, then switches to nodejs)
+ENTRYPOINT ["/entrypoint.sh"]
+
+# Start development server
+CMD ["dumb-init", "--", "npm", "run", "dev"]

package/templates/basic/Makefile

@@ -0,0 +1,66 @@
+.PHONY: help build dev prod down clean logs restart publish-cli
+
+help: ## Show this help message
+	@echo 'Usage: make [target]'
+	@echo ''
+	@echo 'Available targets:'
+	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
+
+build: ## Build Docker images for production
+	docker-compose build
+
+build-dev: ## Build Docker images for development
+	docker-compose -f docker-compose.dev.yml build
+
+dev: ## Start development environment (removes orphan containers)
+	docker-compose -f docker-compose.dev.yml up --build --remove-orphans
+
+prod: ## Start production environment (removes orphan containers)
+	docker-compose up -d --remove-orphans
+
+down: ## Stop and remove containers (including orphan containers)
+	docker-compose down --remove-orphans
+	docker-compose -f docker-compose.dev.yml down --remove-orphans
+
+clean: ## Stop containers, remove images and volumes (including orphan containers)
+	docker-compose down -v --rmi all --remove-orphans
+	docker-compose -f docker-compose.dev.yml down -v --rmi all --remove-orphans
+
+logs: ## View logs
+	docker-compose logs -f
+
+logs-dev: ## View development logs
+	docker-compose -f docker-compose.dev.yml logs -f
+
+restart: ## Restart production containers
+	docker-compose restart
+
+restart-dev: ## Restart development containers
+	docker-compose -f docker-compose.dev.yml restart
+
+rebuild: ## Rebuild and restart production containers (removes orphan containers)
+	docker-compose up -d --build --remove-orphans
+
+rebuild-dev: ## Rebuild and restart development containers (removes orphan containers)
+	docker-compose -f docker-compose.dev.yml up -d --build --remove-orphans
+
+shell: ## Open shell in production container
+	docker-compose exec app sh
+
+shell-dev: ## Open shell in development container
+	docker-compose -f docker-compose.dev.yml exec app sh
+
+test: ## Run tests (if configured)
+	docker-compose exec app npm test
+
+publish-cli: ## Publish CLI to npm registry
+	@echo "🚀 Starting CLI publish process..."
+	cd cli && npm run update
+	@echo "📦 Template updated, committing changes..."
+	git add .
+	git diff --quiet && git diff --cached --quiet || git commit -m "chore: update cli template"
+	cd cli && npm version patch
+	cd cli && npm publish
+	@echo "📤 Pushing to git repository..."
+	git push --follow-tags
+	@echo "✅ CLI published successfully!"

package/templates/basic/README.md

@@ -1,6 +1,6 @@
 # 开发
 - npm run dev   (开发运行)
-- npm run build (生产编译) 
+- npm run build (生产编译)
 - npm start     (生产运行)
 
 客户端渲染
@@ -10,4 +10,128 @@ http://localhost:3001/
 http://localhost:3001/?seo=1
 
 服务端渲染不成功，改为客户端渲染
-http://localhost:3001/?seo=1&from=link
+http://localhost:3001/?seo=1&from=link
+
+## Docker 部署
+
+**权限问题已修复！** 详细说明见下面的开发环境说明。
+
+### 生产环境
+
+使用 Makefile (推荐):
+
+```bash
+# 构建并启动
+make prod
+
+# 或分步执行
+make build
+make prod
+
+# 查看日志
+make logs
+
+# 重启
+make restart
+
+# 进入容器
+make shell
+
+# 停止
+make down
+
+# 完全清理（删除镜像和卷）
+make clean
+```
+
+或直接使用 Docker Compose:
+
+```bash
+# 构建镜像
+docker-compose build
+
+# 启动服务（后台运行）
+docker-compose up -d
+
+# 查看日志
+docker-compose logs -f
+
+# 停止服务
+docker-compose down
+```
+
+访问: http://localhost:3001
+
+### 开发环境
+
+⚠️ **重要提示**:
+1. 首次启动开发环境需要等待构建完成，期间可能看到 `Cannot find module` 错误，这是正常的
+2. 开发环境使用 volume 挂载，遇到权限问题时会自动修复
+3. 如果遇到权限错误（EACCES），容器会自动修复权限（通过 entrypoint.sh）
+
+```bash
+# 启动开发环境（带热重载）
+make dev
+
+# 查看日志
+make logs-dev
+
+# 进入容器
+make shell-dev
+
+# 重启开发环境
+make restart-dev
+
+# 重新构建并启动
+make rebuild-dev
+```
+
+或直接使用 Docker Compose:
+
+```bash
+# 构建并启动开发环境
+docker-compose -f docker-compose.dev.yml up --build
+
+# 后台运行
+docker-compose -f docker-compose.dev.yml up -d --build
+
+# 查看日志
+docker-compose -f docker-compose.dev.yml logs -f
+
+# 停止
+docker-compose -f docker-compose.dev.yml down
+```
+
+### Docker 命令速查
+
+```bash
+# 查看所有可用命令
+make help
+
+# 生产环境
+make build         # 构建镜像
+make prod          # 启动生产环境
+make logs          # 查看日志
+make restart       # 重启容器
+make shell         # 进入容器
+make down          # 停止容器
+
+# 开发环境
+make build-dev     # 构建开发镜像
+make dev           # 启动开发环境
+make logs-dev      # 查看开发日志
+make restart-dev   # 重启开发容器
+make shell-dev     # 进入开发容器
+
+# 通用命令
+make clean         # 清理所有资源（镜像、卷等）
+make rebuild       # 重新构建并启动生产环境
+make rebuild-dev   # 重新构建并启动开发环境
+```
+
+### 环境变量
+
+可在 `docker-compose.yml` 或 `docker-compose.dev.yml` 中配置环境变量：
+
+- `NODE_ENV`: 运行环境 (production/development)
+- `PORT`: 服务端口 (默认 3001)

package/templates/basic/docker-compose.dev.yml

@@ -0,0 +1,37 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    container_name: nsbp-app-dev
+    ports:
+      - "3001:3001"
+      - "9229:9229"  # Node.js debug port
+    environment:
+      - NODE_ENV=development
+      - PORT=3001
+    volumes:
+      # Mount source code for hot reload
+      - ./src:/app/src
+      - ./public:/app/public
+      - ./scripts:/app/scripts
+      - ./webpack.base.js:/app/webpack.base.js
+      - ./webpack.client.js:/app/webpack.client.js
+      - ./webpack.server.js:/app/webpack.server.js
+      - ./tsconfig.json:/app/tsconfig.json
+      # Persist node_modules
+      - node_modules:/app/node_modules
+      # Build output - named volume for persistence
+      - build_output:/app/build
+    command: ["dumb-init", "--", "npm", "run", "dev"]
+    restart: unless-stopped
+    networks:
+      - nsbp-network
+
+volumes:
+  node_modules:
+  build_output:
+
+networks:
+  nsbp-network:
+    driver: bridge

package/templates/basic/docker-compose.yml

@@ -0,0 +1,24 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: nsbp-app
+    ports:
+      - "3001:3001"
+    environment:
+      - NODE_ENV=production
+      - PORT=3001
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "node", "-e", "require('http').get('http://localhost:3001', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"]
+      interval: 30s
+      timeout: 3s
+      retries: 3
+      start_period: 5s
+    networks:
+      - nsbp-network
+
+networks:
+  nsbp-network:
+    driver: bridge

package/templates/basic/scripts/verify-dev.sh

@@ -0,0 +1,77 @@
+#!/bin/bash
+
+# 开发环境验证脚本
+
+echo "========================================="
+echo "Docker 开发环境验证"
+echo "========================================="
+echo ""
+
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+NC='\033[0m'
+
+# 检查容器状态
+echo "1. 检查容器状态..."
+if docker ps | grep -q "nsbp-app-dev"; then
+    echo -e "${GREEN}✅ 容器正在运行${NC}"
+else
+    echo -e "${RED}❌ 容器未运行${NC}"
+    echo ""
+    echo "启动命令："
+    echo "  make dev"
+    echo "  docker-compose -f docker-compose.dev.yml up -d --build"
+    exit 1
+fi
+
+echo ""
+echo "2. 检查服务是否可访问..."
+HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:3001)
+if [ "$HTTP_CODE" = "200" ]; then
+    echo -e "${GREEN}✅ 服务可访问 (HTTP $HTTP_CODE)${NC}"
+else
+    echo -e "${RED}❌ 服务不可访问 (HTTP $HTTP_CODE)${NC}"
+fi
+
+echo ""
+echo "3. 检查权限错误..."
+if docker-compose -f docker-compose.dev.yml logs 2>&1 | grep -q "EACCES"; then
+    echo -e "${RED}❌ 发现权限错误${NC}"
+    echo ""
+    echo "最近的权限错误："
+    docker-compose -f docker-compose.dev.yml logs | grep "EACCES" | tail -3
+else
+    echo -e "${GREEN}✅ 未发现权限错误${NC}"
+fi
+
+echo ""
+echo "4. 检查构建状态..."
+if docker-compose -f docker-compose.dev.yml logs 2>&1 | grep -q "compiled successfully"; then
+    echo -e "${GREEN}✅ 构建完成${NC}"
+else
+    echo -e "${YELLOW}⚠️  构建中或未开始${NC}"
+fi
+
+echo ""
+echo "5. 检查服务器监听..."
+if docker-compose -f docker-compose.dev.yml logs 2>&1 | grep -q "listening"; then
+    echo -e "${GREEN}✅ 服务器正在监听${NC}"
+else
+    echo -e "${YELLOW}⚠️  服务器尚未启动监听${NC}"
+fi
+
+echo ""
+echo "========================================="
+echo -e "${GREEN}验证完成！${NC}"
+echo "========================================="
+echo ""
+echo "访问应用："
+echo "  http://localhost:3001"
+echo ""
+echo "查看日志："
+echo "  docker-compose -f docker-compose.dev.yml logs -f"
+echo ""
+echo "停止服务："
+echo "  make down"
+echo "  docker-compose -f docker-compose.dev.yml down"
+echo ""

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

@@ -347,7 +347,7 @@ export const getPhotoMenu = (req: any, res: any) => {
             <QuickStartGrid>
               <QuickStartCard>
                 <QuickStartTitle>1️⃣ 创建项目</QuickStartTitle>
-                <QuickStartCode>$ npx nsbp create my-app</QuickStartCode>
+                <QuickStartCode>$ npx nsbp-cli create my-app</QuickStartCode>
                 <QuickStartDescription>
                   使用 CLI 工具创建新项目
                 </QuickStartDescription>
@@ -394,7 +394,7 @@ export const getPhotoMenu = (req: any, res: any) => {
                     <PhotoCard>
                       <PhotoImageWrapper>
                         <PhotoImage
-                          src={item.cover}
+                          src={item.cover || 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
                           alt={item.name}
                           loading="lazy"
                         />

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

@@ -123,7 +123,7 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
                 <motion.img
                   key={i}
                   className="demo4-photo"
-                  src={useCurrentFlag ? `/images/${photos[i][2]}` : photos[i][2]}
+                  src={photos[i][2] ? (useCurrentFlag ? `/images/${photos[i][2]}` : photos[i][2]) : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
                   initial={false}
                   animate={{
                     left: pos.left,

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

@@ -5,8 +5,8 @@ import { useCurrentFlag, outPhotoDicPath } from '../utils/config'
 
 const app = express()
 
-app.use(express.static('public'))
-!useCurrentFlag && app.use(express.static(outPhotoDicPath))
+app.use(express.static('public', { dotfiles: 'allow' }))
+!useCurrentFlag && app.use(express.static(outPhotoDicPath, { dotfiles: 'allow' }))
 
 //使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹
 

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

@@ -47,7 +47,7 @@ const getFileMenu = (dir: string): { name: string; cover?: string; count?: numbe
       const count = files.length
 
       // 在该目录下找 cover.jpg
-      let cover = undefined
+      let cover = ''
       const coverPath = path.join(fullPath, 'cover.jpg')
       if (fs.existsSync(coverPath)) {
         // 转成相对 public 的 URL 路径

package/templates/basic/webpack.base.js

@@ -227,11 +227,12 @@ module.exports = ({ mode, entry, server, init }) => {
             },
             name(module) {
               //名字就是包当中的名字
-              return (
-                /[\\/]node_modules[\\/](.*)/.exec(module.identifier()) &&
-                /[\\/]node_modules[\\/](.*)/.exec(module.identifier()).length &&
-                /[\\/]node_modules[\\/](.*)/.exec(module.identifier())[1].replace(/\/|\\/g, '_')
-              )
+              const match = /[\\/]node_modules[\\/](.*)/.exec(module.identifier())
+              if (match && match.length) {
+                // 移除开头的点号，避免生成隐藏文件
+                return match[1].replace(/\/|\\/g, '_').replace(/^\./, '')
+              }
+              return false
             },
             minChunks: 1, //最小共用次数为1时就使用
             priority: 30, //权重为30