自社テックブログ開発
■概要 自社テックブログの企画、要件定義、設計、開発、運用・保守を担当。 ・規模感:2500PV/月(2023/03現在)のテックブログ ・チーム構成:3名 ・役割:リーダー ■目的 自社テックブログで技術記事を発信することで、 会社の認知度の向上やお問い合わせによる案件獲得、採用に繋げることが目的。 ■使用技術や開発環境 ・フロントエンド:React, Next.js, TypeScript, Emotion ・バックエンド:Strapi (ヘッドレスCMS) ・状態管理:Context ・UI管理:React Cosmos ・その他:GCP(Cloud Run, Cloud Storage, Cloud SQL, Cloud Build, Cloud Load Balancing) ■取り組んだ課題 <<課題の内容>> 1. ディレクトリ構成、コンポーネント設計 メンバーが開発しやすい構成にすることが目的。 2. AWSからGCPへ移行 大手ECサイト開発でSigned Http Exchanges(以下SXG)を使用する話があり、 SXGはDigiCert, Googleの証明書でしかサポートしていないため、一度テックブログをGCPに移行して試してみるのが目的。 <<課題の解決>> 1. ディレクトリ構成、コンポーネント設計 ディレクトリ構成は大手ECサイト開発でも使用しているAtomicDesignを採用しました。 プロジェクト毎に構成が違うと混乱しそうだった点と学習コストがない点を考慮しました。 AtomicDesignの場合、organisms, moleculesの配置に困ることがありますが、 実装前にコンポーネントを洗い出すことでメンバーへの負担を減らしました。 また、コンポーネント毎にディレクトリ分けすることで実装しやすくなるようにしました。 ``` /ComponentName ComponentName.fixture.tsx ReactCosmosファイル ComponentName.styles.ts Styleファイル ComponentName.tsx コンポーネント実装ファイル index.ts コンポーネントをexportするファイル ``` こちらはスクリプトを用意して`npm run create ComponentName`で作成できるようにもしました。 2. AWSからGCPへ移行 実務で一からインフラを構築することが初めてでしたが、GCPのベストプラクティスに沿って構築できたと思います。 構成詳細 ``` アプリ周り ・Cloud Storage(App - SSG) ・Cloud Build(mainブランチにpush) ・Cloud Build(webhook - 記事の公開・非公開・更新) ・Cloud Load Balancing(ルーティング) Strapi周り ・Cloud Run(Strapiコンテナ起動用) ・Cloud SQL(MySQL) ・Cloud Storage(メディアライブラリのアップロード先) ・Cloud Build(mainブランチにpush) ``` 本テックブログはSSGで実装しているのでCloud Storageを保存しています。 Cloud Storageはデフォルトでキャッシュを持っていたので、保存時にキャッシュを上書きするなどの工夫を行いました。 <<成果>> 1. ディレクトリ構成、コンポーネント設計 開発時に苦労することもなくスムーズに進めることができました。 こちらのディレクトリ構成は良かったので、後々大手ECサイト側にも反映してリファクタリングを行いました。 2. AWSからGCPへ移行 SXGはまだ試せていませんが、その土台ができました。 チーム内でGCP構築経験のあるメンバーがいなかったので、共有してチームのGCPの理解を深めることができたのも良かったです。 以上です。