CASE STUDY / 協会公式Webサービス
KOSEA
会員・管理者機能から外部連携、デプロイ・運用までを担当。運用中のデータ増加による読み込みの課題を調査し、データ取得範囲とpublicationの処理構造を改善しました。
サイトを見る協会活動を支えるWebサービス
한국중소상공인협회(韓国の中小商工人を対象とする協会)の公式Webサービスです。一般ユーザー・会員向けのWebと、日々の情報更新や会員対応を担う管理者システムを開発・運用しています。
会員申請、情報発信、問い合わせ対応を扱い、公開画面と管理業務の両方を支えるサービスとして構築しました。
開発から、公開後の運用まで
フルスタック開発とWebサービス運用を担当。ユーザー向けWeb、管理者機能、MongoDBのデータ管理、外部API連携、画像アップロードを実装しました。
Cloudtypeへのデプロイ、Cloudflare DNS、テクニカルSEO、保守と障害対応も担当しています。
KEY FEATURES
ユーザーと運営者、両方の業務をつなぐ
会員申請・審査
5段階の会員登録ウィザード、申請、管理者による承認・却下、会員状態の管理、会員企業の公開ディレクトリ。
掲示板・コンテンツ管理
お知らせ、報道、会員企業、資料室の各コンテンツと管理者向けCRUD。
非公開の問い合わせ
非公開投稿、パスワードによる問い合わせ確認、管理者からの回答。
変更を見据えた画像ストレージ
Cloudflare R2への画像アップロードとStorage Adapter構造。R2・S3・Local・Azure Stubという構成で、保存先変更に備えました。
Newswire API連携
HMAC SHA-256認証を用いた記事データの同期。
検索・共有のための基盤
動的robots.txt、sitemap.xml、canonical、Open Graph、Twitterメタデータ、JSON-LDを整備。Google Search Console、Naver Search Advisor、Daumにも対応しました。
TECH STACK
技術と実装の関係
- Meteor 3 / React / JavaScript
- ユーザー向けWeb / 管理者システム
- MongoDB
- 会員・掲示板・コンテンツのデータ管理
- Tailwind CSS
- 画面とUIの実装
- Cloudflare / Cloudtype / Git
- デプロイ・DNS・バージョン管理
- Cloudflare R2
- 画像アップロード・保存
- REST API
- 外部サービス連携
PERFORMANCE CASE STUDY
データ増加で見えた、読み込み構造の課題
公開後の掲示板で発生した遅延を、画面の表示だけでなくPublicationとデータ取得の範囲から調査しました。
Problem — 遅延とGateway Error
掲示板の記事データ増加後、ページへのアクセスが非常に遅くなり、502 / 524が発生しました。
Investigation — 実際の取得範囲を確認
Meteor publicationとデータ読み込みの構造を確認し、ページで要求・取得されるデータの範囲を調べました。
Cause — 一括読み込みの構造
1ページで約600件の記事データを一度に読み込む構造を確認しました。
Improvement — 取得範囲を見直す
Paginationとデータ取得範囲を改善し、Meteor publicationのobserve処理構造も点検・改善しました。
性能の問題を分析し、データ読み込み構造を改善した事例です。改善率や短縮時間は計測値がなく、502 / 524の完全解消を示すものではありません。
SERVICE STRUCTURE
サービスを構成する要素
実装した主な責務を整理した構成です。詳細な通信経路や内部インフラ構成を表すものではありません。
User Web / Admin
React・Tailwind CSSによる会員向け画面と、審査・コンテンツ・問い合わせの管理画面。
Meteor 3 / MongoDB
会員、掲示板、コンテンツのデータ管理と、publicationを含むデータ提供処理。
Storage / External API
Cloudflare R2への画像保存と、Newswire APIによる記事データ同期。
Deployment / Operation
Cloudtypeへのデプロイ、Cloudflare DNS、SEO、保守・障害対応。
AzureはStorage AdapterのStubであり、Azure Storageを本番運用したという意味ではありません。
実装だけでなく、運用から学ぶ
会員機能・管理者システム・外部連携・ストレージ・SEO・デプロイを、実際のサービス運用につなげる経験を得ました。
データ量の増加に伴う課題に対し、表示する画面だけでなく、取得範囲とpublicationの処理構造を確認する重要性を学びました。