demostf/demos.tf

demostf/demos.tf 镜像说明

镜像概述

demostf/demos.tf是demos.tf网站的前端镜像，对应该网站的静态前端代码，需配合demostf/api后端服务使用。镜像提供预构建的静态资源，支持自定义配置和开发调试。

核心功能

1. 提供demos.tf网站的静态前端内容服务
2. 支持修改API基础地址（通过src/config.ts配置）
3. 开发模式下自动编译代码并热重载，实时预览变更
4. 提供Makefile和手动构建两种方式，适配不同环境需求

使用场景

1. 生产环境部署demostf/demos.tf网站的前端部分
2. 开发调试demostf/demos.tf前端代码
3. 作为静态资源服务部署的参考示例

配置说明

API地址配置

默认API地址为部署域名的api子域名，可修改src/config.ts中的配置项调整。

部署配置

• 服务器需服务build/目录下的静态文件
• 配置非存在路径的请求重定向到build/index.html（参考镜像内nginx.conf示例）

构建配置

需Node.js和npm环境：

• 使用Makefile：执行make命令完成构建
• 手动构建：执行npm install后，运行node node_modules/.bin/webpack --config webpack.prod.config.js

部署示例

Docker + Nginx部署

1. 拉取镜像：docker pull demostf/demos.tf
2. 编写nginx配置文件（nginx.conf）：

nginx
server {
    listen 80;
    server_name your-domain.com;
    
    root /usr/share/nginx/html/build;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 运行容器（假设本地已构建build目录）：

bash
docker run -d -p 80:80 \
  -v ./nginx.conf:/etc/nginx/conf.d/default.conf \
  -v $(pwd)/build:/usr/share/nginx/html/build \
  nginx:alpine

开发模式运行

使用热重载服务：

bash
make watch
# 或手动执行：node node_modules/.***/webpack-dev-server --hot --inline --config webpack.dev.config.js