チュートリアルApr 11, 20219 分 READ

GitHub CI/CD チュートリアル: 継続的インテグレーションのセットアップ

Stanley Ndagi

フルスタック デベロッパー兼テクニカル ライター

Developer D sits at a desk working on a beginning-level project.

継続的インテグレーション (CI) では、プロジェクト内のメイン Git ブランチにマージする前に機能ブランチを自動でテストして、 不具合が発生するような変更でコードベースが更新されることを防ぎます。 一方、継続的デリバリー (CD) では CI をベースとして各ブランチやメイン ブランチのリリースを自動化することで、 アジャイル ソフトウェア開発の理念どおり、小規模な増分更新をスピーディにユーザーに届けます。

今回の記事では、GitHub と連携した環境での CI/CD プロセスについてご説明します。 CI パイプラインのデモには Python アプリケーションを使用します。

以下の手順に沿って説明していきます。

  1. シンプルな Python アプリケーション (Flask を使用) を作成する
  2. このアプリのテストを作成する
  3. config.yml ファイルを追加する
  4. GitHub にプッシュする
  5. CircleCI を構成する
  6. バッジで README を更新する
  7. プル リクエストを作成して CircleCI の動作を確認する

シンプルな Python アプリを作成する

前提条件

このチュートリアルを進めるには、いくつかの準備が必要です。

  1. Python をローカル システムにインストールする
  2. CircleCI アカウントを用意する
  3. GitHub アカウントを用意する

アプリの作成

シンプルにするために、Flask でアプリを作成します。 Flask は Python のマイクロフレームワークです。 このチュートリアルでは、フレームワークの知識はほとんど必要ありません。 こちらのドキュメントのサンプルを使用します。

まず、プロジェクト ディレクトリ (フォルダー) を作成し、cd でそこに移動します。 具体的には、ターミナルに以下を入力します。

mkdir python_app && cd $_/

次に、任意のエディターを開いて hello.py ファイルを作成します。 そのファイルに以下の行をコピーします。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

Python の仮想環境

Python で作業する場合、仮想環境を使用することを強くお勧めします。 そうすれば、Python パッケージをローカル マシン全体に対してではなく、抽象化された環境内にインストールすることができます。 そのためには virtualenv や、さらに便利な virtualenvwrapper を使用するのが一般的です。 ここでは、Python3 の一部として提供されるモジュール venv を使用します。 使用方法は次のとおりです。

  • 仮想環境を作成する
python3 -m venv venv

次の例のように、仮想環境には venv とは違う名前を付けることもできます。

python3 -m venv Env
  • この環境をアクティブ化する
source venv/bin/activate

仮想環境に別の名前を付けた場合は、venv の部分をその名前に置き換えてください。 シェル プロンプトの先頭にその環境名が表示されます。これは、その仮想環境がアクティブになっていることを示しています。 インストールされている Python パッケージがすべて、この環境にインストールされます。 なお、以下を実行するだけで、この環境を非アクティブ化できます。

deactivate

アプリの実行

では、エディターで requirements.txt ファイルを作成しましょう。 ファイルに Flask という語を追加して保存します。

Flask

次に、仮想環境内で以下を実行して、パッケージをインストールします。

pip install -r requirements.txt

最後に、以下のコマンドでアプリを実行します。

FLASK_APP=hello.py flask run

http://localhost:5000/にアクセスすると、ブラウザーでアプリケーションの実行を確認できます。

テストを作成する

エディターで tests.py ファイルを作成し、そのファイルに以下の行を貼り付けます。

from hello import app
with app.test_client() as c:
    response = c.get('/')
    assert response.data == b'Hello World!'
    assert response.status_code == 200

テストの詳細については、下記の関連ページをご覧ください。

次はテストの実行です。 ターミナルを開いて以下を実行します。

python3 tests.py

ターミナルには何も返ってこないはずです。 なぜなら、 この Flask アプリは成功時にターミナルに出力を行うように構成されていません。 つまり、テストは成功したということです。 前述の関連ページには、テストが成功または失敗したときのターミナルの処理例も示されていますが、このチュートリアルではこれで十分でしょう。

CircleCI 設定ファイルを追加する

.circleci フォルダーを作成します。その中に config.yml ファイルを作成し、 以下の行を貼り付けます。

version: 2
jobs:
  build:
    docker:
      - image: circleci/python:3.6
    steps:
      - checkout
      - restore_cache:
          key: deps1-{{ .Branch }}-{{ checksum "requirements.txt" }}
      - run:
          command: |
            python3 -m venv venv
            . venv/bin/activate
            pip install -r requirements.txt
      - save_cache:
          key: deps1-{{ .Branch }}-{{ checksum "requirements.txt" }}
          paths:
            - "venv"
      - run:
          name: テストの実行
          command: |
            . venv/bin/activate
            python3 tests.py
      - store_artifacts:
          path: test-reports/
          destination: python_app

この config ファイルの詳細については、https://circleci.com/docs/ja/language-python/ を参照してください。

GitHub にプッシュする

本来なら、コードを早期に頻繁にコミットするという理念に基づいて、このプロセスのもっと早い段階で Git を初期化して、こまめにコミットできるようにしておくべきですが、 CircleCI と GitHub の連携についてのチュートリアルであるため、意図的にここまで触れてきませんでした。

現在、コードは次のような構成になっています。

2018-09-11-Stanley01

エディターを開き、作業ディレクトリに .gitignore ファイルを作成して、 Git にコミットしたくないファイルやフォルダーを指定します。 このファイルには以下の行を貼り付けます。

# バイトコンパイル済みファイル/最適化されたファイル/DLL ファイル
__pycache__/
*.py[cod]

# 仮想環境
venv/*

これで、以下のコマンドを実行してコードをコミットできるようになりました。

git add .
git commit -m "Initial commit"

まだ GitHub アカウントを持っていない場合は、GitHub のサイトにアクセスして、アカウントを作成してください。 GitHub を初めて使用する場合は、こちらのチュートリアル(英語)をお読みになることをお勧めします。 次に、リポジトリを作成します。

GitHubとCircleCIの連携

リポジトリの作成

新しいリポジトリを作成すると、次のようなページが表示されます。

リポジトリ作成後の画面

2 つ目の […push an existing repository (既存のリポジトリをプッシュ)] オプションを選択します。 以下を実行します。

git remote add origin https://github.com/NdagiStanley/python_app.git
git push -u origin master

CircleCI を構成する

リポジトリを GitHub に作成したので、これで CircleCI を構成して CI を完成させることができます。 CircleCI のユーザー登録ページにアクセスし、 GitHub アカウントで CircleCI にサインアップします。

サークルCI登録画面

ログインしたら、このチュートリアルで使用する自身の GitHub アカウントがアクティブになっていることを確認します。 複数の GitHub 組織がある場合、そのうちの 1 つがアクティブになっているはずです。 左上のドロップダウン メニューをクリックし、自身の GitHub ユーザー名を選択します。 次に [Add Projects (プロジェクトの追加)] をクリックします。 最新のプロジェクト「python_app」が表示されます。

python_app画面

プロジェクトが表示されている行の右側にある [Set up Project (プロジェクトのセットアップ)] をクリックします。 リダイレクト先のページに [Next Steps (次のステップ)] セクションが表示されます。 使用する .circleci/config.yml ファイルを用意していない場合は、1 番のステップから始めますが、 config.yml ファイルは既に用意してあるので、このチュートリアルでは 5 番までスクロールして、[Start building (ビルドの開始)] をクリックします。

ビルドの処理画面

すぐにビルドが処理され、 完了です。

ビルド完了イラスト

右上の [Settings (設定)] 歯車アイコンをクリックします。 次に左側の [Projects (プロジェクト)] をクリックして、最後に [python_app] をクリックします。

プロジェクト画面

circleci.com/gh/<ユーザー名>/python_app のようなパスになるはずです。 今回の私のパスは https://circleci.com/gh/NdagiStanley/python_app となっています。 リポジトリ [python_app] の横の歯車アイコンをクリックします。

リポジトリ

今回のプロジェクトに関して、ユーザーが変更できる設定を理解しておくことは重要であるため、 関連する設定についてここで触れておきます。

[Advanced Settings (詳細設定)] では、[Only build pull requests (プル リクエストのみビルド)] がオフになっています。 つまり、プル リクエストを含め、GitHub へのすべてのプッシュが CircleCI で実行されるということです。

README をステータス バッジで更新する

ローカル マシン上で次のコマンドを実行して、別の Git ブランチにチェックアウトします。

git checkout -b add_readme

エディターを開いて README.md ファイルを作成します。 以下の行をコピーしてファイルに貼り付けます。

README.md
# PYTHON アプリケーション
この Python アプリケーションのリポジトリは、GitHub と CircleCI の連携を説明するために作成されました。
[![CircleCI](https://circleci.com/gh/NdagiStanley/python_app.svg?style=svg)](https://circleci.com/gh/NdagiStanley/python_app)

タイトルと簡単な説明を追加しました。

ここで、以下のコマンドを実行します。

git add .
git commit -m "Add README"
git push -u origin add_readme

https://github.com/<username>/python_app にアクセスすると、新しいブランチ add_readme が作成されているのがわかります。 [Compare & pull request (比較してプル リクエスト)] をクリックします。

2018-09-11-Stanley12.png

プル リクエストを作成する

以下のようにプル リクエストをセットアップしました。

リクエストの設定

[Create pull request (プル リクエストを作成)] をクリックすると、瞬時に以下のようになります。

プルリクエスト作成後

ビルドに成功しました。 [Show all checks (すべてのチェックを表示)] をクリックすると、 CircleCI からのチェックであることがわかります。

ビルドの成功

ブラウザーのタブのファビコンにも、成功したことを示すマークが表示されます。

ファビコン

[Details (詳細)] をクリックすると、CircleCI のビルドにリダイレクトされます。

リダイレクト画面

こちらのファビコンにも、ビルドが成功したことが示されています。

ファビコンビルド成功

上部の [python_app] をクリックします。

Pythonアプリ

このプロジェクトのビルドにリダイレクトされます。

ビルドにリダイレクト

おわりに

これですべての手順が完了しました。 GitHub と CircleCI を連携させました。 要約すると、Python アプリをセットアップし、テストを作成しました。 さらに、CircleCI の設定ファイルを作成し、コードベースを GitHub にプッシュしました。 最後に、作成した GitHub リポジトリと CircleCI の接続を確認しました。

着実に手順を踏んでいけば、GitHub に独自のプロジェクトを立ち上げて、CircleCI で CI ビルドを構成できることがおわかりいただけたでしょうか。 以下のリンクは、この記事の執筆時に参考にしたドキュメントです。


Stanley 氏は、ソフトウェア エンジニアであり、テクニカル コピーライターでもあります。また、テクニカル チームの統括やコミュニティ エンゲージメントなど、さまざまな仕事に従事しています。 氏は digerati (デジタル界の知識人) を自任しています。

クリップボードにコピー