【Docker】TravisCI からElasticBeanStalkでdeployするまで　no.36

![パンプキン カフェ (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/5388491b-a96b-5571-aa0c-f45d7df69906.png)

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

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

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

>TravisCIテスト ➡ ElasticBeanStalkでdeploy

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

<ul>

<li>TravisCIでテストを自動的に実行させるにはどうしたら良いのか？</li>

<li>テストがパスした後に、ElasticBeanStalkでdeployするにはどうしたら良いのか</li>

</ul>

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

![Git hub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/3614a59b-c054-3a90-19c9-f6bac5acab5a.png)


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

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

もし、Github　Repositoryにソースコードをアップさせる方法が分からない方は[こちら](https://qiita.com/Mayumi_Pythonista/items/5fff7ffcf9d561259811)と[こちら](https://qiita.com/Mayumi_Pythonista/items/9e747283f8df97fb45c4)の記事に書いています。

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

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

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

![2021-08-05_11-16-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/bbdb9797-ebc5-2098-f195-43c4b7cad48c.png)


#TravisCIとGithub Repositoryを連動させる
![新しくコードがpushされたよ。.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/07000058-7f26-4c33-31a9-7c69bd8f8464.png)

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

[TravisCI](https://www.travis-ci.com/)のページからOauthを利用してGithubアカウントと紐づけしましょう

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

![2021-08-05_11-30-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/54ea850f-97d7-1f89-7129-3982289b1f38.png)

#.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ファイルを使ってイメージを作る
テストスイートを実行する事　　<font color="Red"><----ここまで</font>
AWSにコードをdeployする事

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

![2021-08-05_13-08-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/ea8ef9ab-be32-5808-336d-9883b911a56b.png)

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

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

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

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

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

```
- docker
```
と書きます。

##③before_install

テストスイートが実行される<font color="Red">前</font>に実行されるべきコマンドを書きます

今回の記事では、Reactのアプリを作る時の一連の流れを例として扱っています。
(Reactを使ったアプリを作る時のテストスイートを実行するコマンドについては[こちら](https://qiita.com/Mayumi_Pythonista/items/d736fe7609a227051c1c#npm-run-test%E3%81%A7%E4%B8%8A%E6%9B%B8%E3%81%8D%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)で説明しています)

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

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

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


![2021-08-05_12-48-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/cec8024d-eb3e-a2e1-c12a-17550911b0fc.png)

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

```
-- --coverage
```

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


![2021-08-05_12-57-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/4c830e36-f2e4-ca49-2fc9-1c505ca4cf3c.png)

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

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

その時の答えは[StackOverFlow](https://stackoverflow.com/questions/55991641/npm-test-coverage-never-exits)にありました。

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

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


![2021-08-05_13-04-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/2d175a4d-628f-8027-095c-3494b7533b87.png)

#Githubにpush する

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

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

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



![2021-08-05_15-29-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/3b69d5ac-659b-35ec-5073-78c2cf3004bf.png)


exited with 0

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

#AWS　ElasticBeanStalk

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

![2021-08-05_15-42-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/4ba5a969-3c51-cd4a-b2e7-71639ff3a26a.png)

環境を作ります

![2021-08-06_8-02-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/880a3600-274b-cbaf-db21-31f8f59dc519.png)

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

![2021-08-06_8-02-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/820f71f5-ff57-51d6-291f-dea69c2ad6ea.png)


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

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

![screencapture-console-aws-amazon-elasticbeanstalk-home-2021-08-06-08_05_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/9764093a-eb71-238f-d153-4bb2c4bbf82e.png)

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


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

少し時間がかかります

![2021-08-05_15-48-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/f0cdb04a-8bf4-73bf-6e8e-e9e48329bad3.png)

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

下の様になればOKです。

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


![2021-08-05_15-53-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/46ccf76a-ef57-d213-8494-3d4464a06391.png)

ディフォルトのアプリケーションになります
![2021-08-05_15-53-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/6020f03b-c758-894d-5254-903c18976966.png)

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

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

##deploy　> provider

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

##deploy > region

![2021-08-05_16-01-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/91cb2984-07e3-9882-e5d4-c02dc86809fb.png)

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

##deploy > app

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

##deploy > env

![2021-08-05_16-07-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/35948085-2122-26bf-f006-72768d8dcf64.png)

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

##deploy > bucket_name

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

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

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

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

![2021-08-05_16-15-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/8457ba80-db34-aa8e-d6df-389139f797f2.png)

##deploy > bucket_path

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

##deploy > on

```
branch: master
```

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

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

![2021-08-06_10-57-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/86f44839-a954-75b9-c96f-bec2866bb626.png)


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

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

IAMのユーザー追加から

![2021-08-05_16-51-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/ac53f86c-7a8c-d213-78bf-3b4233e45397.png)


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


![2021-08-05_16-54-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/7d649dd8-440e-caea-2e53-930f56fc3a68.png)


![2021-08-05_16-55-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/64029213-3b0a-a06b-66ec-e50e9b7fb704.png)
ユーザーが追加されました。

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

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

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

#TravisCIのEnvironment Variable

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

![2021-08-06_11-32-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/79e44621-242e-0463-9ca4-78bb768db13d.png)


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


![2021-08-05_17-04-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/8e79af7b-0c49-de30-86ce-0c05c4ec6dbc.png)

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

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

##yamlファイル

yamlファイルの最後に

```
access_key_id:
secret_access_key:
```
を書きます。

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

![2021-08-06_11-29-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/19856a78-3b7e-971a-8b78-3fbeb445f1d4.png)


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

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

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


```
EXPOSE <ポート番号>
```
とDockerfileに書きましょう

![2021-08-06_11-18-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/483f5262-5c11-a3a6-0419-1616337c15fd.png)

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

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

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

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

![2021-08-06_11-26-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/99bb3523-a541-7e21-2445-b632508e0cd5.png)

![2021-08-06_11-28-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/acd677db-44ae-d09b-4a11-7973d16641fe.png)