Code BeaverCode Beaver

Skills

現在の専門領域と、SI企業時代から培ってきた技術的基盤をまとめています。

現在の専門領域

ReactTypeScriptNext.jsフロントエンド設計状態管理・API連携テスト・保守改善

技術的基盤

Java / JSPTomcatMySQL / Oracle / SQL ServerAPI・DB設計Webシステム全体の理解

対応できる業務

新規開発既存システム改善レガシー刷新バックエンド担当者との仕様調整

このポートフォリオサイト自体の技術構成

このサイト(ポータル・各feature共通の基盤)で使用している技術スタック、CI構成、デプロイ環境です。

FRONTEND

フロントエンド

Next.js App Router構成のポータル兼feature集。UIは外部ライブラリに頼らず、Tailwind CSSベースの自前コンポーネントとして育てています。

Next.js 16 (App Router)React 19TypeScript 6Node.js 24Tailwind CSS v4TanStack QueryZodRechartsTiptapReact Aria
BACKEND / API

API サーバー

GinでHTTPルーティングし、GORMでMySQLにアクセスするcontroller→service→repositoryの3層構成。featureごとにドメインロジックを分離しています。

GoGinGORMgolang-migrateSQLite(テスト用)
DATABASE

データベース

MySQLをDockerコンテナで運用。コンテナ外には公開せず、Go API経由でのみアクセスします。

MySQL
CI/CD

CI/CD

GitHub Actionsでmainブランチへのpush・PRごとにNext.js側・Go側それぞれのlint/build/testを自動実行しています。mainへのマージ後はDockerイメージのビルド・GHCRへのpush・Lightsailインスタンスへのデプロイまで自動で行われます。

GitHub ActionsESLintgo vetgo testGHCR
INFRASTRUCTURE

インフラ / デプロイ

AWS Lightsail Instance(VPS)1台の上で、Next.js・Go API・MySQL・リバースプロキシをDocker Composeでまとめて動かしています。マネージドサービスに分散させるより、VPS運用そのものを経験することを優先した構成です。問い合わせフォームのメール転送のみAWS SESを利用しています。

AWS LightsailDocker ComposeCaddyLet's EncryptAWS SES

設計上のポイント

  • feature一覧はコード内で静的に定義し、ディレクトリの自動スキャンやCMS等の動的管理は行わない
  • DBマイグレーションはgolang-migrateで明示的なSQLとして管理し、GORMのAutoMigrateは使わない
  • DBアクセスはGo API経由のみとし、Next.js側から直接DBには接続しない
  • 公開デモの書き込みエンドポイントは READ_ONLY モードで丸ごと止められるようにしてある