AWS CodePipeline が GitLabをサポートしたので使ってみた【Laravel】
AWSのCI/CDツールとしておなじみのCodeシリーズアップデート情報です。
CI/CDツールのCodePipelineがソースリポジトリとしてgitlabのサポートを開始
今回はCodePipelineを作りながらGitLabとのCI/CD実現してみます。
- 1. 概要
- 1.1. CodePipelineとは
- 1.2. GitLabとは
- 2. CI/CD構築手順
- 2.1. GitLab側の作業 : GitLabでのリポジトリ作成
- 2.1.1. GitLabにリポジトリを作成する
- 2.1.2. GitLabにリソースをデプロイする
- 2.2. AWS側の作業 : CodePipelineの作成
- 2.2.1. リソースのデプロイ先サーバを準備する
- 2.2.2. AWS CodePipelineからGitLabへの接続を作成する
- 2.2.3. デプロイ先を指定する
- 2.2.4. 追加 CodeBuild でサーバの初期設定を行う
- 2.3. gitlabにコミットしてみる
- 3. つまづきポイント
- 3.1. ElasticBeanstalk : No Default VPC
- 3.2. GitLab接続時 : 不明なエラーが発生しました
- 3.3. CodeBuild : php version (7.4.33) does not satisfy that requirement
- 4. 総括
概要
CodePipelineとは
いわゆるCodeシリーズの一つ。
CI継続的デリバリーを担うサービスです。
CodeCommit, CodeBuild, CodeDeploy と連携してCI/CD環境を構築することができます。
![AWSのCI/CD解説](https://syuntech.net/wp-content/uploads/2023/09/blackbelt-1024x591.png)
GitLabとは
GitHubと名称が似ていますが、サービス的にも同じようなものです。web上にリポジトリを作成してリソース管理できます。
Gitリポジトリ管理の分野においてGitHubに次ぐNo.2くらい有名なのではないでしょうか。
CI/CD構築手順
GitLab側の作業 : GitLabでのリポジトリ作成
GitLabにリポジトリを作成する
まずは管理対象とするプロジェクトを作成します。
今回は「test-app」というプロジェクトを作成しました。
![GitLabにてプロジェクトを作成](https://syuntech.net/wp-content/uploads/2023/09/8d6dce3b91f46060035046e5cd5131bf-1024x691.png)
プロジェクトの作成が完了しました。
![GitLabプロジェクト作成完了](https://syuntech.net/wp-content/uploads/2023/09/8db42a3749ce41afbe7ce2704d9066d0-1024x420.png)
GitLabにリソースをデプロイする
作成した空の「test-app」プロジェクトにリソースをデプロイします。
Gitツールなどを利用してデプロイします。方法は割愛。
今回はLaravelプロジェクトを作成しました。
おなじみのTOP画面が表示されるところまで準備ができたらデプロイを行います。
![LaravelのTOP画面](https://syuntech.net/wp-content/uploads/2023/09/laravel_TOP-1024x695.png)
AWS側の作業 : CodePipelineの作成
リソースのデプロイ先サーバを準備する
CodePipelineからデプロイできる先は限られるので、今回はElasticBeanstalkを利用します。
![AWS ElasticBeanstalkの準備](http://syuntech.net/wp-content/uploads/2023/09/f99553fd7a7699c428d5130d3fca70cd-1-494x1024.png)
この段階でアプリケーションコードに圧縮したLaravelプロジェクトのファイルをアップロードしておくと
動作確認が早くて便利です。
AWS CodePipelineからGitLabへの接続を作成する
ソースステージの追加画面で、ソースプロバイダから「GitLab」が選択できるようになったことが
今回のアップデートです。
GitLabを選択すると「GitLabに接続する」ボタンが押下できるようになります。
すでに設定済みであれば「接続」のプルダウンから選択できます。
![CodePipelineソースステージの作成](https://syuntech.net/wp-content/uploads/2023/09/b4941af32d8e3bd08fc5a938a5e9375f-1024x789.png)
「GitLabに接続する」ボタンを押下するとこちらの画面が表示されます。
接続名はAWS内での管理名称なのでわかりやすい名前を付けておきましょう。
![GitLabへの接続画面](https://syuntech.net/wp-content/uploads/2023/09/63ea8d213372906a17ad8ff15e10f793.png)
オレンジの「GitLabに接続する」ボタンを押下すると、GitLab側のログイン画面が表示されます。
ログインが完了するとAWS CodePipelineの画面に戻ってきます。
![GitLabへのログイン画面](https://syuntech.net/wp-content/uploads/2023/09/d1a8f84412292e3a23cc6fc47f90b426.png)
ログインが完了するとリポジトリやブランチ名をプルダウンから選択できるようになります。
先ほど作成した「test-app」リポジトリを選択します。
![GitLabへの接続完了](https://syuntech.net/wp-content/uploads/2023/09/7916f95256a1184f2f04d683c74c7036.png)
デプロイ先を指定する
ソースの取得元が設定できたら、次はデプロイ先を指定します。
ここには先ほど作成した ElasticBeanstalk を設定します。
![CodePipelineデプロイステージの設定](https://syuntech.net/wp-content/uploads/2023/09/6ad09b95b275b1fee8fe293889ca10fa-1024x515.png)
レビューまでスキップして設定を完了すると、すぐにCodePipelineが動き出します。
問題なく成功すれば、このように緑色のメッセージで「成功」と表示されます。
![CodePipelineの作成完了](https://syuntech.net/wp-content/uploads/2023/09/cb1f4ecd8df56c0d95ba0df85800a337-1024x992.png)
「ソース」「デプロイ」それぞれの横にも成功しましたという記述があります。エラーがあるとこちらに赤字で表示されます。
これで CodePipeline の設定が完了しました。
追加 CodeBuild でサーバの初期設定を行う
Laravelの環境を整備するには、サーバ上でいくつかコマンドを実行する必要がありますね。
コマンドはCodeBuildを使って実行するように設定を追加します。
![CodeBuildの追加](https://syuntech.net/wp-content/uploads/2023/09/25b70de5442e9d7790ba25433bf46c05.png)
ソースをS3に置くのが面倒だったので、そのままBuildspecを設定しました。
version: 0.2
phases:
build:
commands:
- echo installing composer..
- composer install
- echo creating .env file..
- cp .env.example .env
- echo generating app key
- php artisan key:generate
これでCI/CDの準備は完了です。
実際には上記のBuildspec ではうまくいきませんでした。原因は.envファイルが作成されなかったこと。
やむなくEC2サーバで直接.envファイルを作成しました。
gitlabにコミットしてみる
実際にGitLabにプッシュしたソースが反映されるかを確認します。
おなじみのLaravel Top画面にブログ名を差し込んでみました。
<body class="antialiased">
<h1>syun tech blog</h1>
<div class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
@if (Route::has('login'))
<div class="sm:fixed sm:top-0 sm:right-0 p-6 text-right z-10">
ElasticBeanstalk のドメインにアクセスしてみます。
![GirLabでのCI/CDテスト](https://syuntech.net/wp-content/uploads/2023/09/19_EB-1024x425.png)
実験結果
![GirLabでのCI/CDテスト確認完了](https://syuntech.net/wp-content/uploads/2023/09/20_result-1024x755.png)
分かりづらくて申し訳ないのですが、ちゃんと更新されています。
つまづきポイント
ElasticBeanstalk : No Default VPC
今回の本題とは違うところで一番躓いた
デフォルトVPCを削除した状態だと「-」を選択した際にEB環境構築エラーになるので注意
GitLab接続時 : 不明なエラーが発生しました
原因不明。しばらくすると表示されて接続先として選択できるようになる。
お茶でも飲んで少し待ちましょう。
![GitLab接続 不明なエラー](https://syuntech.net/wp-content/uploads/2023/09/e4cbbc17f2eeb31d07ca95953df6209a.png)
CodeBuild : php version (7.4.33) does not satisfy that requirement
AmazonLinux2を選択していたらエラーがcomposer install でエラーが連発した。
php version (7.4.33) does not satisfy that requirement
え、、PHPのバージョン7.4なんですか。これも原因を突き止めるのに地味に時間がかかった。
解決策はubuntuを使うこと。
総括
AWS PipelineにてGitLab連携ができるようになったので、いい機会ということでAWS PipelineでのCI/CD構築含めて整理してみました。
試験の知識だけでは実際の業務に活かしきれないこともしばしばありますので、実際にハンズオンして理解を深めることが大事ですね。
ちなみにCodeStarではソースリポジトリにGitLabは選択できませんでした。今後の機能拡張に期待です。