デプロイの自動化を作る

デプロイの自動化を作る

今回は、GitHubのPublicリポジトリとCircleCIを連携させて、Herokuにデプロイする仕組みを作成したいとおもいます。

すべて無料枠でやっていきます。

GitHubにリポジトリを作成する

今回はデプロイ自動化をすることが目的ですので、サーバー側はなんでも良いですが、

最近勉強中のLaravelを利用したいと思います。

GitHubでリポジトリを作成します。

ちなみに作成したリポジトリは下記です。

https://github.com/hirotoyoshidome/learn-laravel

Laravelの準備をします。

Laravelの準備はここでは省略します。

以前にDockerで環境を構築しているので、ローカルを汚したくない方は下記でさくっと環境構築をすることをオススメします。

https://github.com/hirotoyoshidome/docker-composer-laravel-mysql

環境がととのったらプロジェクトの作成をしていきます。

php artisan create-project laravel/laravel {appname} --prefer-dist

※私のリポジトリではわかりやすいようにルートでアクセスが来た場合にHelloWorldを出力するように設定しております。

routes/web.php

Route::get('/', function () {
    return view('hello');
});

resources/views/hello.blade.php


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>HelloWorld!!</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <h1>HelloWorld!!</h1>
        <p>commit ! from circle ci!!!</p>
    </body>
</html>

Herokuの準備をする。

https://www.heroku.com/home

Herokuのアカウントを作成して公式どおりにCLIのインストールをしてください(今回はインストール方法は省略いたします)

インストール後

heroku login

でCLIからログインすることができます。

ログインができましたら、アプリケーションを作成していきます。

heroku create {appname} --buildpack heroku/php

今回はLaravelでの構築となるため、heroku/phpを指定します。

Herokuでは、ルートディレクトリのProcfileを参照しますので、Procfileを作成していきます。

web: vendor/bin/heroku-php-apache2 public/

パブリックルートにPublicディレクトリが設定されるように設定しました。

Herokuは無料枠でもHttpsでの通信がされますので、こちらの設定をします。

app/Providers/AppServiceProvider.php boot method

     public function boot()
     {
         // force https |
         if (\App::environment('production')) {
             \URL::forceScheme('https');
         }
     }

準備は完了です。一度手動でデプロイしてみます。

git add .
git commit -m "add Heroku settings."
git remote add heroku https://git.heroku.com/{appname}.git
git push heroku master

Herokuへのプッシュができたら、Laravelではキーの生成が必要でしたので、こちらを実行してきます。

heroku run php artisan key:generate

runサブコマンドを使用することでHerokuのコンテナ内で指定したコマンドを実行することができます。

正しくLaravelアプリケーションが動作しているか確認をします。

https://{appname}.herokuapp.com/

Circle CIの設定をする

CircleCIはGitHubと簡単に連携ができますので、GitHubの認証でログインをしてください

https://circleci.com/

ログイン後、プロジェクトの追加より、作成したリポジトリを選択して作成します。

CircleCIはルートディレクトリの /.circleci/config.yml をもとに設定をするようなので、こちらをGitHubのリポジトリへコミットしていきます。

今回は下記のように作成しました。

version: 2
jobs:
  build:
    docker:
      - image: circleci/php:7.3-node-browsers
    steps:
      - checkout
      - run: sudo apt update
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "composer.json" }}
            - v1-dependencies-
      - run: composer install -n --prefer-dist
      - save_cache:
          key: v1-dependencies-{{ checksum "composer.json" }}
          paths:
            - ./vendor
      - restore_cache:
          keys:
            - node-v1-{{ checksum "package.json" }}
            - node-v1-
      - run: yarn install
      - save_cache:
          key: node-v1-{{ checksum "package.json" }}
          paths:
            - node_modules
      - run: cp .env.example .env
  deploy-prod:
    machine:
      image: circleci/classic:edge
    steps:
      - checkout
      - run:
          name: heroku maintenance on
          command: heroku maintenance:on --app ${HEROKU_APP_NAME_PROD}
      - run:
          name: heroku deploy
          command: |
            git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME_PROD.git master
      - run:
          name: heroku maintenance off
          command: heroku maintenance:off --app ${HEROKU_APP_NAME_PROD}
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy-prod:
          requires:
          - build
          filters:
            branches:
              only: master

ざっくり説明するとビルドが成功した場合に、デプロイを実行するという感じになっています。

CircleCIからHerokuへデプロイする際にトークン値が必要となりますので、CircleCIの環境変数を利用して設定していきます。

Viewの文言を変えてmasterブランチにコミットしてみます。

vi vi resources/views/hello.blade.php
git add vi resources/views/hello.blade.php
git commit -m "check circleci action."
git push origin master

CircleCIのコンソールよりビルドとデプロイのジョブが正常に成功し、画面レベルで変更内容が反映されていることを確認できました。

最後に

これまでCircleCIを触る機会がなく、今回始めて利用してみましたが、かなり簡単に設定することができました。

仕事で運用となるとCircleCIの無料枠では足りなくなることが多いかもしれませんが、個人で利用する分にはかなり便利なのかなと思いました。

他にも、AWSを利用している方は、AWSでもCI・CD環境を構築できる。Code Pipeline+Code Buildや、Jenkinsなどでも同様の環境が組めるかと思います。