当社のフロントエンド開発におけるGitとCIの利用例

当社ではWebサイトのフロントエンド開発にGitとCIを利用することが増えています。これまで表立ってGitとCIの利用方法を伝えてきませんでしたが、当社の利用方法を知っていただくことでより効率的な連携が図れるステークホルダーのみなさま（特にお客様やシステムを担当されているみなさま）も多いと感じています。そこで、この記事では当社のフロントエンド開発における典型的なGitとCIの利用方法を紹介します。なお、要件に合わせて利用方法を調整しているプロジェクトも多いことはご承知おきください。

典型的な利用方法

フロントエンド開発（のうちUI開発者が主導する部分）は多くの場合、Gitリポジトリ1つ（GitLab）と検証環境1つ（Apache）を利用しています。 GitリポジトリにはCI環境が紐づいています（GitLab CI）。Gitの操作としてはブランチ作成、コミット、プル、プッシュ、マージなどを行います。

また、多くのプロジェクトではHTML・CSS・JSは直接編集せず、元になるファイル（ejs、Sass、TypeScriptなど）から生成しています。作業ブランチには元ファイルのみをコミットしHTML・CSS・JSはコミットしないことがほとんどです。生成したファイルは中身が1行になることも多く、作業ブランチにコミットするとマージで競合が発生しやすくなるためです。

作業を検証環境へ反映する操作はGitリポジトリで行います。具体的には作業ブランチを専用ブランチ（demoブランチ）にマージし、プッシュします。demoブランチがプッシュされると、CI環境は次のような処理を実行し、作業結果を検証環境へ自動反映します。

1. 元ファイルからHTML・CSS・JSなどを生成
2. 品質の機械検証
3. 生成したファイルをGitリポジトリの専用ブランチ（dist/demo）にコミット
4. 生成したファイルを自動的に検証環境へ反映（rsync）

検証環境にはFTPなどではアップロードできないようにしており、常にCI環境経由で更新しています。

また、CI環境での品質の機械検証で問題が見つかった場合は、検証環境への反映などを行いません（CIが失敗します）。この一連の処理は1～2分で終わることが多く、長くても10分程度です。

検証を終え、納品する場合は作業を専用のブランチ（mainブランチ）へプッシュします。mainブランチがプッシュされると、CI環境は次のような処理を自動で実行します。

1. 元ファイルからHTML・CSS・JSなどを生成
2. 品質の機械検証
3. 生成したファイルをGitリポジトリの専用ブランチ（dist/main）にコミット

多くのプロジェクトで生成したファイルを納品していますが、dist/mainブランチをプルすると生成したファイルの差分を確認できます。

なお、生成したファイルをGitリポジトリの専用ブランチにコミットする処理は2024年度から試行しており、プロジェクトによっては実施していません。

この一連の仕組みにはメリットがいくつかあります。

• 元ファイルからHTML・CSS・JSなどを生成することで、定型的な処理の機械化
• Gitに履歴が残ることで、過去状態の確認や差し戻しが容易
• 検証環境へ自動的にアップロードすることで、アップロード漏れや削除漏れ、先祖返りの抑制
• 品質の機械検証を実施することで、品質低下の早期発見
• 生成したファイルをGitリポジトリにコミットすることで、生成ファイルの差分確認が容易

一方で、この仕組みにもデメリットはいくつかあります。

デメリットの1つ目はGitを覚えないと使えないことです。Gitの習熟には一定の時間がかかり、それまでは作業のペースが落ちがちです。当社では入社後の研修に取り入れることで、習得のサポートを行っています。

別のデメリットは、CI環境でHTML・CSS・JSなどを機械的に生成しても、それを機械的に受け入れる先がほとんどないことです。社内では検証環境やGitリポジトリに自動反映してますが、社外との受け渡しは手作業が多いです。その理由の1つは、当社におけるGitとCIの利用状況を伝えられていないためと考え、この記事を執筆しました。

おわりに

当社のフロントエンド開発ではGitとCIの利用が進んでおり、品質の機械検証や検証環境やGitリポジトリへの反映を行っています。ステークホルダーのみなさまと機械的なデータの受け渡しも技術的には可能です。

この記事で紹介した利用方法は2020年ごろから取り組み始め、少しずつ変更してきました。今後も変わっていくと考えていますが、ステークホルダーのみなさまとより効率的に連携できるようになれば幸いです。

なお、この記事の画像ではAWS アーキテクチャアイコンを利用しています。