1. halnique

    Posted

    halnique
Changes in title
+AWS CodeStarで始めるフルマネージドCI/CD
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,215 @@
+## TL;DR
+
+[AWS CodeStar](https://aws.amazon.com/jp/codestar/)触ってみた系の記事です
+
+どちらかというとアプリケーションエンジニア目線での内容になります
+
+* CI/CDが大切らしいけど、何から始めたらいいかわからない
+* CIツールたくさんあってどれを使えばいいかわからない
+* うちはAWS使ってるんだけどマネージドなサービスはないのかな?
+
+という方はお試ししてみるといいと思います
+
+私自身CodeStarはおろか、Code兄弟は1つも触ったことがありません
+
+## 準備
+
+[AWSアカウントを取得](https://aws.amazon.com/jp/getting-started/)しておきましょう
+
+無料枠もありますし、個人の学習目的で利用する分には登録しておいて損はないと思います
+
+## 手順
+
+### プロジェクトを開始する
+
+サービス一覧からCodeStarを選択します
+
+<img width="1368" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/721051c1-31a7-aee0-1155-2842758dcf78.png">
+
+### サービスロールの作成
+
+<img width="1369" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/6b45de56-1652-3655-deca-ffe6f47e3e4c.png">
+
+「ロールを作成します」を選択して進みます
+
+### プロジェクトのテンプレートの選択
+
+<img width="1374" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/491e37fe-224f-7552-ed4b-88dbecadd72f.png">
+
+テンプレートがたくさんありますが、左サイドバーでフィルタリングできるので、ご自分の希望にあったものを探してみてください
+
+ここで選択した言語/FWによって、CodeStarの構成が変わってきます
+
+<img width="1378" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/84582801-d561-63c3-3c5b-4608d723c1ca.png">
+
+今回はなるべく多くのAWSサービスを含みたかったので、Go/LambdaのWebアプリケーションを選択しました
+
+### プロジェクト詳細
+
+<img width="1375" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/c77dd614-54e2-52dd-b41c-560756374acf.png">
+
+プロジェクト名とリポジトリを選択します
+
+GitHubも選択できるみたいですが、今回はAWS CodeCommitを利用します
+
+### プロジェクト詳細の確認
+
+<img width="1377" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/df527eb2-1d9a-dea1-9e6f-776988e6f4af.png">
+
+今回作成される構成の確認です
+
+* ソース管理にCodeCommit
+* ビルド(CI)にCodeBuild
+* デプロイにCloudFormation(CodeDeploy)
+* モニタリングにCloudWatch
+
+という構成になるようです
+
+選択している言語/FWによってはビルドフェーズがなかったり、デプロイがBeanstalkだったりします
+
+この辺の構成を自分でこだわっていきたい方はCodeStarを使わずに自前で設計すればよくて、CodeStarはあくまでその辺の設計を良い感じに代行してくれるサービスだよという位置づけのようです
+
+### ユーザー設定のセットアップ
+
+<img width="1380" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/ba0f82ed-28bd-fa61-f80c-85f167106a6d.png">
+
+初めてのアクセスではユーザー初期設定に遷移しますが、これはCodeStarメンバーとしてのユーザー名/Eメールの設定です
+
+利用したいユーザー名/Eメールを設定します
+
+### コードの編集方法の選択
+
+<img width="1378" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/dff74ffd-4e61-01a3-be70-2d6500ac5139.png">
+
+いつでも変更できるということなので、ここではコマンドラインツールを選択します
+
+### ツールに接続する
+
+<img width="1379" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/01a3bac5-128f-c7df-1df7-a06770bfaa10.png">
+
+Gitの設定からcloneまでの手順が示されるので、従って設定していきます
+
+HTTPSの使用が推奨されているので、特に必要がなければ従っておくのがよさそうです
+
+[CodeCommit での IAM の使用: Git 認証情報、SSH キー、および AWS アクセスキー](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_ssh-keys.html)
+
+作成したHTTPS Git認証情報を利用してリポジトリをcloneすると、初期コミットで以下のファイルが含まれていました
+
+```
+ Initial commit made by AWS CodeStar during project creation.
+
+ README.md | 65 ++++++++++++++++++++++++++++++++++++
+ buildspec.yml | 57 ++++++++++++++++++++++++++++++++
+ main.go | 31 +++++++++++++++++
+ main_test.go | 26 +++++++++++++++
+ public/assets/css/gradients.css | 25 ++++++++++++++
+ public/assets/css/styles.css | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ public/assets/img/tweet.svg | 15 +++++++++
+ public/assets/js/set-background.js | 3 ++
+ public/index.html | 74 +++++++++++++++++++++++++++++++++++++++++
+ template-configuration.json | 6 ++++
+ template.yml | 56 +++++++++++++++++++++++++++++++
+ 11 files changed, 549 insertions(+)
+```
+
+### プロジェクト作成完了
+
+ここまで済んだらプロジェクト作成完了のようです
+
+CodeStarプロジェクトのダッシュボードにアクセスできます
+
+<img width="1380" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/9029e1c8-d82a-7534-c4c9-0b2de15af652.png">
+
+サイドバーにはCodeCommit/CodeBuild/CodeDeploy/CodePipelineの各サービスへの導線があります
+
+開発チームメンバーや拡張機能、プロジェクトリソースの管理もCodeStarで行えるようです
+
+JIRAと連携してタスク管理なんかも可能なようですね
+
+### アプリケーションの動作確認
+
+CodeStarダッシュボードのメニュー内、アプリケーションのエンドポイントを見ると、すでにエンドポイントが一つ有効になっています
+
+アクセスすると以下のようなWelcomeページが確認できます
+
+<img width="1378" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/17c2e6c0-19fd-75e5-8de3-993de0956e81.png">
+
+どうやら初期コミットの状態ですでにデプロイされているようなので、一部変更して反映までの流れを確認してみます
+
+### CodeCommitでプルリクエストの作成
+
+<img width="1376" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/1813e1de-be58-0f42-d508-9f2c8e6af38d.png">
+
+ローカルでブランチを作成してプッシュすると、CodeCommit > リポジトリ > ブランチに反映されます
+
+作成したブランチを選択してプルリクエストを作成できます
+
+<img width="1377" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/428397f2-532e-9e99-80b8-8939535e0a2e.png">
+
+普段GitHub等でプルリクエストを使っている人には特に問題ないと思いますが、チームで開発を行う際にはプルリクエストをベースにレビュー等を行います
+
+デフォルトの設定ではブランチやプルリクエストを作成してもビルド以降のフェーズは実行されません
+
+マージしてmasterブランチに取り込んでみます
+
+<img width="1375" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/55fb43be-a780-f7ab-9201-bce32444cf37.png">
+
+マージの種別等が選択できます
+
+詳しく知りたい人は「`git merge 種類`」とかで調べてみてください
+
+### パイプラインの実行
+
+<img width="1376" alt="15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/77d62477-feb1-03a6-48cc-e235901db06d.png">
+
+プルリクエストがmasterブランチへマージされると、自動でパイプラインが実行されます
+
+しばらく様子を見てみます
+
+<img width="1376" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/3ed5e1d8-d8cb-766b-592a-b27df33f6c77.png">
+
+<img width="1378" alt="17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/18eab1cc-d083-2616-291b-da0f8b3f7d26.png">
+
+どうやらビルドが失敗しているようです…CodeBuildで詳細を確認してみます
+
+(今回は意図的にビルドが失敗する変更をコミットしています)
+
+<img width="1378" alt="18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/4c0c6715-b131-104f-5037-ddef4f0abdc9.png">
+
+ビルドログや実行時のパラメータを確認しながら修正します
+
+<img width="1374" alt="19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/9c201376-3777-a535-9e77-889a0e1b5448.png">
+
+不具合の修正と画面に表示する文字列の変更を行いました
+
+こちらのプルリクエストを再度マージしてみます
+
+<img width="1378" alt="20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/db09e32b-4711-784f-05f0-86077c94a2ee.png">
+
+再びビルドが始まりました
+
+<img width="1378" alt="21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/4df53f63-06d6-7f9f-3d0b-855d0c481686.png">
+
+ビルドが成功したようです
+
+<img width="1379" alt="22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/6446fc6b-2872-e696-4736-6b7d4dab44bc.png">
+
+デプロイも成功したようです
+
+先ほどのページにアクセスして画面の確認をしてみます
+
+<img width="1379" alt="23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138022/04fbf2f7-1f55-3f65-0877-aa500b01ba75.png">
+
+変更した文字列が反映されています
+
+## まとめ
+
+最後の方は駆け足でしたが、一通りのサイクルを回してみました
+
+このように、開発者がビルドやデプロイの仕組みを気にせずアプリケーションの開発に注力できるのが、CodeStarの魅力です
+
+また、開発者にCIツールやデプロイの知識があまりなくても、[パイプラインファースト](https://speakerdeck.com/toricls/the-five-principles-to-spark-joy-in-your-pipelines)な開発環境が準備できるのもありがたいです
+
+慣れてきたらアプリケーションに合わせてカスタマイズをしたり、自分でパイプラインを設計したり、[至高のCI/CDパイプラインを実現する5つの約束](https://speakerdeck.com/toricls/the-five-principles-to-spark-joy-in-your-pipelines)を意識して開発していくのがよいのかなと思います
+
+※ 本稿は2019/7時点での情報になります