---
title: "Yokohama Stadium — Web & tường thuật trận đấu — Tran Manh Tuan"
description: "Website chính thức của Yokohama Stadium (ハマスタ) kèm hệ thống tường thuật trận đấu trực tiếp — kiến trúc tĩnh trên CDN, pipeline serverless hướng sự kiện trên Google Cloud và AWS."
canonical: "https://tmtuan.dev/vi/projects/yokohama-stadium"
language: "vi"
image: "https://tmtuan.dev/_img/projects/yokohama-stadium/yokohama-stadium.54312937-og.jpg"
tokens: 1163
---

# Yokohama Stadium

**Yokohama Stadium (ハマスタ)** là sân bóng chày biểu tượng của Yokohama, sân nhà của **Yokohama DeNA BayStars**. Website chính thức **[www.yokohama-stadium.co.jp](http://www.yokohama-stadium.co.jp)** phải đáp ứng bốn yêu cầu: đội vận hành tự cập nhật tin tức, sự kiện, ẩm thực tại sân và nhà tài trợ mà không phải nhờ lập trình viên; người hâm mộ theo dõi diễn biến trận đấu ngay trên kênh chính thức; nhận liên hệ và đơn đặt bento theo đoàn đúng quy định đặt trước của sân; và không sập vào ngày có trận — lúc lượng truy cập tăng vọt — cũng như không có kẽ hở bảo mật.

Site dựng bằng **Nuxt / Vue** theo kiến trúc tĩnh (SSG) phân phối qua CDN: không có máy chủ nào để quá tải hay bị tấn công, trang tải nhanh dù cả sân cùng mở điện thoại. Nội dung quản lý trên **Contentful** với 16 loại nội dung — tin tức, sự kiện, cửa hàng ẩm thực, nhà tài trợ và các loại khác; bản nháp hiện lên môi trường staging để duyệt trước, bấm Publish là hệ thống tự build và tự đưa lên production, và nội dung được làm sạch tự động (DOMPurify) trước khi hiển thị để loại mã độc.

**Hamasta 速報** — tường thuật trận đấu trực tiếp — là một pipeline serverless hướng sự kiện (**Firebase Functions v2** với trigger từ Cloud Storage/Firestore) tự chạy suốt trận đấu mà không cần người thao tác: nhận dữ liệu trận đấu dạng XML từ nhà cung cấp và chuyển đổi tự động, kể cả ký tự đặc biệt tiếng Nhật (外字) mà hệ thống thông thường hay hiển thị lỗi; phân tích tỉ số, bóng/strike/out (BSO) và đội hình xuất phát để dựng báo cáo trận đấu trên website. Hash và version chặn dữ liệu cũ ghi đè dữ liệu mới, nên fan không bao giờ thấy tỉ số "quay ngược". Đội vận hành chỉnh thông tin cầu thủ ném bóng ngay trong Contentful qua extension tuỳ biến, và Slack cảnh báo khi nguồn dữ liệu thay đổi.

Form liên hệ có 6 loại yêu cầu, mỗi loại một mẫu riêng. Đơn bento theo đoàn được tự kiểm tra thời hạn đặt trước theo ngày làm việc, tính cả lịch nghỉ lễ Nhật Bản — đơn sai hạn bị từ chối ngay ở form nên đội vận hành không phải xử lý tay. Khách nhận email xác nhận tự động, ban quản lý nhận thông báo qua **AWS SES**; bot bị chặn bằng **Google reCAPTCHA Enterprise** xác thực qua danh tính dịch vụ trên cloud (IAM) nên không phải lưu khoá bí mật. API (Node.js/Express, kiểm tra dữ liệu bằng Zod) được kiểm chứng bởi 471 test tự động.

Bảo mật nhiều lớp: staging chỉ mở cho IP được phép, với cơ chế xác định IP thật chống giả mạo qua header; mỗi thay đổi code tự động qua ba bước quét — lỗ hổng thư viện (Trivy), lỗi bảo mật mã nguồn (Semgrep, kèm luật tự viết vì bộ luật có sẵn không quét được file .vue) và rò rỉ khoá bí mật (Gitleaks); chống tấn công chuỗi cung ứng bằng cách không cài package mới phát hành dưới 7 ngày và xác minh checksum mọi công cụ quét trước khi chạy. Hệ thống vận hành đa đám mây **Google Cloud + AWS**, đã qua audit bảo mật và khắc phục các lỗ hổng tìm được.

## Thông tin

- **Vai trò:** Technical Lead
- **Website:** [www.yokohama-stadium.co.jp/](https://www.yokohama-stadium.co.jp/)

## Công nghệ

- Nuxt
- Vue
- TypeScript
- Contentful
- Node.js
- Express
- Firebase Functions
- Firestore
- Firebase Hosting
- Cloud Run
- AWS SES
- reCAPTCHA
- Github Action
- Docker
- Trivy
- Semgrep
- Gitleaks

## Dịch vụ thể hiện qua dự án

- [Website doanh nghiệp & nền tảng nội dung](https://tmtuan.dev/vi/services/web-platforms)
- [Hạ tầng Cloud](https://tmtuan.dev/vi/services/gcp-cloud-infrastructure)

## Bài viết liên quan

- [Knowledge Base docs-as-code + Context Graph cho portfolio 15 dự án](https://tmtuan.dev/vi/articles/knowledge-base-docs-as-code-context-graph)
- [Truy vết HTTP 500 chỉ xảy ra với Googlebot, xuyên Next.js, Cloud Run và hosting edge](https://tmtuan.dev/vi/articles/googlebot-500-firebase-hosting-nextjs)

## Structured data (JSON-LD)

```json
{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://tmtuan.dev/vi/projects/yokohama-stadium#webpage","url":"https://tmtuan.dev/vi/projects/yokohama-stadium","name":"Yokohama Stadium — Web & tường thuật trận đấu","description":"Website chính thức của Yokohama Stadium (ハマスタ) kèm hệ thống tường thuật trận đấu trực tiếp — kiến trúc tĩnh trên CDN, pipeline serverless hướng sự kiện trên Google Cloud và AWS.","inLanguage":"vi","isPartOf":{"@id":"https://tmtuan.dev/#website"},"about":{"@id":"https://tmtuan.dev/#person"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang chủ","item":"https://tmtuan.dev/vi"},{"@type":"ListItem","position":2,"name":"Dự án","item":"https://tmtuan.dev/vi/projects"},{"@type":"ListItem","position":3,"name":"Yokohama Stadium","item":"https://tmtuan.dev/vi/projects/yokohama-stadium"}]}]}
```