ニフクラDevOps with GitLabでカスタムDockerイメージエンハンス開発作業環境準備（CI/CDを実行するGitLabRunnerの作成まで）

この記事は、ニフクラブログで2022-12-20に公開された記事を移転したものです。

こんにちは、CRE部技術支援チームです。

前回ブログ記事に引き続き
今回はDevOps with GitLabサーバーでGitLabRunner(他社サイトへのリンクです)を使ったCI/CDパイプラインでの自動化作業について紹介します。

はじめに
前提条件
検証概要
- 検証1
- 検証2
作成するニフクラリソース
環境設定
検証1実施
検証2実施
- 開発作業を想定した動作確認
まとめ
注意事項

はじめに

近年ソフトウェア開発におけるビルドやテスト・デリバリー・デプロイメントを自動化するCI/CDが注目されています。

手動でのリリース作業を自動化したい
自動化テストを導入して作業を効率化したい

等々の要望から開発現場でのCI/CDの導入が増えています。
ニフクラDevOps with GitLabではGitLabRunnerを使って容易にCI/CD環境を構築することができます。
今回はGitLabRunnerを用いて前回ブログ記事で手動で実施した内容を自動化作業に置き換える検証を実施します。

前提条件

本ブログ記事は、以下の知識がある方を想定しています。

ニフクラの基本的な操作ができる(サーバー作成、ネットワーク構築)
Dockerについての基本的な設定や操作ができる
WEBアプリ開発の経験がある

検証概要

検証1

以下➀～➃で.gitlab-ci.ymlファイルの定義内容の検証、GitLabRunnerとCI/CDパイプラインの動作についての確認をします。

①. DockerfileとGitLabRunnerのジョブ実行内容を定義する.gitlab-ci.ymlファイルをgitリポジトリ(developブランチ)に配置します。GitLabサーバーがリポジトリ更新を検知します。

②. GitLabRunnerが.gitlab-ci.ymlの定義に従ってCI/CDパイプラインを実行します。gitリポジトリ(developブランチ)内の資産でDockerイメージをビルドして前回ブログ記事で登録したコンテナレジストリのDockerイメージを更新します。

➂. 更新したDockerコンテナイメージがWEBアプリ検証サーバーへ自動デプロイされます。

➃. WEBアプリ検証サーバーに自動デプロイされたWEBアプリがインターネットに公開されます。

検証2

リポジトリ資産の更新をおこなって、実際に開発作業で想定される以下の内容を確認します。

リポジトリ資産更新→CI/CDパイプライン実行→自動でデプロイ

index.htmlを更新すると上記②～④のCI/CDパイプラインが実行されてWEBアプリ検証サーバーに自動デプロイされたWEBアプリがインターネットに公開されます。

作成するニフクラリソース

検証に利用したリソースは以下の通りです。
※ 前回ブログ記事のリソースを利用します。

リソース	数量
DevOps with GitLabサーバー	1
DevOpsファイアウォール	1
サーバー(検証用)	1
ファイアウォール	1

DevOps with GitLabサーバー作成

DevOps with GitLabサーバーを作成します。
作成方法は以下ヘルプサイト、ユーザガイドを参照ください。
クラウドヘルプ（DevOpsサーバーの作成）
ユーザガイド（DevOps with GitLab：クイックスタート）

項目名	値
サーバー名	dockertest
ファイアウォール	dockertest-fw
パラメーターグループ	dockertestprm

DevOpsファイアウォールを作成します。
作成方法は以下ヘルプサイトを参照ください。
クラウドヘルプ（ファイアウォールグループの新規作成）

DevOpsファイアウォールグループ名	INルール
dockertest-fw	TCP443：ブラウザアクセスで使用しているIPアドレス TCP443：WEBアプリ検証サーバーのグローバルIPアドレス TCP443：開発検証サーバーのグローバルIPアドレス

検証サーバーの作成

WEBアプリ検証用のサーバーを作成します。
作成方法は以下ヘルプサイトを参照ください。
クラウドヘルプ（サーバーの作成）

WEBアプリ検証サーバー

項目名	値
OS	Rocky Linux 8.5
サーバー名	WebAppSrv
ファイアウォール	WebAppSrvFW

検証サーバーのファイアウォール作成

WEBアプリ検証サーバーで使用するファイアウォールを作成します。
今回の検証で自動デプロイされるWEBアプリ用に8085のポートを追加します。作成方法は以下ヘルプサイトを参照ください。
クラウドヘルプ（ファイアウォールグループの新規作成）

ファイアウォール名	INルール
WebAppSrvFW（WEBアプリ検証サーバー用）	TCP22：作業端末のグローバルIPアドレス TCP8080：作業端末のグローバルIPアドレス TCP8085：作業端末のグローバルIPアドレス

環境設定

資産管理用gitリポジトリ作成

ブラウザからDevOps with GitLabサーバーにログインして資産管理用gitリポジトリを作成します。

作成したプロジェクトに移動します。
「Repository」→「Files」を選択します。デフォルトで「main」ブランチが作成されています。「New branch」を選択します。

「Branch name」に「develop」と入力します。「Create branch」ボタンをクリックします。
※ここではgit-flow(他社サイトへのリンクです)の考えをベースに作成しています。

「Repository」→「Files」で「develop」ブランチが表示されます。

「develop」ブランチを選択すると「develop」ブランチに切り替わります。

資産管理用gitリポジトリの作成が完了です。

GitLabRunner作成

ＷEBアプリ検証サーバーでGitLabRunnerを作成します。
※GitLabRunnerはDockerイメージです。

ＷEBアプリ検証サーバーでGitLabRunnerを作成するために設定ファイルを作成します。
作業用の「registry_gitlabrunner」ディレクトリをmkdirコマンドで作成します

$mkdir registry_gitlabrunner

viコマンドで「docker-compose.yml」を作成します。

$vi docker-compose.yml

設定内容は以下です。

docker-compose.yml

version: "3"
services:
  gitlab-runner:
    image: gitlab/gitlab-runner:alpine-v14.10.1
    container_name: gitlab-runner
    restart: always
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - gitlab-runner-config:/etc/gitlab-runner
    healthcheck:
      test: ["CMD-SHELL", "pidof gitlab-runner"]
volumes:
  gitlab-runner-config:

docker-composeコマンドを使用してGitLab Runnerを起動します。

$docker-compose up -d
[+] Running 4/4
 ? gitlab-runner Pulled                                                   13.0s
   ? xxxxxxxxxxxxxx Pull complete                                            1.6s
   ? xxxxxxxxxxxxxx Pull complete                                            9.2s
   ? xxxxxxxxxxxxxx Pull complete                                            9.3s
[+] Running 3/3
 ? Network registry_gitlabrunner_default                Created            0.1s
 ? Volume "registry_gitlabrunner_gitlab-runner-config"  Created            0.0s
 ? Container gitlab-runner                              Started            1.7s

GitLabRunnerが起動して作成は完了です。

GitLabRunner登録

ＷEBアプリ検証サーバーからDevOps with GitLabサーバーへCI/CDを実行するGitLabRunnerを登録します。

作成したプロジェクトに移動します。
「Settings」→「CI/CD」を選択します。「Runners」項目の「Expand」ボタンをクリックして「Runners」項目を展開します。

GitLabRunnerの登録用URLと登録用レジストリトークンが表示されます。
URLとレジストリトークンをコピーしておきます。
※URLとレジストリトークンは何度でも閲覧可能です。

docker-compose runコマンドで起動したコンテナ内に入り、RunnerをGitLabに登録します。登録用URL、登録用レジストリトークンを含めた以下のパラメーターを設定して実行します。

パラメーター	設定値	説明
url	発行された登録用URL
registration-token	発行された登録用レジストリトークン
executor	docker	実行ジョブのタイプ。※Dockerでジョブが実行されるので、ジョブ実行後の手動での環境をクリーンアップ等が不要です。
docker-privileged	なし	操作許可のパラメーター。※GitLab RunnerへＷEBアプリ検証サーバー上でのDockerイメージコンテナ作成を許可します。
description	devops_docker	GitLab Runnerの説明内容
docker-image	docker:stable	実行ジョブ内で使用されるDockerイメージ
docker-volumes	/var/run/docker.sock:/var/run/docker.sock	ＷEBアプリ検証サーバーのDockerデーモンのパス。※DevOps with GitLabサーバーからsocket 経由でＷEBアプリ検証サーバーのDockerデーモンを操作させる許可

docker-compose runコマンドを実行します。

$docker-compose run gitlab-runner register -n \
  --url https://xxxxxxxx.jp-east-1.gitlab.devops.nifcloud.com/ \
  --registration-token xxxxxxxxxxxx \
  --executor docker \
  --docker-privileged \
  --description "devops_docker" \
  --docker-image "docker:stable" \
  --docker-volumes /var/run/docker.sock:/var/run/docker.sock 
-----------省略-----------
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!

DevOps with GitLabサーバーにGitLabRunnerが登録されます。

GitLabRunnerの登録は完了です。

gitリポジトリ開発資産ディレクトリ作成

gitリポジトリ内に開発資産を格納するディレクトリを作成します。

作成したdevelopリポジトリを選択します。

「New directory」を選択します。ディレクトリ名を設定します。ここでは「dev_html」を設定します。「Create directory」ボタンをクリックするとディレクトリが作成されます。リポジトリに戻ると「dev_html」が作成されています。

開発資産ディレクトリ作成は完了です。

gitリポジトリ開発資産(index.html、default.css)作成

次に開発資産ディレクトリにカスタムDockerイメージのWEB画面となる開発資産(index.html、default.css)を作成します。

開発資産ディレクトリをクリックして開発資産ディレクトリに移動します。

「New file」を選択します。

ファイル名に「index.html」設定します。
前回のブログ記事で作成したindex.htmlを更新します。
設定内容は以下です。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="default.css">
    <title>INDEX</title>
</head>

<body>
    <h1>ニフクラINDEX</h1>
    これはGitLabRunnerのCI/CDパイプラインからDeployされたインデックスページです。
</body>

</html>

「Commit changes」ボタンをクリックするとindex.htmlが作成されます。

同様の手順で「default.css」を作成します。
前回のブログ記事で作成したdefault.cssと同じファイル内容を設定します。

開発資産(index.html、default.css)作成は完了です。

gitリポジトリDockerfile作成

CI/CDで必要なDockerfileをgitリポジトリ内に作成します。

作成したdevelopリポジトリを選択します。

「New file」を選択します。

ファイル名「Dockerfile」に入力します。

ファイル内容には以下の内容を記述します。

# カスタムしたコンテナレジストリDockerイメージをベースイメージに使用
FROM 'nginx:latest'
#NGINXコンテナ内部の「/usr/share/nginx/html」に「dev_html」以下のファイルをコピーする
COPY dev_html/ /usr/share/nginx/html

「Commit changes」ボタンをクリックするとファイルが作成されます。

リポジトリに戻ると「Dockerfile」が作成されています。

Dockerfileの作成は完了です。

※このタイミングではGitLabRunnerのジョブを定義する.gitlab-ci.ymlが存在しないのでGitLabRunnerのジョブ、CI/CDパイプラインは実行されません。

検証1実施

.gitlab-ci.ymlファイル定義内容を検証して、GitLabRunnerとCI/CDパイプラインが定義内容に沿った動作をしていることを確認します。

検証1-1 CI/CD設定.gitlab-ci.yml(定義ファイル)作成

CI/CDを定義した.gitlab-ci.yml(定義ファイル)を作成します。 GitLabRunnerは.gitlab-ci.ymlの定義に従ってジョブを起動してCI/CDパイプラインを実行します。

作成したdevelopリポジトリを選択します。

「New file」を選択します。

ファイル名「.gitlab-ci.yml」に入力します。

ファイル内容には以下の内容を記述します。

今回はGitLabサーバーで提供する環境変数(他社サイトへのリンクです)を使用します。以下の環境変数はGitLabサーバーが自動生成＆定義します。

変数名	説明
$CI_REGISTRY_USER	GitLabサーバーが定義するコンテナーレジストリへの読み取り、書き込みをするユーザー。
$CI_REGISTRY_PASSWORD	GitLabサーバーが自動生成する$CI_REGISTRY_USERのパスワード
$CI_REGISTRY	GitLabサーバーが返すコンテナーレジストリのURL

docker stopコマンド、docker rmコマンドについては
Dockerコンテナが手動で停止された場合など、対象のDockerコンテナ存在しないとコマンド結果がエラーとなりジョブが終了します。コマンド結果を無視してジョブの処理を継続させるためにechoを使ってコマンドを実行します。

deploy_job:
  stage: deploy
  script:
#起動中のDockerコンテナ(nifc-nginx)を停止する。
    - echo `docker stop nifc-nginx`
#起動中のDockerコンテナ(nifc-nginx)を削除する。
    - echo `docker rm nifc-nginx`
# コンテナーレジストリのURLにログインする。
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
#.gitlab-ci.ymlファイルと同一階層(./)に格納されているDockerfileの内容でDockerイメージ(タグ名：$CI_REGISTRY/xxxxxxx/devops_docker)をビルドする。
    - docker build -t $CI_REGISTRY/xxxxxxx/devops_docker:latest .
#docker pushしてコンテナレジストリのDockerイメージ(タグ名：$CI_REGISTRY/xxxxxxx/devops_docker)を更新する。
    - docker push $CI_REGISTRY/xxxxxxx/devops_docker:latest
#docker pullして最新をダウンロードする。
    - docker pull $CI_REGISTRY/xxxxxxx/devops_docker:latest
#最新Dockerイメージ(タグ名：x$CI_REGISTRY/xxxxxxx/devops_docker)からDockerコンテナ(nifc-nginx)を作成して起動する。8085ポートからのアクセスを許可する。
    - docker run -d -p 8085:80 --name nifc-nginx -it $CI_REGISTRY/xxxxxxx/devops_docker:latest

「Commit changes」ボタンをクリックするとファイルが作成されます。

リポジトリに戻ると「.gitlab-ci.yml」が作成されています。

.gitlab-ci.ymlの作成完了のタイミングでGitLabRunnerのジョブが起動してCI/CDパイプラインを実行します。.gitlab-ci.yml作成以降はgitリポジトリ内の資産が変更されるたびにGitLabRunnerのジョブが起動してCI/CDパイプラインを実行します。

「CI/CD」→「Jobs」を確認するとGitLabRunnerがジョブを実行していることが確認できます。

.gitlab-ci.ymlの作成は完了です。

検証1-2 GitLabRunner CI/CDパイプライン実行_コンテナレジストリ更新

GitLabRunnerのCI/CDパイプラインの処理でdocker loginコマンド、docker buildコマンド、docker pushコマンドを実行してコンテナレジストリのDockerイメージを更新します。

検証1-3 GitLabRunner CI/CDパイプライン実行_自動デプロイ

GitLabRunnerのCI/CDパイプラインの処理でdocker pullコマンド、docker runコマンドを実行してWEBアプリ検証サーバーにWEBアプリをデプロイします。

検証1-4 WEBアプリ公開

WEBアプリ検証サーバーの8085ポートにブラウザでアクセスするとindex.htmlが表示されてWEBアプリがデプロイされていることが確認できます。

index.htmlのページ以外は404になります。

※前回ブログで起動したコンテナイメージも8080ポートにブラウザでアクセスするとWEBアプリ画面が表示されます。

WEBアプリ検証サーバーにsshでアクセスしてdocker psコマンドを実行すると以下のようにデプロイされたDockerコンテナを確認することができます。今回検証のコンテナイメージはNAME：「nifc-nginx」で8085ポートで起動しています。 ※前回ブログで起動したコンテナイメージも8080ポートで起動していることが確認できます。

# docker ps -a
CONTAINER ID   IMAGE                                  COMMAND                  CREATED          STATUS                   PORTS                                   NAMES
xxxxxxxxxxxxxx   xxxxxxx.jp-east-1.gitlab.devops.nifcloud.com/xxxxx/devops_docker:latest   "/docker-entrypoint.…"   3 minutes ago   Up 3 minutes                 0.0.0.0:8085->80/tcp, :::8085->80/tcp   nifc-nginx
xxxxxxxxxxxxxx   xxxxxxx.jp-east-1.gitlab.devops.nifcloud.com/xxxxx/devops_docker:latest            "/docker-entrypoint.…"  21 hours ago   Up 21 hours            0.0.0.0:8080->80/tcp, :::8080->80/tcp   xxxxxxx

検証2実施

リポジトリ資産の更新をおこなって、実際に開発作業で想定されるCI/CD環境の動作を確認します。

開発作業を想定した動作確認

開発作業になるとWEBアプリ、WEBサービスを構成するhtml、css、内部プログラム(javaファイル、phpファイル等)の資産が頻繁に更新されます。
検証2では「index.html」ファイルを更新してCI/CD環境で以下の内容が実行されることを確認します。

リポジトリ資産更新→CI/CDパイプライン実行→自動でデプロイ

開発資産ディレクトリをクリックして開発資産ディレクトリに移動します。

「index.html」をクリックします。設定内容は以下です。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="default.css">
    <title>INDEX</title>
</head>

<body>
    <h1>ニフクラINDEX</h1>
    これはGitLabRunnerのCI/CDパイプラインからDeployされたインデックスページです。
　<br>
    ファイルは更新されました。
</body>

</html>

「Commit changes」ボタンをクリックするとindex.htmlが更新されます。

GitLabRunnerがジョブを実行していることが確認できます。

WEBアプリ検証サーバーの8085ポートにブラウザでアクセスするとindex.html内容の更新が確認できます。

まとめ

今回GitLabRunnerの作成＆登録、CI/CDパイプラインの実行手順について紹介しました。
今回の要点は以下の内容になります。

WEBアプリ検証サーバーでdocker-compose.ymlとdocker-composeコマンドを用いてGitLabRunnerを作成する。
WEBアプリ検証サーバーでdocker-compose up -dコマンドを用いてGitLabRunnerをDevOps with GitLabサーバーに登録する。
DevOps with GitLabサーバーの対象リポジトリ(main、master、develop等々)に.gitlab-ci.yml(定義ファイル)を配置する。
.gitlab-ci.yml(定義ファイル)に実施するCI/CDスクリプトを定義する。

要点を押さえればCI/CD環境の構築は容易だとご理解できると思います。

次回はカスタムDockerイメージにWEBページを追加するエンハンス作業の検証を実施します。

gitリポジトリブランチ分岐
gitリポジトリブランチのマージリクエスト

ソースコード管理、運用面の観点を加えた DevOps開発作業をより深く理解できる内容になっています。

最後までお読みくださいましてありがとうございました。

注意事項

本記事に記載されている会社名、製品名等の固有名詞は各社の商号、登録商標または商標です。
本記事の他社サイトへのリンクにつきまして、リンク切れの際はご容赦ください。
本記事は、2022年12月時点の情報です。

Fujitsu Cloud Direct ブログ

初心者エンジニア向け技術ブログ

ニフクラDevOps with GitLabでカスタムDockerイメージエンハンス開発作業環境準備（CI/CDを実行するGitLabRunnerの作成まで）

はじめに

前提条件

検証概要

検証1

検証2

作成するニフクラリソース

DevOps with GitLabサーバー作成

検証サーバーの作成

検証サーバーのファイアウォール作成

環境設定

資産管理用gitリポジトリ作成

GitLabRunner作成

GitLabRunner登録

gitリポジトリ開発資産ディレクトリ作成

gitリポジトリ開発資産(index.html、default.css)作成

gitリポジトリDockerfile作成

検証1実施

検証1-1 CI/CD設定.gitlab-ci.yml(定義ファイル)作成

検証1-2 GitLabRunner CI/CDパイプライン実行_コンテナレジストリ更新

検証1-3 GitLabRunner CI/CDパイプライン実行_自動デプロイ

検証1-4 WEBアプリ公開

検証2実施

開発作業を想定した動作確認

まとめ

注意事項