bsord/tiles-client

Tiles 客户端

镜像概述和主要用途

Tiles客户端是bsord开发的'Tiles'应用前端部分，核心功能是提供像素艺术聊天室界面，用户可与朋友实时协作绘制像素画并进行聊天。该客户端需配合https://github.com/bsord/tiles-api后端服务运行，实现绘画数据保存和聊天管理功能。

核心功能和特性

• 像素艺术创作：提供像素画板，支持用户绘制和编辑像素艺术作品
• 实时聊天：集成聊天功能，支持用户间实时文字交流
• WebSocket支持：通过WebSocket实现实时数据同步，确保绘画和聊天内容即时更新
• 多部署方式：支持本地部署、Docker容器化部署及Kubernetes集群部署
• Nginx配置支持：提供Nginx反向代理配置，优化前端访问和WebSocket连接

使用场景和适用范围

• 个人或小团体的像素艺术创作与社交互动
• 在线创意协作活动，如多人共同创作像素画
• 小型社区的实时互动平台，结合绘画与聊天功能
• 开发和测试环境中快速部署像素艺术聊天应用

详细使用方法和配置说明

前提条件

部署前需安装以下依赖：

• Node.js v8+
• MongoDB
• Nginx
• https://github.com/bsord/tiles-api后端服务

本地部署步骤

克隆项目

sh
# 克隆代码仓库
git clone https://github.com/bsord/tiles-client.git
cd tiles-client/

设置后端API

前端需依赖Tiles API后端服务来保存绘画数据和管理聊天。请参考https://github.com/bsord/tiles-api/blob/master/README.md进行后端部署。

安装并启动前端

sh
# 安装依赖
npm install
# 启动应用
npm start

应用启动后，可通过 http://localhost:3000 访问Tiles UI。

Nginx配置

以下是同时代理前端和后端的Nginx配置示例（Kubernetes部署时可能不适用）：

nginx
server {
    listen               443  ssl;
    ssl                  on;
    ssl_certificate fullchain.pem;
    ssl_certificate_key privkey.pem;
    server_name    tiles.mysite.io;
    large_client_header_buffers 4 8k;
    
    location / {
        proxy_pass      http://127.0.0.1:3000/;
        # WebSocket升级配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    
    location /socket.io/ {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:4001/socket.io/;
    }
    
    location /tiles {
        proxy_pass      http://127.0.0.1:4001/tiles;
        # WebSocket升级配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Docker部署

Tiles UI可通过Docker容器部署，示例命令如下：

sh
# 构建镜像
docker build -t bsord/tiles-client .

# 运行容器
docker run -d -p 80:80 --name 'tiles-client' docker.xuanyuan.run/bsord/tiles-client

Kubernetes部署

前提条件：需安装Helm v2或v3，以及默认存储供应器。

创建命名空间

sh
kubectl create namespace tiles

设置数据库密码

sh
# 密码中不要使用@或!，以免连接字符串出现问题
export DB_PASS=M0ngoPassH3re

部署数据库

sh
# 下载生产环境配置模板
curl -O https://raw.githubusercontent.com/kubernetes/charts/master/stable/mongodb/values-production.yaml

# Helm v3部署
helm install tilesdb -f values-production.yaml stable/mongodb --set mongodbUsername=TilesDB --set mongodbPassword=${DB_PASS} --set mongodbDatabase=tiles --namespace tiles

# Helm v2部署
helm install --name tilesdb -f values-production.yaml stable/mongodb --set mongodbUsername=TilesDB --set mongodbPassword=${DB_PASS} --set mongodbDatabase=tiles --namespace tiles

等待数据库就绪：kubectl get po -n tiles

部署会话缓存

sh
# Helm v3部署
helm install tiles-session-db stable/redis --namespace tiles --set usePassword=false

# Helm v2部署
helm install --name tiles-session-db stable/redis --namespace tiles --set usePassword=false

创建密钥

sh
# 根据实际服务名称调整mongouri和redishost的主机名
kubectl create secret generic tiles-config --from-literal=mongouri=mongodb://TilesDB:${DB_PASS}@tilesdb-mongodb:27017/tiles --from-literal=redishost=tiles-session-db-redis-master -n tiles

确认所有Pod就绪：kubectl get po -n tiles

部署Tiles应用

注意：部署前建议更新yaml文件中Ingress部分的HOST值。

sh
kubectl apply -f kubernetes.yml

验证部署

sh
# 检查所有Pod运行状态
kubectl get po -n tiles

# 查看API日志确认运行状态
kubectl logs -n tiles tiles-api-XXXXXXXXXXX

# 检查证书状态
kubectl get cert -n tiles

清除数据库密码环境变量

sh
unset DB_PASS