レシピ動画メディア 「DELISH KITCHEN」
## サービスの概要 ユーザーの料理体験をより良いものにするため、「だれでも簡単においしく作れる」をコンセプトとして料理レシピの動画を毎日配信するサービス ## サービスのカテゴリ webサービス・スマホアプリ・ 業務システム・自社プロダクト ## 担当した役割 - 企画・要件定義・設計・コーディング・テスト・コードレビュー・運用保守・データ分析を担当 - フルスタックエンジニアとして開発を担当 ## 使用技術や開発環境 - フロントエンド：Vue.js, Nuxt.js, Node.js, Express, Jest - バックエンド：Golang, Echo, swaggo, govalidator, dbr, go-cmp, gomock, golangci-lint, pyroscope - インフラ：AWS (Route53, EC2, AutoScaling, ECS on Fargate, CodeBuild, CloudFront, S3, RDS, Lambda, CloudWatch, Cognito), Elasticsearch - ログ/分析：Fluentd, TreasureData, Redash, Databricks - 開発/運用ツール：Github, Github Actions, CircleCI, storybook, Datadog, Sentry, PagerDuty, Pingdom - パッケージ依存関係更新ツール：Renovate ## 取り組み ### インフラ系・その他 - 新規 API サーバーのインフラ構築 - 必要な AWS リソース `Route53`, `ALB`, `ECS`, `RDS`, `Secret Manager` を作成 - ECS タスクが異常終了した際に Slack へ通知する機構の作成 - `AWS EventBridge` で タスクの状態変化を検知 - `AWS Lambda` にて受け取ったコンテナ情報をメッセージとして整形の上、`AWS Chatbot` 経由で Slack へ通知 - BI ツール Redash を `docker on EC2` から `ECS on Fargate` へリプレイス - `terraform` でインフラの構築・管理 - `ecspresso`を活用したECS サービスのデプロイの実装 - 開発環境へマージした際に、マージされたプルリクストをリスト化、および本番環境へのプルリクエストを自動生成 - チーム開発における本番リリースの効率化のため - `Github Actions`にて`git-pr-release` によりリリース用のプルリクエストを生成 - 運用監視の対応 - システムの異常時に開発メンバーがすぐに気づき対応できるよう `Slack` へ必要な情報の通知を実施 - 主な監視対象は、`AWS Health` イベントや `Datadog` によるアラート (ex. サーバー・データベースの CPU 使用率、メモリ使用率)、`Sentry` によるサーバーエラーなど - 都度通知の詳細を確認しながら、事象の重要度・緊急度によって対応を決定 ### バックエンド系 - 新規 API サーバーや新規機能のテーブル設計・API 設計 - データの整合性を保つための適度な正規化 - 一貫性や分かりやすさ・冗長性を排除した命名規則 - データの整合性を保つための外部キーの設定・パフォーマンス向上のためのインデックス最適化。etc. - コミット時などで自動で静的解析 `golangci-lint`, `fmt` をする仕組みの導入 - `gofumpt`, `golangci-lint` を docker でインストール・静的解析をできるように - `lefthook` によりコミット時に自動で静的解析できるように - Go で API サーバーを設計・実装 - フレームワークとして echo を利用 - オニオンアーキテクチャで開発 (presentation層・domain層・datasource層) - `go-cmp`, `gomock` を活用した Go のテストコードの作成 ### フロントエンド系 - Web メディアサービスの `CoreWebVitals` の改善 - [LCP] Nodejsのバージョンアップに伴うサーバーのパフォーマンス改善 - [LCP] 画像を返却する`AWS CloudFront`にて、`Brotli`形式(ファイルサイズを縮小するアルゴリズム)の圧縮をできるように設定 - [FID] 読み込み最適化 (`dynamic import`・`lazy loading`) - [FID] 軽量ライブラリへの置き換え (`moment.js` -> `day.js`, `lodash` -> `native js method`) - [CLS] レンダリング時にレイアウトシフトが発生させていたカルーセルライブラリ`hooper`をレイアウトシフトを抑制する自作のカルーセルに置き換え - [CLS] レンダリング時にレイアウトシフトを発生させていた広告に対して、事前に表示領域を確保してレイアウトシフトを軽減するよう修正 - `Renovate` を活用したパッケージ更新の運用改善 - 依存関係更新の検知およびPR作成の自動化 - 自動マージ設定 - 【現在対応中】`Nuxt 2` から `Nuxt 3` へのアップグレード - 移行戦略の策定 - 状態管理フレームワークを `Vuex` から `Pinia` への移行