けけずんセルフハッキング

エンジニアっぽい雰囲気を醸しだしているかのようなブログです!

SPA な Web アプリを継続的デリバリーする環境を作る (4) 〜 継続的デリバリー( GitLab CI/CD )編

概要

SPA な Web アプリを継続的デリバリーする環境を作るシリーズ最終回、継続的デリバリー編。 タイトルに継続的デリバリーというワードが二つ入ってるのが少しアホっぽく見える。 ていうか継続的デリバリーって自分で書いてて思ったけど、こんな言葉普段使わんからパッと見て何言ってんだコイツって思われてそう。

序章はこちら。

kkznch.hatenablog.com

全4部構成でお届けする。

長い道のりだったが、これが最終回じゃよ。

ハンズオンするぞ

バックエンド用リポジトリ、フロントエンド用リポジトリに GitLab CI/CD の設定ファイルを作成し、それぞれに合わせた設定を記述していく。

今回はテストの作成はしていないけど、実際の開発では CI/CD 実行中にテストもしていたりする。 なので、もしテストをしたいのであれば CI/CD 設定ファイル中にあるテスト用のステージを編集してね。

バックエンドの自動デプロイ設定

流れ的にはこんな感じのことをする。

f:id:kkznch:20200224141650p:plain

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 という項目があるので、その中で環境変数を登録する。 内容は以下の通り。

  • Type:File
  • Key:SSH_PRIVATE_KEY
  • Valueapp-keypair-ec2.pem の中身

スクランナーの作成

バックエンド用リポジトリ直下に SSH 接続先の設定や接続後の処理の内容が記述された Envoy.blade.php を作成する。 ELASTIC_IPAWS の 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 が動いて自動でデプロイされるようになる。

フロントエンドの自動デプロイ設定

流れ的にはこんな感じのことをする。

f:id:kkznch:20200224141821p:plain

フロントエンド用リポジトリ 直下に以下の内容で 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_IDAWS_SECRET_ACCESS_KEY の具体的な値をコード中に含めるのはよろしくない。 なので GitLab CI/CD の Variables という機能を使い、環境変数を GitLab に持たせる。

GitLab で フロントエンド用リポジトリ のページを開きサイドバーから 「Settings」 → 「CI / CD」をクリックする。 遷移先に Variables という項目があるので、その中で環境変数を登録する。 内容は以下の通り。

  • AWSのアクセスキーID
    • Key:AWS_ACCESS_KEY_ID
    • Valueaccess_key_id(S3 アクセス用ユーザのアクセスキー ID )
  • AWSのシークレットキー
    • Key:AWS_SECRET_ACCESS_KEY
    • Valuesecret_access_key(S3 アクセス用ユーザのシークレットアクセスキー)

access_key_idecret_access_keyAWS の IAM で作成した S3 アクセス用ユーザの認証情報が入るので、各自の環境に合わせて入力してくれ。

コミットとプッシュ

ここまででフロントエンド用リポジトリの自動デプロイの設定が完了した。 以下のコマンドでコミットしてプッシュしよう。

$ git add .
$ git commit -m "third commit"
$ git push -u origin master

プッシュ後に GitLab CI/CD の画面を見ると CI/CD が動いていることが確認できるはず。 今後はプッシュするたびに CI/CD が動いて自動でデプロイされるようになる。

おわりに

序章から始まり、バックエンド編、フロントエンド編、インフラ編、継続的デリバリー編の全四部構成でハンズオンを行った。 今回のハンズオンを通すことで、プロジェクトを立ち上げ、開発を行い、自動デプロイをする一連の流れ(環境)を一人で作れるようになっているはず。

説明を端折った箇所がいくつかあるので、分からないことがあれば Twitter などで気軽に聞いてくれ。

次回はインフラ部分をコード化したハンズオンだとか、 EC2 ではなく ECS にデプロイするハンズオンだとかをやっていきたい。