AWS CodeStar と Cloud9 の連携

# はじめに
AWS CodeStar がついに東京リージョンにやってきました！
https://aws.amazon.com/jp/about-aws/whats-new/2017/12/aws-codestar-is-now-available-in-asia-pacific-tokyo-and-canada-central-regions/

早速CodeStarとCloud9の連携を試すぞ！と思ったのですが、よくよく考えればCloud9が東京リージョンに来ていませんでした。
今回はシンガポールリージョンで検証した内容でお伝えします。。。

# CodeStar プロジェクトの作成
プロジェクトのテンプレートを選択します。
ここではNode.js(AWS Lambda)を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/8aa7defc-d0d0-aca1-478c-e3d29427d624.png)

CodeStartのプロジェクト名を入力します。
リポジトリにはCode Commitを使用します。リポジトリ名にはプロジェクト名が反映されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/48a44988-c558-b80e-ec9d-00140404bbe3.png)

プロジェクトを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/f3f68d94-1757-fe15-4d69-f78f28a1d33c.png)

表示名、メールアドレスを入力してIAMユーザに紐づくCodeStarユーザを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/82116bc6-c63a-c2a8-cb3f-c3584023b9b8.png)

コードの編集方法の選択で、AWS Cloud9を選択します。
**2017年12月時点では東京リージョンではCloud9がGAしていないため、選択肢として表示されません**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/413b300b-a40f-dba4-fd15-da2486047eab.png)

Cloud9 のインスタンスも CodeStarのプロジェクト作成の中で出来ます！
今回はすべてデフォルトの設定で作成しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/32c4d573-ddd7-4cc3-65b0-ac3cda4fdeeb.png)

Cloud9のセットアップが完了するまでしばらく待ちます。
またCodeStarによって自動的にPipelineの作成まで行われており、CodeCommitへのInitial commitによって
サンプルアプリケーションがデプロイされています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/4e11a47e-c1a5-1afd-31ae-a5760c8ec427.png)

アプリケーションのエンドポイントにアクセスするとサンプルページが表示されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/41591506-6a4b-d153-31d0-10eb79360a27.png)

# Cloud9 での作業
コーディングの開始を選択すると アプリケーションコードが既にチェックアウトされ、gitのクレデンシャルも
設定された状態でCloud9が立ち上がります。楽ちん！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/54e6a1a4-ab8d-8166-a576-6c7537bb68c4.png)

Cloud9のコンソール上で git config しておきます

```shell-session
$ git config --global user.name YOUR_USER_NAME
$ git config --global user.email YOUR_EMAIL_ADDRESS
```

サンプルのindex.htmlを編集して、変更を反映させてみたいと思います。

```html:public/index.html
        <div class="message">
            <a class="twitter-link" href="http://twitter.com/home/?status=I%20created%20a%20project%20with%20AWS%20CodeStar!%20%23AWS%20%23AWSCodeStar%20https%3A%2F%2Faws.amazon.com%2Fcodestar"><img src="assets/img/tweet.svg" /></a>
            <div class="text">
                <h1>Congratulations!</h1>
                <h2>You just created a Node.js web application</h2>
                <h2>AWS CodeStar と Cloud9 の連携</h2> ★追記
            </div>
        </div>
```

ファンクションやAPI Gatewayの設定は変更していませんが、ローカルで実行してみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/ffb87eea-aa9d-8487-6f41-ffb5b0e22fff.png)

当然ですが、変更内容が反映され正常終了しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/dd8bc23d-02c2-282b-a781-9ca3eb587187.png)

変更内容をCodeCommitに反映します。
コンソール上のgit操作です。

```shell-session
$ cd codestar-test
$ git add .
$ git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   .gitignore
        modified:   public/index.html
$ git commit -m "編集テスト"
$ git push
```
※ローカル実行時に lambda-payloads.json が作成されるので、.gitignore に追加しています



CodeCommitへのプッシュを契機にPipelineが起動しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/ac0a6876-134a-b3a6-499e-bfeaf617ef17.png)

デプロイ(CloudFormationスタックの更新）が完了すると、修正内容が反映されていることを確認できました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/5ea985a6-8fb2-13c6-6cf6-3ac01c9bcbde.png)


# さいごに
今回 Lambda + API Gateway の環境で検証しましたが、CodeStar と Cloud9の連携により、
プロジェクトの作成、コーディング、テスト、継続的デプロイがここまで簡単に行えることに感動しました。
Cloud9 の東京リージョン登場が待ち遠しい。。
参考になれば幸いです。