こんにちは。まゆみです。
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^)／
