こんにちは。まゆみです。

Dockerについての記事をシリーズで書いています。

今回の記事では、CI/CDパイプラインの流れの

TravisCIテスト ➡ ElasticBeanStalkでdeploy

の部分にフォーカスを置き

• TravisCIでテストを自動的に実行させるにはどうしたら良いのか？
• テストがパスした後に、ElasticBeanStalkでdeployするにはどうしたら良いのか

ということを書いていこうと思います

Github Repositoryにソースコードをアップする

こちらの記事は、Githubにソースコードをアップさせた後からのワークフローを書いています。

もし、Github　Repositoryにソースコードをアップさせる方法が分からない方はこちらとこちらの記事に書いています。

①git init
②git add .
③git commit -m"コミットした時のメッセージ"
④git remote add origin ＜github repositoryのアドレス＞
⑤git push origin master

がGithub Repositoryにpushするおおよその流れになります。

その後、Github Repositoryにちゃんとpushされたことを確認します

TravisCIとGithub Repositoryを連動させる

Travis CIは、Github Repositoryに新しいコードがpushされた時、またはコードが更新された時、Githubからそのソースコードを引っ張ってくることができます。

TravisCIのページからOauthを利用してGithubアカウントと紐づけしましょう

注意
TravisCIは『.org』ではなく、『.com』の方を使ってください。

.travis.yamlファイルを記入する

TravisCIとGithubが連携させたあと、あなたがTravisCIに自動化してやってもらいことをyamlファイルに書く必要があります

『.travis.yaml』ファイルをプロジェクトフォルダー内に作ってください。(ファイル名travisの前に . (ドット)があることに注意です。)

TravisCIに自動化してやってもらいこと

Dockerのコピー
Dockerfile.devファイルを使ってイメージを作る
テストスイートを実行する事
AWSにコードをdeployする事

以上のことをyamlファイルに書いていきます。

そしてここでなぜ、Dockerfileではなく、Dockerfile.devを使ってイメージを作成するのか？という疑問がわいてきた方もいると思います

DockerfileはProductionのためのファイルであり、テストスイートを実行させるコードを含んでいないからです。

.travis.yamlファイルの書き方(前半)

とりあえず、AWSにコードをdeployする指示を書く前の段階までを書いて解説していきます

Dockerのコピー
Dockerfile.devファイルを使ってイメージを作る
テストスイートを実行する事　　<----ここまで
AWSにコードをdeployする事

.travis.yamlファイルの前半部分の完成形は下のスクショのようになります

後半部分については、AWSのElasticBeanStalkでdeployする方法を後述するときに説明します。

上のスクショに振っている番号と照らし合わせながら、1行づつ説明していきます

①sudo: required

コードの実行にスーパーユーザー権限が必要なので書きます。

②services

AWSでdeployしたいサービス名を書きます。

今回はDocker CLIが必要なので、

- docker

と書きます。

③before_install

テストスイートが実行される前に実行されるべきコマンドを書きます

今回の記事では、Reactのアプリを作る時の一連の流れを例として扱っています。
(Reactを使ったアプリを作る時のテストスイートを実行するコマンドについてはこちらで説明しています)

-tオプションをつけて、次の段階(テストスイートを実行する段階)でImageIDを探さなくて良いようにしておきます

④script

テストスイートを実行するためのコマンドを書きます

ただテストスイートの実行をディフォルトのまま使うと、テスト実行後もそこから抜け出ずに、コンピューターがあなたからの指示待ち状態になります。(下のスクショ参考)

テストが1回終わったら抜け出るようにするには

-- --coverage

オプションを付けて実行します

-- --coverageでも抜け出れない。

私の場合もそうなんですが、『-- --coverage』オプションを付けても抜け出れない場合があります。

その時の答えはStackOverFlowにありました。

-- --coverageで上手く抜け出ることができない方は、下のコマンドを試してみてください。

docker run -e CI=true <ImageID> npm run test

Githubにpush する

.travis.ymlの前半が書き終わったので、これをGithubにpushします

git add .
git commit -m "メッセージ"
git push origin master

そのあと、TravisCIに戻ると、TravisCIがGithubからソースコードを引っ張ってテストスイートを実行してくれているのが分かります

exited with 0

と表示されたら、テストが上手くいったことを示しています

AWS　ElasticBeanStalk

では次にAWSのページを開き、サービス名elasticbeanstalk を検索窓に入力して、アプリケーションを作ります。

環境を作ります

今回はWebアプリなのでウェブサーバー環境を選択してください。

アプリケーション名をあなたが好きなようにつけてください。(のちにyamlファイルに書くので覚えておいてくださいね。)

また、プラットフォームにDocker を選択してください。

注意：
あなたの使っている環境によっては、プラットフォームにDocker を選択した時に自動的に選択されるプラットフォームのブランチが『64 bit Amazon Linux 2』ではうまく行かない時もあります。
その場合は『64 bit Amazon Linux』を選択してください。

その後、作成ボタンをクリックすると、AWSがElasticBeanStalkを作ってくれます。

少し時間がかかります

3～5分くらい待たないといけませんが、気長に待ちましょう

下の様になればOKです。

赤の矢印の部分をクリックすると

ディフォルトのアプリケーションになります

.travis.yamlファイルの書き方(後半)

では、yamlファイルの後半部分を書いていきます

deploy　> provider

どのサービスを使ってdeployするのかを書きます。

deploy > region

regionに何を書くべきかは、上のスクショの赤の矢印の部分に書かれています

deploy > app

最初にElastic Bean Stalk を立ち上げた時につけたアプリケーション名を書きます

deploy > env

上のスクショの赤の矢印に書かれたテキストを書きます

deploy > bucket_name

Github Repositoryから渡されてきたコードはS3 bucketに渡されます。

そのため、バケット名を書く必要があります

AWSのサービス『S3』で検索して、S3のページを開きましょう。

すると、バケットが作られているので、この名前をコピーしてyamlファイルに記載します

deploy > bucket_path

先ほど『deploy > app』に書いたものをそのまま書きます。

deploy > on

branch: master

と書くことで、master以外のbranch(例えばfeatureブランチなど)にコードがアップされた時は、deployされないが、masterブランチにコードがpushされた時はdeployされるということになります

yamlファイルは前半の部分も含めて下のようになります

AWSのIAMユーザーに追加する

TravisCIによって使われるべきIAMユーザーを追加します

IAMのユーザー追加から

ElasticBeanStalkのすべての権限を与えます

ユーザーが追加されました。

ユーザー追加の最後のページにシークレットアクセスキーとパスワードが記載されていますが、これらについてはyamlファイルにそのまま書くことができませんよね。

なぜならGithub Repositoryにアップするので。

そこで、TravisCIでこのシークレットアクセスキーなどの環境変数を設定して、yamlファイルには環境変数によって管理します

TravisCIのEnvironment Variable

下のスクショにあるように、赤で囲まれた『settings』をクリックしてください。

そして、『Environment Variable』のセクションを探します

AWSのアクセスキーとシークレットキーをそれぞれ環境変数に代入してください。

その時に『DISPLAY VALUE IN BUILD LOG』と書かれたスイッチみたいになっているところがオフになっていることを確かめてください。

yamlファイル

yamlファイルの最後に

access_key_id:
secret_access_key:

を書きます。

そして、先ほどTravisCIで設定した環境変数をこちらに書きます

ポートをあけるための指示

Webアプリなのでポートを開けます。

その指示は、コマンドラインでするのではなく、Dockerfileに書きます。

EXPOSE <ポート番号>

とDockerfileに書きましょう

最後に、ソースコードに変更が加わった時は

git add .
git commit -m "メッセージ"
git push origin master

でGithubにpushしてくださいね。

AWSのElasticBeanStalkに書いてあるURLをクリックするとあなたのWebアプリのページにアクセスする事ができます　＼(^o^)／