Help us understand the problem. What is going on with this article?

GitHub+CircleCI+Herokuでプッシュしたらデプロイの仕組みをつくる

デプロイの自動化を作る

みなさんこんにちは。
今回は、GitHubのPublicリポジトリとCircleCIを連携させて、Herokuにデプロイする仕組みを作成したいとおもいます。
すべて無料枠でやっていきます。

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

今回はデプロイ自動化をすることが目的ですので、サーバー側はなんでも良いですが、
最近勉強中のLaravelを利用したいと思います。

GitHubでリポジトリを作成します。
ちなみに作成したリポジトリは下記です。
https://github.com/hirotoyoshidome/practice_laravel

Laravelの準備をします。
Laravelの準備はここでは省略します。
以前にDockerで環境を構築しているので、ローカルを汚したくない方は下記でさくっと環境構築をすることをオススメします。
https://github.com/hirotoyoshidome/docker-compose_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などでも同様の環境が組めるかと思います。

CircleCIという選択肢も捨てきれないのではとちょっと思いました。
いやー。自動化ってロマン。。

※現在は私が作成したものは公開されておりません。

参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away