こんにちは、近藤悠斗です。
私は以前，研究用データを取るために作成しているサイトのフロントエンド部分を担当していました．それらのファイルにCI/CDを導入したのでどのようなワークフローを作成したかと，作る際に考えたことをまとめていこうと思います．
1. はじめに
まずは要件の定義から始めました．とりあえずフロントエンドについて一覧で書きます．バックエンドなどの要件は他のメンバーに任せます．
- あまり多くのコストを掛けずにそれなりの見た目になること
- コンテナで動作すること
- Nginx上で動作すること
- UIを変更した後、すぐにプレビューが見れること
- 一度作り始めたら、UIの部分に注力できること
以上のことを満たすように作り始めました．
2. 技術選定
上記の要件を満たすように技術選定します．まずは簡単にそれなりの見た目になるということで，以前に使ったことがあるReact+MUIを使用することにしました．初めはNext.jsを考えていましたが，log取得との兼ね合いでNginxを使用しなければいけないため辞めました．
次にコンテナ環境で素早くテストするためにDockerfile，docker-composeを使用することにしました．DockerfileはNode.jsのファイルが重いため、マルチステージビルドを採用しました．
最後にUIを作成している時点でコンテナの作成について意識したくなかったので，Github Actionsを使用してDockerfileをビルドして，DockerHubにアップロードすることでCI/CDを実現することにしました．
最後にバックエンドと同時に開発を進めるため，FastAPIを使用してテスト用バックエンドを作成し，固定のデータを返すAPIを設置しました．
3. 実装(CI/CDまで)
実際に構築したパイプラインの図です．めっちゃ分かりにくいのでそのうち直します()．結局プログラムを書く時に関わるのは青色のlocal, container local, Pod k3sの部分だけです．
localは完全に端末のローカル環境で立ち上がります．ライブラリなども端末に入っている必要がありますが，ビルドが不要なので書きながら確認できます．UI部分を確認するときにはこちらを使用しました．
container localでは，フロントエンドとテスト用のバックエンドがコンテナで立ち上がります．ビルド時間は掛かりますが，本番に近い環境でAPIのテストができます．ボタンの内部実装など，バックエンドとの通信が発生する部分を作成する時に使用しました．
Pod k3sは，研究室サーバでのテスト環境なのですが，この段階での一番の特徴はgithub actionsによってCIを通過したものが自動的にdockerhubにpushされることです．これによって，k3s側でimagepullpolicyをalwaysにしておけばすぐにk3s環境での確認ができます．ちなみにこの段階ではテスト用のバックエンドは含まれていません．
CI部分とコンテナの作成が自動化されているお陰で，CDまで完全に自動化したい場合にはArgoCDを導入してマニフェストリポジトリを作成するだけです．
4. 感想とまとめ
以上が実装までで考えたこと，行ったことになります．実は最終的にはこのサイトは使用しない事になってしまったのですが，CI/CDの練習としてはかなりいいものになったと思います．自力でパイプラインを構築するのはこれで3回目なので，完成までの流れも定型化してきたと思います．
基礎知識を学び実践して定着させることは，IT技術の学習にかなり有効なので，今後も継続的に取り組んでいけたら良いなと思っています．