TL;DR
AWS CodeStar触ってみた系の記事です
どちらかというとアプリケーションエンジニア目線での内容になります
- CI/CDが大切らしいけど、何から始めたらいいかわからない
- CIツールたくさんあってどれを使えばいいかわからない
- うちはAWS使ってるんだけどマネージドなサービスはないのかな?
という方はお試ししてみるといいと思います
私自身CodeStarはおろか、Code兄弟は1つも触ったことがありません
準備
AWSアカウントを取得しておきましょう
無料枠もありますし、個人の学習目的で利用する分には登録しておいて損はないと思います
手順
プロジェクトを開始する
サービス一覧からCodeStarを選択します
![1.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F721051c1-31a7-aee0-1155-2842758dcf78.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=dad9d88a4372f4336aaf7402910875b1)
サービスロールの作成
![2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F6b45de56-1652-3655-deca-ffe6f47e3e4c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=62dce9fd008d838e693a0327ddd166d2)
「ロールを作成します」を選択して進みます
プロジェクトのテンプレートの選択
![3.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F491e37fe-224f-7552-ed4b-88dbecadd72f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=38dd6bcd61c687c19304c04ec7b1d482)
テンプレートがたくさんありますが、左サイドバーでフィルタリングできるので、ご自分の希望にあったものを探してみてください
ここで選択した言語/FWによって、CodeStarの構成が変わってきます
![4.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F84582801-d561-63c3-3c5b-4608d723c1ca.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d7c92c28c16014d4852951cb8063af15)
今回はなるべく多くのAWSサービスを含みたかったので、Go/LambdaのWebアプリケーションを選択しました
プロジェクト詳細
![5.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2Fc77dd614-54e2-52dd-b41c-560756374acf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d20bb9ee3eee090db2a801729bbe0d42)
プロジェクト名とリポジトリを選択します
GitHubも選択できるみたいですが、今回はAWS CodeCommitを利用します
プロジェクト詳細の確認
![6.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2Fdf527eb2-1d9a-dea1-9e6f-776988e6f4af.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bbd443c8e054b0a117e9a58f9712ec5b)
今回作成される構成の確認です
- ソース管理にCodeCommit
- ビルド(CI)にCodeBuild
- デプロイにCloudFormation(CodeDeploy)
- モニタリングにCloudWatch
という構成になるようです
選択している言語/FWによってはビルドフェーズがなかったり、デプロイがBeanstalkだったりします
この辺の構成を自分でこだわっていきたい方はCodeStarを使わずに自前で設計すればよくて、CodeStarはあくまでその辺の設計を良い感じに代行してくれるサービスだよという位置づけのようです
ユーザー設定のセットアップ
![7.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2Fba0f82ed-28bd-fa61-f80c-85f167106a6d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=61efd4e455b5625233934a676aaa4d5d)
初めてのアクセスではユーザー初期設定に遷移しますが、これはCodeStarメンバーとしてのユーザー名/Eメールの設定です
利用したいユーザー名/Eメールを設定します
コードの編集方法の選択
![8.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2Fdff74ffd-4e61-01a3-be70-2d6500ac5139.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bacebde10cc157e11149343312d4b113)
いつでも変更できるということなので、ここではコマンドラインツールを選択します
ツールに接続する
![9.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F01a3bac5-128f-c7df-1df7-a06770bfaa10.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=865964abf783cd3a05af0238871050a4)
Gitの設定からcloneまでの手順が示されるので、従って設定していきます
HTTPSの使用が推奨されているので、特に必要がなければ従っておくのがよさそうです
CodeCommit での IAM の使用: Git 認証情報、SSH キー、および AWS アクセスキー
作成した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プロジェクトのダッシュボードにアクセスできます
![10.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F9029e1c8-d82a-7534-c4c9-0b2de15af652.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=aef5df1935c339f0dd627350e29989f7)
サイドバーにはCodeCommit/CodeBuild/CodeDeploy/CodePipelineの各サービスへの導線があります
開発チームメンバーや拡張機能、プロジェクトリソースの管理もCodeStarで行えるようです
JIRAと連携してタスク管理なんかも可能なようですね
アプリケーションの動作確認
CodeStarダッシュボードのメニュー内、アプリケーションのエンドポイントを見ると、すでにエンドポイントが一つ有効になっています
アクセスすると以下のようなWelcomeページが確認できます
![11.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F17c2e6c0-19fd-75e5-8de3-993de0956e81.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3fc475ee5c5b4965b8197b9f48a43468)
どうやら初期コミットの状態ですでにデプロイされているようなので、一部変更して反映までの流れを確認してみます
CodeCommitでプルリクエストの作成
![12.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F1813e1de-be58-0f42-d508-9f2c8e6af38d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6bace0748d3e9fbfc6cee69b7f75680a)
ローカルでブランチを作成してプッシュすると、CodeCommit > リポジトリ > ブランチに反映されます
作成したブランチを選択してプルリクエストを作成できます
![13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F428397f2-532e-9e99-80b8-8939535e0a2e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1842b7556dcde4bd7813010a70423229)
普段GitHub等でプルリクエストを使っている人には特に問題ないと思いますが、チームで開発を行う際にはプルリクエストをベースにレビュー等を行います
デフォルトの設定ではブランチやプルリクエストを作成してもビルド以降のフェーズは実行されません
マージしてmasterブランチに取り込んでみます
![14.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F55fb43be-a780-f7ab-9201-bce32444cf37.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a0e9c46ab6045b904bbff258ac309bdd)
マージの種別等が選択できます
詳しく知りたい人は「git merge 種類
」とかで調べてみてください
パイプラインの実行
![15.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F77d62477-feb1-03a6-48cc-e235901db06d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cca26007f4903f0db629fde638aaf25c)
プルリクエストがmasterブランチへマージされると、自動でパイプラインが実行されます
しばらく様子を見てみます
![16.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F3ed5e1d8-d8cb-766b-592a-b27df33f6c77.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4c968dbd9a915ec63c2c4327e73ecc30)
![17.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F18eab1cc-d083-2616-291b-da0f8b3f7d26.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=32bbba91d2ce013c49b909ece69e4a44)
どうやらビルドが失敗しているようです…CodeBuildで詳細を確認してみます
(今回は意図的にビルドが失敗する変更をコミットしています)
![18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F4c0c6715-b131-104f-5037-ddef4f0abdc9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=247dff54237bf5d4e6bed57203a9d9c4)
ビルドログや実行時のパラメータを確認しながら修正します
![19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F9c201376-3777-a535-9e77-889a0e1b5448.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ff04313fbae88476f148dcc9195a0986)
不具合の修正と画面に表示する文字列の変更を行いました
こちらのプルリクエストを再度マージしてみます
![20.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2Fdb09e32b-4711-784f-05f0-86077c94a2ee.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a883a74862f062e67add5a3fb5148ba6)
再びビルドが始まりました
![21.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F4df53f63-06d6-7f9f-3d0b-855d0c481686.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0920e8744291d2875a084778f52a99f9)
ビルドが成功したようです
![22.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F6446fc6b-2872-e696-4736-6b7d4dab44bc.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c91ed718c2640ff604b5e3d86f590e02)
デプロイも成功したようです
先ほどのページにアクセスして画面の確認をしてみます
![23.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138022%2F04fbf2f7-1f55-3f65-0877-aa500b01ba75.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f7f7253333fbbe9e7f81c2c82940998c)
変更した文字列が反映されています
まとめ
最後の方は駆け足でしたが、一通りのサイクルを回してみました
このように、開発者がビルドやデプロイの仕組みを気にせずアプリケーションの開発に注力できるのが、CodeStarの魅力です
また、開発者にCIツールやデプロイの知識があまりなくても、パイプラインファーストな開発環境が準備できるのもありがたいです
慣れてきたらアプリケーションに合わせてカスタマイズをしたり、自分でパイプラインを設計したり、至高のCI/CDパイプラインを実現する5つの約束を意識して開発していくのがよいのかなと思います
※ 本稿は2019/7時点での情報になります