概要
SPA な Web アプリを継続的デリバリーする環境を作るシリーズ最終回、継続的デリバリー編。 タイトルに継続的デリバリーというワードが二つ入ってるのが少しアホっぽく見える。 ていうか継続的デリバリーって自分で書いてて思ったけど、こんな言葉普段使わんからパッと見て何言ってんだコイツって思われてそう。
序章はこちら。
全4部構成でお届けする。
- SPA な Web アプリを継続的デリバリーする環境を作る (1) 〜 バックエンド( Laravel )編
- SPA な Web アプリを継続的デリバリーする環境を作る (2) 〜 フロントエンド( Vue.js )編
- SPA な Web アプリを継続的デリバリーする環境を作る (3) 〜 インフラ( AWS )編
- SPA な Web アプリを継続的デリバリーする環境を作る (4) 〜 継続的デリバリー( GitLab CI/CD )編 ← 本記事
長い道のりだったが、これが最終回じゃよ。
ハンズオンするぞ
バックエンド用リポジトリ、フロントエンド用リポジトリに GitLab CI/CD の設定ファイルを作成し、それぞれに合わせた設定を記述していく。
今回はテストの作成はしていないけど、実際の開発では CI/CD 実行中にテストもしていたりする。 なので、もしテストをしたいのであれば CI/CD 設定ファイル中にあるテスト用のステージを編集してね。
バックエンドの自動デプロイ設定
流れ的にはこんな感じのことをする。
CI/CD 設定ファイルの作成
バックエンド用リポジトリ 直下に以下の内容で GitLab CI/CD 設定ファイルを作成する。
ファイル名の頭は .
から始まっているので付け忘れないようにね。
.gitlab-ci.yml
stages: - test - deploy # テスト job-test: stage: test image: php:7.3-alpine before_script: - apk --no-cache update && apk --no-cache upgrade - apk --no-cache add zip unzip - docker-php-ext-install bcmath pdo_mysql - php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" - php composer-setup.php - php -r "unlink('composer-setup.php');" - php composer.phar install script: - echo "ここでテストの実行するよ" artifacts: paths: - composer.phar # デプロイ job-deploy: stage: deploy image: php:7.3-alpine before_script: - apk --no-cache add openssh-client - eval $(ssh-agent -s) - cat ${SSH_PRIVATE_KEY} | ssh-add - - mkdir -p ~/.ssh - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" >~/.ssh/config - php composer.phar global require laravel/envoy script: - ~/.composer/vendor/bin/envoy run deploy when: manual only: - master
SSH 接続のために GitLab に秘密鍵の保存
次に GitLab から EC2 へ SSH 接続する際に使用される秘密鍵を GitLab CI/CD の Variables に登録する。 秘密鍵は EC2 を作成した際にダウンロードしたキーペア app-keypair-ec2.pem なので、こいつの中身を出力してクリップボードにコピーしておく。
$ cat ~/app-keypair-ec2.pem
# 出力される値をコピーしよう
GitLab で バックエンド用リポジトリ のページを開きサイドバーから 「Settings」 → 「CI / CD」をクリックする。 遷移先に Variables という項目があるので、その中で環境変数を登録する。 内容は以下の通り。
タスクランナーの作成
バックエンド用リポジトリ直下に SSH 接続先の設定や接続後の処理の内容が記述された Envoy.blade.php
を作成する。
ELASTIC_IP
は AWS の Elastic IP で取得した IP アドレスな。
Envoy.blade.php
@servers(['ec2' => 'ec2-user@ELASTIC_IP']) @setup $appDir = '/app' @endsetup @story('deploy', ['on' => 'ec2']) task-setup task-deploy @endstory @task('task-setup') cd {{ $appDir }} git pull origin master composer install --no-dev @endtask @task('task-deploy') cd {{ $appDir }} php artisan down echo "DB使ってたらここで migrate とかする" php artisan up @endtask
コミットとプッシュ
ここまででバックエンド用リポジトリの自動デプロイの設定が完了した。 以下のコマンドでコミットしてプッシュしよう。
$ git add . $ git commit -m "third commit" $ git push -u origin master
プッシュ後に GitLab CI/CD の画面を見ると CI/CD が動いていることが確認できるはず。 今後はプッシュするたびに CI/CD が動いて自動でデプロイされるようになる。
フロントエンドの自動デプロイ設定
流れ的にはこんな感じのことをする。
フロントエンド用リポジトリ 直下に以下の内容で GitLab CI/CD 設定ファイルを作成する。
ファイル名の頭は .
から始まっているので気をつけよう。
stages: - test - build - deploy # テスト job-test: stage: test image: node:12-alpine script: - npm install - echo "ここでテストの実行するよ" # ビルド job-build: stage: build image: node:12-alpine script: - npm install - npm run build artifacts: paths: - dist/ only: - master # デプロイ job-deploy: stage: deploy image: python:alpine dependencies: - job-build variables: AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID} AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY} AWS_DEFAULT_REGION: ap-northeast-1 S3_BUCKET: app-bucket script: - pip install awscli --upgrade --user - export PATH=~/.local/bin:$PATH - aws s3 sync --delete dist/ s3://${S3_BUCKET}/ only: - master
S3_BUCKET: app-bucket
には自分で作成した S3 バケットの名前を入れること。
S3 へアクセスするために GitLab に認証情報の保存
CI/CD 設定ファイル中の AWS_ACCESS_KEY_ID
と AWS_SECRET_ACCESS_KEY
の具体的な値をコード中に含めるのはよろしくない。
なので GitLab CI/CD の Variables という機能を使い、環境変数を GitLab に持たせる。
GitLab で フロントエンド用リポジトリ のページを開きサイドバーから 「Settings」 → 「CI / CD」をクリックする。 遷移先に Variables という項目があるので、その中で環境変数を登録する。 内容は以下の通り。
access_key_id
と ecret_access_key
は AWS の IAM で作成した S3 アクセス用ユーザの認証情報が入るので、各自の環境に合わせて入力してくれ。
コミットとプッシュ
ここまででフロントエンド用リポジトリの自動デプロイの設定が完了した。 以下のコマンドでコミットしてプッシュしよう。
$ git add . $ git commit -m "third commit" $ git push -u origin master
プッシュ後に GitLab CI/CD の画面を見ると CI/CD が動いていることが確認できるはず。 今後はプッシュするたびに CI/CD が動いて自動でデプロイされるようになる。
おわりに
序章から始まり、バックエンド編、フロントエンド編、インフラ編、継続的デリバリー編の全四部構成でハンズオンを行った。 今回のハンズオンを通すことで、プロジェクトを立ち上げ、開発を行い、自動デプロイをする一連の流れ(環境)を一人で作れるようになっているはず。
説明を端折った箇所がいくつかあるので、分からないことがあれば Twitter などで気軽に聞いてくれ。
次回はインフラ部分をコード化したハンズオンだとか、 EC2 ではなく ECS にデプロイするハンズオンだとかをやっていきたい。