どんなことをやるかというと、WEBサーバーのindexファイルを Gitlab に Push すると WEBサーバーのindexファイルを更新するという内容になります。
更新の部分では、以下の流れにしようと思っています。
1. 既存の indexファイルをファイル名に時刻を付けて move して保存
2. Gitlab のプロジェクトを WEBサーバーの /tmp にクローン
3. 新しい indexファイルを WEBサーバーの /var/www/html/ にコピー
4. クローンしたプロジェクトの削除
では実際にやってみようと思います。
まず、gitlab-runner を 構築したサーバーに apatch を導入します。
sudo apt update sudo apt install -y apache2 sudo systemctl enable --now apache2gitlab-runner が操作をできるように /var/www/html の権限を変更します。
sudo chown -R gitlab-runner:www-data /var/www/html sudo chmod -R 775 /var/www/html以下のような WEBページを作成してちゃんとページが表示されるか確認します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Apache CI/CD デモ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5 text-center">
<div class="card shadow border-0 bg-primary text-white p-4 mb-4">
<h1 class="display-4 fw-bold">Eclipse first, the rest nowhere</h1>
<p class="lead">唯一抜きん出て並ぶものなし</p>
</div>
<div class="card p-4 text-start shadow-sm">
<h5>ビルドステータス</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item"><b>Webサーバー:</b> Apache/2.4 (Ubuntu)</li>
<li class="list-group-item"><b>更新日時:</b> BUILD_TIME_PLACEHOLDER</li>
<li class="list-group-item"><b>コミットID:</b> COMMIT_REF_PLACEHOLDER</li>
</ul>
</div>
</div>
</body>
</html>
こんな感じになります。
Gitlab にログインします。
今回は新しくグループを作成してプロジェクトを用意しました。
前回同様にプロジェクトには タグ web-demo で gitlab-runner を連携させています。
gitlab-runner がどのように動くかを指示するため .gitlab-ci.yml を作成します。
stages:
- deploy
deploy-to-apache:
stage: deploy
tags:
- demo-web # Runner登録時のタグ名
script:
- echo "=== 1. 既存の index.html を時刻付きでバックアップ ==="
- TIMESTAMP=$(date "+%Y%m%d_%H%M%S")
- |
if [ -f /var/www/html/index.html ]; then
mv /var/www/html/index.html /var/www/html/index.html_${TIMESTAMP}
fi
- echo "=== 2. GitLab のプロジェクトを /tmp にクローン ==="
- rm -rf /tmp/my-project
- git clone $CI_REPOSITORY_URL /tmp/my-project
- echo "=== 3. クローンしたファイル内の文字列を置換 ==="
- CURRENT_TIME=$(date "+%Y-%m-%d %H:%M:%S")
- sed -i "s/BUILD_TIME_PLACEHOLDER/$CURRENT_TIME/g" /tmp/my-project/index.html
- sed -i "s/COMMIT_REF_PLACEHOLDER/$CI_COMMIT_SHORT_SHA/g" /tmp/my-project/index.html
- echo "=== 4. 置換済みの index.html を /var/www/html/ にコピー ==="
- cp /tmp/my-project/index.html /var/www/html/index.html
- echo "=== 5. /tmp にクローンしたプロジェクトを削除 ==="
- rm -rf /tmp/my-project
- echo "=== デプロイ完了 ==="
プロジェクトで新しいファイルの作成をクリックし
※この時点でパイプラインが動くと思っていなかったので、コピーする用のindexファイルがなくパイプラインの処理がエラーになりますが気にしないでください。ｗ
では、VScode で indexファイルを新しく作って Gitlab に push してみたいと思います。
デザインのベース色を（青）から（緑）にしてみましょう。
具体的には、<div class="card shadow border-0 bg-success text-white p-4 mb-4"> の bg-primary 部分を bg-success に変えています。
新しい index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Apache CI/CD デモ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5 text-center">
<div class="card shadow border-0 bg-success text-white p-4 mb-4">
<h1 class="display-4 fw-bold">Eclipse first, the rest nowhere</h1>
<p class="lead">唯一抜きん出て並ぶものなし</p>
</div>
<div class="card p-4 text-start shadow-sm">
<h5>ビルドステータス</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item"><b>Webサーバー:</b> Apache/2.4 (Ubuntu)</li>
<li class="list-group-item"><b>更新日時:</b> BUILD_TIME_PLACEHOLDER</li>
<li class="list-group-item"><b>コミットID:</b> COMMIT_REF_PLACEHOLDER</li>
</ul>
</div>
</div>
</body>
</html>
Gitlabに戻ってページを更新してみると無事に成功していますね。
indexファイルを Gitlab に Push することで複数の処理を自動でこなすように CI/CD を動かすことができましたね。
次回は、もうちょっと今時っぽくこのWEBサーバーをコンテナ化して、CI/CD を動かしてみようと思います。
