Browse Source
- 支持自动检测包管理器（npm/yarn） - 包含Node.js版本检查 - 自动安装依赖和TypeScript - 构建生产版本并创建发布目录 - 提供详细的部署说明 - 支持命令行参数控制构建过程feature/x1-web-request
root
4 months ago
8 changed files with 589 additions and 10 deletions
@ -0,0 +1,19 @@ |
|||
node_modules |
|||
npm-debug.log |
|||
.git |
|||
.gitignore |
|||
README.md |
|||
.env |
|||
.env.local |
|||
.env.development |
|||
.env.test |
|||
.nyc_output |
|||
coverage |
|||
.vscode |
|||
.idea |
|||
*.log |
|||
dist |
|||
.DS_Store |
|||
Thumbs.db |
|||
build.bat |
|||
deploy.sh |
|||
@ -0,0 +1,32 @@ |
|||
# 使用官方Node.js 18 Alpine镜像作为构建环境 |
|||
FROM node:18-alpine AS builder |
|||
|
|||
# 设置工作目录 |
|||
WORKDIR /app |
|||
|
|||
# 复制package.json和package-lock.json |
|||
COPY package*.json ./ |
|||
|
|||
# 安装依赖 |
|||
RUN npm ci --only=production |
|||
|
|||
# 复制源代码 |
|||
COPY . . |
|||
|
|||
# 构建生产版本 |
|||
RUN npm run build |
|||
|
|||
# 使用nginx Alpine镜像作为运行环境 |
|||
FROM nginx:alpine |
|||
|
|||
# 复制构建产物到nginx目录 |
|||
COPY --from=builder /app/dist /usr/share/nginx/html |
|||
|
|||
# 复制nginx配置文件 |
|||
COPY nginx.conf /etc/nginx/nginx.conf |
|||
|
|||
# 暴露端口 |
|||
EXPOSE 80 |
|||
|
|||
# 启动nginx |
|||
CMD ["nginx", "-g", "daemon off;"] |
|||
@ -0,0 +1,248 @@ |
|||
@echo off |
|||
setlocal enabledelayedexpansion |
|||
chcp 65001 >nul |
|||
|
|||
REM 设置错误时退出 |
|||
set "EXIT_CODE=0" |
|||
|
|||
REM 解析命令行参数 |
|||
call :parse_arguments %* |
|||
|
|||
REM 主函数 |
|||
call :main |
|||
goto :end |
|||
|
|||
REM 主函数 |
|||
:main |
|||
call :log_info "Starting X1.WebUI build process..." |
|||
|
|||
call :check_node_version |
|||
if !EXIT_CODE! neq 0 goto :end |
|||
|
|||
call :detect_package_manager |
|||
if !EXIT_CODE! neq 0 goto :end |
|||
|
|||
call :install_dependencies |
|||
if !EXIT_CODE! neq 0 goto :end |
|||
|
|||
call :build_project |
|||
if !EXIT_CODE! neq 0 goto :end |
|||
|
|||
call :create_publish_dir |
|||
call :show_publish_info |
|||
call :show_deployment_instructions |
|||
|
|||
call :log_success "Build completed!" |
|||
call :log_info "Please upload the publish directory contents to server /home/hyh/x1_web/" |
|||
goto :eof |
|||
|
|||
REM 检查Node.js版本 |
|||
:check_node_version |
|||
call :log_info "Checking Node.js version..." |
|||
node --version >nul 2>&1 |
|||
if errorlevel 1 ( |
|||
call :log_error "Node.js not installed, please install Node.js 18+" |
|||
set "EXIT_CODE=1" |
|||
goto :end |
|||
) |
|||
|
|||
for /f "tokens=*" %%i in ('node --version') do set "NODE_VERSION=%%i" |
|||
call :log_success "Node.js version check passed: !NODE_VERSION!" |
|||
goto :eof |
|||
|
|||
REM 解析命令行参数 |
|||
:parse_arguments |
|||
set "PACKAGE_MANAGER=" |
|||
set "SHOW_HELP=false" |
|||
|
|||
:parse_loop |
|||
if "%~1"=="" goto :parse_done |
|||
if /i "%~1"=="--npm" ( |
|||
set "PACKAGE_MANAGER=npm" |
|||
call :log_info "Package manager set to npm via command line" |
|||
) else if /i "%~1"=="--yarn" ( |
|||
set "PACKAGE_MANAGER=yarn" |
|||
call :log_info "Package manager set to yarn via command line" |
|||
) else if /i "%~1"=="--help" ( |
|||
set "SHOW_HELP=true" |
|||
) else ( |
|||
call :log_error "Unknown parameter: %~1" |
|||
call :show_help |
|||
set "EXIT_CODE=1" |
|||
goto :end |
|||
) |
|||
shift |
|||
goto :parse_loop |
|||
|
|||
:parse_done |
|||
if "!SHOW_HELP!"=="true" ( |
|||
call :show_help |
|||
set "EXIT_CODE=0" |
|||
goto :end |
|||
) |
|||
goto :eof |
|||
|
|||
REM 显示帮助信息 |
|||
:show_help |
|||
echo. |
|||
echo Usage: build.bat [options] |
|||
echo. |
|||
echo Options: |
|||
echo --npm Force using npm package manager |
|||
echo --yarn Force using yarn package manager |
|||
echo --help Show this help message |
|||
echo. |
|||
echo Examples: |
|||
echo build.bat - Auto detect package manager |
|||
echo build.bat --npm - Force using npm |
|||
echo build.bat --yarn - Force using yarn |
|||
echo build.bat --help - Show help |
|||
echo. |
|||
goto :eof |
|||
|
|||
REM 检测包管理器 |
|||
:detect_package_manager |
|||
call :log_info "Detecting package manager..." |
|||
if not "!PACKAGE_MANAGER!"=="" ( |
|||
call :log_info "Package manager already set to: !PACKAGE_MANAGER!" |
|||
goto :eof |
|||
) |
|||
|
|||
if exist "yarn.lock" ( |
|||
set "PACKAGE_MANAGER=yarn" |
|||
call :log_info "Found yarn.lock, using yarn" |
|||
) else if exist "package-lock.json" ( |
|||
set "PACKAGE_MANAGER=npm" |
|||
call :log_info "Found package-lock.json, using npm" |
|||
) else ( |
|||
set "PACKAGE_MANAGER=npm" |
|||
call :log_info "No lock file found, defaulting to npm" |
|||
) |
|||
goto :eof |
|||
|
|||
REM 安装依赖 |
|||
:install_dependencies |
|||
call :log_info "Installing project dependencies..." |
|||
if not exist "node_modules" ( |
|||
if "!PACKAGE_MANAGER!"=="yarn" ( |
|||
call yarn install --frozen-lockfile |
|||
) else ( |
|||
call npm ci |
|||
) |
|||
) else ( |
|||
if "!PACKAGE_MANAGER!"=="yarn" ( |
|||
call yarn install --frozen-lockfile --production |
|||
) else ( |
|||
call npm ci --only=production |
|||
) |
|||
) |
|||
if errorlevel 1 ( |
|||
call :log_error "Dependency installation failed" |
|||
set "EXIT_CODE=1" |
|||
goto :end |
|||
) |
|||
call :log_success "Dependencies installed successfully" |
|||
goto :eof |
|||
|
|||
REM 构建项目 |
|||
:build_project |
|||
call :log_info "Building production version..." |
|||
|
|||
REM 直接尝试构建，如果失败则安装TypeScript |
|||
call :log_info "Attempting to build project..." |
|||
if "!PACKAGE_MANAGER!"=="yarn" ( |
|||
call yarn build |
|||
) else ( |
|||
call npm run build |
|||
) |
|||
if errorlevel 1 ( |
|||
call :log_warning "Build failed, checking if TypeScript is needed..." |
|||
call :log_info "Installing TypeScript as dev dependency..." |
|||
if "!PACKAGE_MANAGER!"=="yarn" ( |
|||
call yarn add -D typescript |
|||
) else ( |
|||
call npm install --save-dev typescript |
|||
) |
|||
|
|||
call :log_info "Retrying build after TypeScript installation..." |
|||
if "!PACKAGE_MANAGER!"=="yarn" ( |
|||
call yarn build |
|||
) else ( |
|||
call npm run build |
|||
) |
|||
if errorlevel 1 ( |
|||
call :log_error "Project build failed even after TypeScript installation" |
|||
set "EXIT_CODE=1" |
|||
goto :end |
|||
) |
|||
) |
|||
call :log_success "Project build completed" |
|||
goto :eof |
|||
|
|||
REM 创建发布目录 |
|||
:create_publish_dir |
|||
call :log_info "Creating publish directory..." |
|||
if exist "publish" rmdir /s /q "publish" |
|||
mkdir "publish" |
|||
|
|||
REM 复制构建产物到发布目录根目录 |
|||
xcopy "dist\*" "publish\" /E /Y /Q |
|||
|
|||
REM 复制Dockerfile和nginx配置到发布目录根目录 |
|||
copy "Dockerfile" "publish\" >nul |
|||
copy "nginx.conf" "publish\" >nul |
|||
|
|||
REM 复制部署脚本到发布目录根目录 |
|||
copy "deploy.sh" "publish\" >nul |
|||
|
|||
REM 注意：.dockerignore 文件不需要复制到发布目录，只在本地构建时使用 |
|||
|
|||
call :log_success "Publish directory created: publish/" |
|||
goto :eof |
|||
|
|||
REM 显示文件大小 |
|||
:show_publish_info |
|||
call :log_info "Publish directory info:" |
|||
for /f "tokens=1" %%i in ('dir publish /s ^| find "个文件"') do echo File count: %%i |
|||
echo. |
|||
call :log_info "Publish directory contents:" |
|||
dir publish /B |
|||
echo. |
|||
call :log_info "Publish directory structure:" |
|||
tree publish /F |
|||
goto :eof |
|||
|
|||
REM 显示部署说明 |
|||
:show_deployment_instructions |
|||
call :log_info "Deployment instructions:" |
|||
echo. |
|||
echo 1. Upload all contents of publish directory to server /home/hyh/x1_web/ |
|||
echo 2. Ensure the following files are in /home/hyh/x1_web/ root directory: |
|||
echo - Dockerfile |
|||
echo - nginx.conf |
|||
echo - deploy.sh |
|||
echo - index.html |
|||
echo - assets/ directory |
|||
echo 3. On server run: chmod +x deploy.sh ^&^& ./deploy.sh |
|||
echo. |
|||
goto :eof |
|||
|
|||
REM 日志函数（简化版本，不使用颜色） |
|||
:log_info |
|||
echo [INFO] %~1 |
|||
goto :eof |
|||
|
|||
:log_success |
|||
echo [SUCCESS] %~1 |
|||
goto :eof |
|||
|
|||
:log_warning |
|||
echo [WARNING] %~1 |
|||
goto :eof |
|||
|
|||
:log_error |
|||
echo [ERROR] %~1 |
|||
goto :eof |
|||
|
|||
:end |
|||
exit /b %EXIT_CODE% |
|||
@ -0,0 +1,207 @@ |
|||
#!/bin/bash |
|||
|
|||
# 设置错误时退出 |
|||
set -e |
|||
|
|||
# 颜色定义 |
|||
RED='\033[0;31m' |
|||
GREEN='\033[0;32m' |
|||
YELLOW='\033[1;33m' |
|||
BLUE='\033[0;34m' |
|||
NC='\033[0m' # No Color |
|||
|
|||
# 日志函数 |
|||
log_info() { |
|||
echo -e "${BLUE}[INFO]${NC} $1" |
|||
} |
|||
|
|||
log_success() { |
|||
echo -e "${GREEN}[SUCCESS]${NC} $1" |
|||
} |
|||
|
|||
log_warning() { |
|||
echo -e "${YELLOW}[WARNING]${NC} $1" |
|||
} |
|||
|
|||
log_error() { |
|||
echo -e "${RED}[ERROR]${NC} $1" |
|||
} |
|||
|
|||
# 默认配置 |
|||
IMAGE_NAME="x1-webui" |
|||
CONTAINER_NAME="x1-webui-container" |
|||
PORT="9905" |
|||
REMOVE_MODE=false |
|||
|
|||
# 解析命令行参数 |
|||
parse_arguments() { |
|||
while [[ $# -gt 0 ]]; do |
|||
case $1 in |
|||
-p|--port) |
|||
PORT="$2" |
|||
shift 2 |
|||
;; |
|||
-i|--image) |
|||
IMAGE_NAME="$2" |
|||
shift 2 |
|||
;; |
|||
-c|--container) |
|||
CONTAINER_NAME="$2" |
|||
shift 2 |
|||
;; |
|||
-r|--remove) |
|||
REMOVE_MODE=true |
|||
shift |
|||
;; |
|||
-h|--help) |
|||
echo "用法: $0 [选项]" |
|||
echo "选项:" |
|||
echo " -p, --port PORT 指定端口 (默认: 9905)" |
|||
echo " -i, --image NAME 指定镜像名称 (默认: x1-webui)" |
|||
echo " -c, --container NAME 指定容器名称 (默认: x1-webui-container)" |
|||
echo " -r, --remove 删除旧容器和镜像" |
|||
echo " -h, --help 显示帮助信息" |
|||
exit 0 |
|||
;; |
|||
*) |
|||
log_error "未知选项: $1" |
|||
exit 1 |
|||
;; |
|||
esac |
|||
done |
|||
} |
|||
|
|||
# 检查Docker |
|||
check_docker() { |
|||
log_info "检查Docker安装状态..." |
|||
if ! command -v docker &> /dev/null; then |
|||
log_error "Docker未安装，请先安装Docker" |
|||
exit 1 |
|||
fi |
|||
|
|||
if ! docker info &> /dev/null; then |
|||
log_error "Docker服务未运行，请启动Docker服务" |
|||
exit 1 |
|||
fi |
|||
|
|||
log_success "Docker检查通过" |
|||
} |
|||
|
|||
# 检查必要文件 |
|||
check_files() { |
|||
log_info "检查必要文件..." |
|||
|
|||
local required_files=("Dockerfile" "nginx.conf" "index.html") |
|||
for file in "${required_files[@]}"; do |
|||
if [ ! -f "$file" ]; then |
|||
log_error "缺少必要文件: $file" |
|||
exit 1 |
|||
fi |
|||
done |
|||
|
|||
log_success "文件检查通过" |
|||
} |
|||
|
|||
# 停止并删除旧容器 |
|||
stop_old_container() { |
|||
log_info "停止旧容器..." |
|||
if docker ps -a --format "table {{.Names}}" | grep -q "^${CONTAINER_NAME}$"; then |
|||
docker stop "$CONTAINER_NAME" || true |
|||
docker rm "$CONTAINER_NAME" || true |
|||
log_success "旧容器已停止并删除" |
|||
else |
|||
log_info "没有找到旧容器" |
|||
fi |
|||
} |
|||
|
|||
# 删除旧镜像 |
|||
remove_old_image() { |
|||
if [ "$REMOVE_MODE" = true ]; then |
|||
log_info "删除旧镜像..." |
|||
if docker images --format "table {{.Repository}}" | grep -q "^${IMAGE_NAME}$"; then |
|||
docker rmi "$IMAGE_NAME" || true |
|||
log_success "旧镜像已删除" |
|||
else |
|||
log_info "没有找到旧镜像" |
|||
fi |
|||
fi |
|||
} |
|||
|
|||
# 构建Docker镜像 |
|||
build_image() { |
|||
log_info "构建Docker镜像: $IMAGE_NAME" |
|||
docker build -t "$IMAGE_NAME" . |
|||
log_success "镜像构建完成" |
|||
} |
|||
|
|||
# 运行容器 |
|||
run_container() { |
|||
log_info "启动容器: $CONTAINER_NAME" |
|||
docker run -d \ |
|||
--name "$CONTAINER_NAME" \ |
|||
-p "$PORT:80" \ |
|||
--restart unless-stopped \ |
|||
"$IMAGE_NAME" |
|||
|
|||
log_success "容器启动完成" |
|||
} |
|||
|
|||
# 健康检查 |
|||
health_check() { |
|||
log_info "等待应用启动..." |
|||
local max_attempts=30 |
|||
local attempt=1 |
|||
|
|||
while [ $attempt -le $max_attempts ]; do |
|||
if curl -f -s "http://localhost:$PORT/health" > /dev/null 2>&1; then |
|||
log_success "应用启动成功！" |
|||
return 0 |
|||
fi |
|||
|
|||
log_info "等待应用启动... ($attempt/$max_attempts)" |
|||
sleep 2 |
|||
((attempt++)) |
|||
done |
|||
|
|||
log_warning "应用启动超时，但容器可能仍在运行" |
|||
return 1 |
|||
} |
|||
|
|||
# 显示部署信息 |
|||
show_deployment_info() { |
|||
log_success "部署完成！" |
|||
echo "" |
|||
echo "部署信息:" |
|||
echo " 镜像名称: $IMAGE_NAME" |
|||
echo " 容器名称: $CONTAINER_NAME" |
|||
echo " 访问端口: $PORT" |
|||
echo " 访问地址: http://localhost:$PORT" |
|||
echo "" |
|||
|
|||
log_info "容器状态:" |
|||
docker ps --filter "name=$CONTAINER_NAME" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}" |
|||
|
|||
echo "" |
|||
log_info "容器日志:" |
|||
docker logs --tail 10 "$CONTAINER_NAME" |
|||
} |
|||
|
|||
# 主函数 |
|||
main() { |
|||
log_info "开始部署X1.WebUI..." |
|||
|
|||
parse_arguments "$@" |
|||
check_docker |
|||
check_files |
|||
stop_old_container |
|||
remove_old_image |
|||
build_image |
|||
run_container |
|||
health_check |
|||
show_deployment_info |
|||
|
|||
log_success "部署完成！" |
|||
} |
|||
|
|||
# 执行主函数 |
|||
main "$@" |
|||
@ -0,0 +1,74 @@ |
|||
events { |
|||
worker_connections 1024; |
|||
} |
|||
|
|||
http { |
|||
include /etc/nginx/mime.types; |
|||
default_type application/octet-stream; |
|||
|
|||
# 日志格式 |
|||
log_format main '$remote_addr - $remote_user [$time_local] "$request" ' |
|||
'$status $body_bytes_sent "$http_referer" ' |
|||
'"$http_user_agent" "$http_x_forwarded_for"'; |
|||
|
|||
access_log /var/log/nginx/access.log main; |
|||
error_log /var/log/nginx/error.log; |
|||
|
|||
# 基本设置 |
|||
sendfile on; |
|||
tcp_nopush on; |
|||
tcp_nodelay on; |
|||
keepalive_timeout 65; |
|||
types_hash_max_size 2048; |
|||
|
|||
# Gzip压缩 |
|||
gzip on; |
|||
gzip_vary on; |
|||
gzip_min_length 1024; |
|||
gzip_proxied any; |
|||
gzip_comp_level 6; |
|||
gzip_types |
|||
text/plain |
|||
text/css |
|||
text/xml |
|||
text/javascript |
|||
application/json |
|||
application/javascript |
|||
application/xml+rss |
|||
application/atom+xml |
|||
image/svg+xml; |
|||
|
|||
server { |
|||
listen 80; |
|||
server_name localhost; |
|||
root /usr/share/nginx/html; |
|||
index index.html; |
|||
|
|||
# 处理React Router的客户端路由 |
|||
location / { |
|||
try_files $uri $uri/ /index.html; |
|||
} |
|||
|
|||
# 静态资源缓存 |
|||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { |
|||
expires 1y; |
|||
add_header Cache-Control "public, immutable"; |
|||
} |
|||
|
|||
# API代理到后端9905端口 |
|||
location /api/ { |
|||
proxy_pass http://host.docker.internal:9905; |
|||
proxy_set_header Host $host; |
|||
proxy_set_header X-Real-IP $remote_addr; |
|||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
|||
proxy_set_header X-Forwarded-Proto $scheme; |
|||
} |
|||
|
|||
# 健康检查 |
|||
location /health { |
|||
access_log off; |
|||
return 200 "healthy\n"; |
|||
add_header Content-Type text/plain; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue