[Build/Ship/Run] arukas-shipでプルリク駆動デリバリー

![arukas-ship-overview.gif](https://qiita-image-store.s3.amazonaws.com/0/20668/04bbfb4e-c0ac-b90b-5a1f-07dcabd57e87.gif)

`arukas-ship`というDockerHubからのWebHook受信アプリを作りました。
WebHookを受信すると[Arukas](https://arukas.io/)へデプロイを行ってくれます。
Dockerイメージ化しているため、`arukas-ship`自体をArukas上で動かせちゃいます。

以下のリポジトリで公開しています。
[GitHub : arukas-ship](https://github.com/yamamoto-febc/arukas-ship)

本日はこの`arukas-ship`を使い、GitHubでプルリクエストをマージしたらArukasへ自動デプロイする、というプルリク駆動デリバリー環境の構築をご紹介します。

# きっかけ

以下の記事に触発されました。

[Arukasでdockerワークフロー的なものを体感してみる](http://qiita.com/chorohub/items/b9969a39f362e0adc7a9)

今回作成した`arukas-ship`を使えば以下のようなワークフローが構築できます(一例です)。

 - 1) 手元のマシンで開発/テスト
 - 2) GitHub(等)へPullRequest出す
 - 3) レビュー & マージ
 - 4) DockerHubでのAutomated Build(自動)
 - 5) ビルドされたDockerイメージをArukasへデプロイ(自動)

それでは早速`arukas-ship`でのデリバリー環境の構築方法からご紹介します。

# デリバリー環境構築

## 前提

以下のものは準備できているという前提にしています。

- Gitのインストール
- Docker(for Mac/Windows/Linux)のインストール
- GitHubのアカウント
- DockerHubのアカウント
- Arukasのアカウント

以下ではMacでの作業手順となりますので、Windows/Linuxなどの方は適宜読み替えてください。

**全体図**
![main.png](https://qiita-image-store.s3.amazonaws.com/0/20668/b9857c0f-5710-363f-f12f-4cc272823062.png)


## 開発用GitHubリポジトリ作成

まずはGitHub上でリポジトリを作成しておきましょう。
このリポジトリにDockerfileやWebアプリ/コンテンツなどを格納していきます。
GitHubにログインし、画面右上の+マークから"New Repository"をクリックします。

**"New Repository"ボタン**

![GitHub.png](https://qiita-image-store.s3.amazonaws.com/0/20668/b18e794f-0be8-c903-c807-2bb66bc3d13c.png)

続いて表示される画面でリポジトリの名前(Repository name)を入力してください。
今回は`arukas-ship-demo`としました。

入力したら画面下部の"Create repository"ボタンをクリックします。

**リポジトリ作成画面**
![Create_a_New_Repository.png](https://qiita-image-store.s3.amazonaws.com/0/20668/5254cd61-adf5-a585-1de7-7205584b818d.png)

続いて表示される画面にリポジトリ初期化コマンドが記載されていますので、コピーしておきます。
**リポジトリ初期化コマンド**
![yamamoto-febc_arukas-ship-demo2.png](https://qiita-image-store.s3.amazonaws.com/0/20668/74300625-788c-fb77-4443-4ace574bd6cd.png)

続いて、手元のマシンで先ほどの初期化コマンドを実行しましょう。
実行する前に作業ディレクトリを作成してその中で実行します。

```bash:GitHubリポジトリ
# 作業用ディレクトリ作成
$ mkdir arukas-ship-demo 
$ cd arukas-ship-demo

# 以下先ほどGitHub上に表示されていたコマンドをコピペ
$ echo "# arukas-ship-demo" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin git@github.com:yamamoto-febc/arukas-ship-demo.git
$ git push -u origin master
```

以上で手元のマシンでの開発環境が整いました。

続いてデリバリーのためにArukasとDockerHubの設定も行っておきます。

## Arukasで`arukas-ship`起動

[Arukasコントロールパネル](https://app.arukas.io/)にログインします。

まずはAPIキーを作成しておきます。
トークンとシークレットを控えておきましょう。

**Arukas APIキー画面**
![arukas_token2.png](https://qiita-image-store.s3.amazonaws.com/0/20668/b51908cb-e115-7592-8928-01d1007a4b6f.png)

続いてArukasで新しいアプリケーションを作成します。

**Arukasでのアプリ追加画面**
![arukas_control_panel.png](https://raw.githubusercontent.com/yamamoto-febc/arukas-ship/master/docs/images/arukas_control_panel.png "arukas_control_panel.png")


各項目は以下のように入力してください。

|項目名     | 入力内容                                          |
|----------|--------------------------------------------------|
|App Name|任意 |
|Image | `yamamotofebc/arukas-ship` |
|Instance | 任意(`1`〜`10`) |
|Memory | 任意(`256` or `512`) |
|Endpoint | 任意(ただし`.arukascloud.io`上で一意でないと登録できない)|
|Port | `8080`(下記の`SHIP_PORT`と同じ値を設定する) |
|Env | [下記](#Envに登録する値)の4つを登録 |
|Cmd| なし |

#### Envに登録する値

- `ARUKAS_JSON_API_TOKEN` : Arukas APIトークン
- `ARUKAS_JSON_API_SECRET` : Arukas APIシークレット
- `SHIP_TOKEN` : 任意のランダムな文字列
- `SHIP_PORT` : 8080

`SHIP_TOKEN`はDockerHubからのWebHook登録時の認証用です。
WebHookのURLにここで指定したトークンを含めることで認証を行っています。
任意の十分に長いランダムな文字列を指定してください。

---

入力できたらコンテナを起動してみましょう。
起動しましたか？
起動したらEndpointのURLを控えます。

**EndpointのURL確認**
![arukas_endpoint.png](https://qiita-image-store.s3.amazonaws.com/0/20668/67efcc98-8b51-a67e-8fb5-0fc609fa4cc6.png)

## DockerHubでリポジトリ作成

続いてDockerHub上にリポジトリを作成します。
ここではGitHubにpushされたら自動でイメージのビルドを行う"Automated Build"のリポジトリを追加します。

DockerHubにログインし、右上の"Create"から"Create Automated Build"を選択します。
次にGitHubアイコンのボタンをクリックし、GitHubリポジトリとの接続を行います。

**Automated Buildリポジトリ連携先選択**
![https___hub_docker_com_add_automated-build_yamamotofebc_.png](https://qiita-image-store.s3.amazonaws.com/0/20668/cc51e1e7-51a0-9d01-b10b-0caa97f9df49.png)

GitHubのリポジトリが表示されます。
先ほど作成したGitHubリポジトリを選択してください。

**GitHubリポジトリ選択画面**
![select_repo.png](https://qiita-image-store.s3.amazonaws.com/0/20668/94ed605f-a439-440b-886a-e817f2a2eb9b.png)

続いてDockerHubリポジトリ登録画面が表示されます。
"Short Description"に何か入力しCreateボタンをクリックしてください。

**Automated Buildリポジトリ作成画面**
![create_auto_build.png](https://qiita-image-store.s3.amazonaws.com/0/20668/1d345b39-777d-c79b-7f65-3c10b1de6560.png)

これでAutomated Buildなリポジトリが作成されました。

## Webhookの設定

続けて、イメージビルド時に先ほどArukas上で起動した`arukas-ship`へWebhookをキックするようにします。
WebHookメニューをクリックします。

**DockerHubリポジトリ設定画面**
![dockerhub_created.png](https://qiita-image-store.s3.amazonaws.com/0/20668/5f32b4f9-e23d-bcf2-d4f8-3d4752b47657.png)

続いてWebhookの登録を行います。
WebHook　URLは以下のように入力してください。

    [控えておいたEndpointのURL]?token=[SHIP_TOKENに設定した文字列]&app=[任意のアプリケーション名]

各値が以下の場合、

 - EndpointのURL : `https://shipping.arukascloud.io`
 - SHIP_TOKEN : `xxxxxxx`
 - アプリケーション名: `arukas-ship-demo`

以下のようになります。
`https://shipping.arukascloud.io?token=xxxxxxx&app=arukas-ship-demo`

**Webhook設定画面**
![arukas_webhook_set.png](https://qiita-image-store.s3.amazonaws.com/0/20668/94f7839a-9eb8-e983-45fb-d1be41a24cbf.png)

以上で準備完了です。
続けて、実際にこの環境を使った開発からデリバリーまでのワークフローを見てみましょう。


# 開発〜デリバリーまでのワークフロー

## 1) 手元のマシンで開発/テスト

**手元マシンでの開発/ビルド/テスト**
![flow01.png](https://qiita-image-store.s3.amazonaws.com/0/20668/93dcb4d3-29f1-5937-8885-f4bcdfac5b0c.png)


今回、手元のマシンでの開発の流れは以下の通りです。

 　1. 開発用にGitブランチ作成
 　2. Webアプリ(PHP)ファイル作成
 　3. Webアプリを稼働させるDockerコンテナ作成(Dockerfile作成)

順番に実施していきます。

#### Gitブランチ作成

以下のようにしてブランチを作成しておきます。
今回は`ship_demo`というブランチにしました。

```bash:ブランチ作成
$ git checkout -b ship_demo
```

#### Webアプリ(PHP)ファイル作成

今回は、以下のような簡単なPHPファイルを作成します。
現在の時刻とマシンのIPアドレスを表示するだけのアプリです。

```index.php
<?php 
    date_default_timezone_set('Asia/Tokyo');
    echo "arukas-ship/Demo" . "<br />";
    echo $_SERVER['SERVER_ADDR'] . "<br />";
    echo date("Y/m/d H:i:s");
```

これを`contents`ディレクトリ配下に格納しましょう。

```bash:Webアプリ作成
$ mkdir contents
$ cat <<-'EOF' > contents/index.php
<?php 
    date_default_timezone_set('Asia/Tokyo');
    echo "arukas-ship/Demo" . "<br />";
    echo $_SERVER['SERVER_ADDR'] . "<br />";
    echo date("Y/m/d H:i:s");
EOF
```

#### Webアプリを稼働させるDockerコンテナ作成

Dockerfileを作成してこのWebアプリを動かすためのコンテナを作成しましょう。

```bash:Dockerfile作成
$ vi Dockerfile
```

以下のような内容にします。コメントを除けば2行だけのシンプルなコンテナです。

```Dockerfile:Dockerfile
# ApacheベースのPHPコンテナを利用
FROM php:apache
# contentsディレクトリ配下をドキュメントルートへ配置
ADD contents/ /var/www/html/
```

#### 動作確認

ではDockerイメージをビルドしてコンテナを起動し動作確認します。

```bash:build_run_test
# このディレクトリのファイルを元にDockerイメージ作成、testというタグをつけておく
$ docker build -t test . 

# ビルドしたコンテナを実行、80番ポートを開ける
$ docker run -d -p 80:80 test

# 動作確認
$ open "http://localhost/index.php"
```

以下のような表示になるはずです。

**ローカルDockerでの稼働確認**
![localhost_index_php3.png](https://qiita-image-store.s3.amazonaws.com/0/20668/b421f809-6781-c445-461c-85a7159e70f0.png)

できましたか?
できたらコミットしちゃいましょう。

```bash:gitコミット
$ git add .
$ git commit -m"デモ用Webアプリ作成"
```

## GitHub(等)へPullRequest出す

**GitHubでPullRequest/Review/Merge**
![flow02.png](https://qiita-image-store.s3.amazonaws.com/0/20668/062943dd-b966-b827-5977-1aa34f62ed59.png)


レビューしてもらうためにGitHubへPullRequestを出します。
まずは現在の作業用ブランチをPushします。

```bash:ブランチをpush
$ git push origin ship_demo
```

PushしたらGithubで上記リポジトリを開きます。
"Compare & pull request"ボタンからPullRequestを作成してください。

**Pull request作成1**
![Github_pullrequest.png](https://qiita-image-store.s3.amazonaws.com/0/20668/de37704e-2b5b-f1c8-9a93-98c52cc17259.png)

**Pull request作成2**
![create_pr.png](https://qiita-image-store.s3.amazonaws.com/0/20668/085e9b50-2d22-7c16-dbbe-3052e90122cb.png)

## レビュー & マージ

PullRequestのレビューを行います。
(今回はこの辺りは関心事ではないため手順だけ紹介)

レビューしたらGitHub上でマージしましょう。

**PullRequestのレビュー/マージ**
![github_merge.png](https://qiita-image-store.s3.amazonaws.com/0/20668/cee0b3f3-e0e3-0e6f-5ee0-4ebcbbd436cb.png)

これでmasterブランチにマージされました。

## DockerHubでのAutomated Build

**Build/Ship/Runパイプライン**
![flow03.png](https://qiita-image-store.s3.amazonaws.com/0/20668/145dea62-9617-b4c7-6eba-bf7b3bcce7a6.png)


Webhookの設定済みなため、自動で`arukas-ship`へデプロイ通知が行われています。
なお、Webhookの履歴は設定画面から見ることができます。

**[参考]Webhookの呼び出し履歴確認**
![view_webhook_history.png](https://qiita-image-store.s3.amazonaws.com/0/20668/2489cd17-0815-6d54-4468-f7fdce84ff3b.png)


## ビルドされたDockerイメージをArukasへデプロイ

Arukasのコントロールパネルを見てみましょう。
先ほどのアプリがデプロイされているのが見えると思います。

**arukas-shipでアプリがデプロイされている**
![arukas_latest_demo.png](https://qiita-image-store.s3.amazonaws.com/0/20668/02ba009f-e0e3-e7ad-5ed1-dd85a8cfbdc9.png)

WebhookのURLパラメータ`app`で指定した"arukas-ship-demo"という名前で
Arukas上にデプロイされました。
実際にEndpointのURLをブラウザで開いてみてください。

**Arukas上での稼働確認**
![arukas_latest_endpoint.png](https://qiita-image-store.s3.amazonaws.com/0/20668/56057f3a-63ad-b825-e30a-47c37c90278d.png)

無事表示されましたね:bangbang:

以降は開発/テスト/コミット/プルリクエスト/レビュー&マージというサイクルを回すだけです。
マージしたらBuild/Ship/Runという一連のデリバリーは勝手に行われます。

# 終わりに

いかがでしたでしょうか？
Dockerを使って、Webアプリと動作環境をパッケージングし、ビルド〜デリバリーまでの自動化を行いました。

色々応用できると思いますので是非お試しください:bangbang:
今ならArukasはベータ期間ということで無料です。チャンスですね:bangbang:


以上です。