こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目となり、一年早かったなとしみじみしています。
昨年PR TIMESでは企業ページをフルスクラッチでReactにリプレイスするプロジェクトを行い、モダンなフロントエンド技術を導入することができました。
また現在、別プロジェクト（リポジトリ）でもReactを用いてフロントエンドを実装するようになり始め、PR TIMES全体のフロントエンドのReact化が進行しています。
しかし、現状のフロントエンドの構成では将来的に負債を抱えてしまう（現在進行形でできている）ため、新しいフロントエンドの開発基盤を構築しました。
以前の構成
以前は、書き直した企業ページの実装も、残っているレガシーな実装やバックエンドの実装が含まれる PRTIMES/prtimes というリポジトリで管理されており、そのリポジトリの replace というフォルダに格納していました。
prtimes
├── config
├── file-cache
├── frontend <-- 旧フロントエンドのコード(JS,jQuery,Vue.js,SCSS,etc...）
├── htdocs
├── replace <-- 新しいフロントエンドのコード（React）
├── scss
├── serviceworkers
├── tests
├── tmp
├── upload_files
├── uploads
└── vendorこの構成にすることで、PR TIMESの既存のフロントエンドコード（JavaScript,jQuery,SCSSなど）のデプロイフローをそのまま利用できるため、インフラや CI/CD を新しく構築せずにReactを導入することができました。
しかし、この構成には以下の課題がありました。
- フロントエンドの実装が一つのリポジトリにまとまっておらず、各プロジェクトのリポジトリに分かれている
- デプロイのために、開発者の手元でビルドした成果物をGitHubで管理する必要がある
1の課題に関して、現状では一つの実装済みのコードはコピーペーストして各プロジェクト間で共有していますが、稀に別リポジトリで実装されていることを知らず再実装されることなどがあり、余計な工数がかかったり、各プロジェクト共通のコンポーネントに若干の実装のズレが発生したりしていました。
また、2の課題では、Pull Requestを出すたびに別のPull Requestのバンドルファイルとコンフリクトが発生したり、開発者の手元のコードのバージョンが古いことに気づかないまま、ビルドしてしまいバグなどが先祖返りしてしまう可能性がありました。
上記の課題を解決するために、この度リポジトリの分割とReactコードの新たなデプロイフローの構築を行いました。
現状の（より望ましい）構成
新しい構成では、新たなリポジトリ（PRTIMES/prtimes-frontend ）を作成し、フロントエンドの実装を集約しています。ディレクトリ構成は以下の通りです。
.
├── .githooks
├── .github
├── apps
│ └── prtimes
│ ├── package.json
│ ├── src/
│ ├── tsconfig.json
│ ├── webpack.common.js
│ ├── webpack.dev.js
│ ├── webpack.prod.js
│ └── yarn.lock
├── .eslintrc.json
├── .prettierrc.json
├── Makefile
├── package.json
├── README.md
└── yarn.lockこのディレクトリ構成はモノレポを意識した構成になっており、プロジェクト共通のコンポーネントや関数、また ESLint/Prettier や Git Hooks なども共有できるようにしています。また、フロントエンドの実装を集約したことで、古いリポジトリに存在していたreplaceフォルダを削除できました。
新しいデプロイフロー
新しいデプロイフローではGitHub Actions上で PRTIMES/prtimes-frontend のビルドとS3へのデプロイをするようにしました。当たり前ですが、こうすることでGitHubに成果物をコミットすることなく、常に最新のコードをビルドしデプロイできるようになります。
また、旧デプロイフローではオンプレミスのサーバーにデプロイしCloudFrontを通してビルドした成果物を配信していましたが、新しいデプロイフローではS3にデプロイしFastlyを通して配信するようにインフラ構成も変更しました。
まとめ
フロントエンド開発基盤の構築はまだまだ始まったばかりで、今後「各プロジェクトのReactコードの移行」、「yarn workspaceなどのモノレポツールの導入」、「Reactのビルドツールをwebpackからesbuildに乗り換える」、「Storybookの導入」などなど、様々なことをしようと思っています。また、運用も始まったばかりでこれから別の課題が次々と上がってくると思うので引き続き改善を行なっていきたいと思います。
