AWS Cloud9 + AWS CodeCommit + AWS AmplifyでWebサイトを公開してみる

# やりたいこと

AWSでWebサイトを公開したい！
ついでにコーディングしたら自動でWebサイトも書き換わってほしい！

という内容です。
具体的には、AWS Cloud9 + AWS CodeCommitでAWS上に開発環境を構築し、AWS CodeCommit + AWS AmplifyでWebサイトを公開します。

内容は下記の公式チュートリアルに沿ったものです（ただし公式チュートリアルではCloud9は使用しません）。
https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/

# システム構成図

![AWS1_pict.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/dbe1e935-4969-64dc-272d-21fcdb3e60bd.png)

1. WebエンジニアがAWS Cloud9上でHTML、JavaScript、CSSなどを作成/編集します。
1. WebエンジニアがCloud9からAWS CodeCommitにソースコードをアップロードします。
1. AWS AmplifyがCodeCommitの変更を検知しWebサイトを自動デプロイします。
1. ユーザがAmplifyによって生成されたURLにアクセスするとWebサイトが閲覧できます。

# 手順

## AWSアカウントを作る

AWSを使うためにはAWSアカウントが必要です。
まだ作っていない場合はこちらのチュートリアルを参考にアカウントを作成します。
https://aws.amazon.com/jp/register-flow/

注意：
AWSはアカウント作成時に支払情報の入力が必要です。
また本チュートリアルも条件によっては課金が発生する可能性があるので各自調べた上で進めることを推奨します。
AWSの無料利用枠に関する公式の説明はこちら↓
https://aws.amazon.com/jp/free


## IAMユーザでログインする

最初にIAMユーザでログインします。
まだIAMユーザを作っていない場合はIAMユーザを作成してください。
IAMユーザの作成手順はこちらの記事です。
https://qiita.com/mkttks/items/599ba345f3f1bc6775ec

## CodeCommitでGitリポジトリを用意する

それではCodeCommitを使ってソースコードを管理するためのGitリポジトリを用意しましょう。

### リージョンを選択する
作業に入る前にAWSのリージョンを設定します。リージョンをざっくり説明すると「どこの国（地域）にデータを置くか？」を選択する機能です。別にどこを設定してもいいのですが、作業中に知らずにリージョンを切り替えてしまうと「前のステップで作成した○○がない！」となってしまうので作業を始める前にあらかじめ決めてしまいます。
ここでは東京リージョンを選択しましょう。

1. AWS Console上部の右のほうに「バージニア北部」などの地名が書かれたタブがあるのでクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/e0bf9634-45e9-35e2-5ea0-b8d8670d2838.png)
1. プルダウンメニューから「アジアパシフィック (東京) ap-northeast-1」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/a673dd91-fa47-9332-8253-7bb67cc91d68.png)

これで東京リージョンに切り替わりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/c442e0eb-e999-2224-7f2f-d066de72e3b3.png)


### Gitリポジトリを作成する
ここからはCodeCommmitを使ってGitリポジトリを作成していきます。

1. AWS Consoleの検索欄に「codecommit」と入力
1. 出てきたCodeCommitのロゴをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/af8173e7-bb79-3130-93f0-b067b1c9ceda.png)
1. 「リポジトリ」->「リポジトリの作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/c96c90ea-4f63-4e75-20e4-fc3cdc349568.png)
1. 「リポジトリの設定」->「リポジトリ名」で任意の名前を入力（ここでは公式チュートリアルに従ってwildrydes-siteとします）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/86f31eb1-79f1-1212-7b5e-f6cabd99857b.png)
1. 「作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/bec427f0-2aaa-641e-dc7f-2f7d97ff8345.png)

Gitリポジトリが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/c640cf4e-1a26-99e3-3e0b-0d7d654eaf02.png)

## Cloud9で開発環境を作成する

続いてCloud9を使ってAWS上に開発環境を構築します。

1. AWS Consoleの検索欄で「cloud9」と入力
1. Cloud9のアイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/a9a4cec0-7ac3-a929-027a-f1460a71e200.png)
1. 「環境」->「環境を作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/28eeb152-6492-79f9-9c7d-3691e324ebcf.png)
1. 「環境を作成」->「詳細」->「名前」で任意の名前を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/8a485e8a-6829-a52c-a3db-56688378ce27.png)
1. （いろいろと項目がありますが今回はお試しということで）すべてデフォルトのまま「作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/ded41a20-65da-018a-4268-b4618c87fa9f.png)

AWS上に開発環境ができました。「Cloud9 IDE」タブの下の「開く」ボタンを押すと別タブで開発ウィンドウが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/2ba2929f-9c28-884b-6a4d-57f7b883dd9f.png)
このウィンドウを別タブで開いた状態で次のステップに進んでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/9e911e3e-340b-d611-7ba8-3043dd3b42f5.png)

## 開発環境からGitリポジトリを更新できるようにする

Cloud9で作った開発環境からCodeCommmitで作ったGitリポジトリを更新できるように設定します。

### IAMユーザのGit認証情報を生成する

まずIAMユーザでGitリポジトリにアクセスできるようにIAMユーザのGit認証情報を生成します。

1. AWS Consoleの検索欄に「iam」と入力
1. 出てきたIAMのアイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/2cdd4dcd-5bf4-b73b-3cb7-3eb8a469829d.png)
1. 「ユーザー」からユーザ名（Admin）をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/f04a5bd4-736c-cdb6-ce51-c59010916187.png)
1. 「セキュリティ認証情報」タブを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/62c157ff-fead-de64-6ee5-947dae7a710d.png)
1. 「AWS CodeCommit の HTTPS Git 認証情報」->「認証情報を生成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/44f1cc13-36a1-dd64-9db5-b1bfc5ca0eb9.png)
1. 「認証情報を生成」ダイアログのユーザ名とパスワードをメモする
（*ダイアログを閉じると二度と確認できなくなるので注意）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/c9ea8213-aa2c-ee38-4e48-575d2c9640fc.png)

### 開発環境にGitリポジトリをクローンする

先ほど生成したIAMユーザのGit認証情報を使ってCloud9の開発環境にGitリポジトリをクローンします。

1. AWS Consoleの検索欄に「codecommit」と入力
1. 出てきたCodeCommitのロゴをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/af8173e7-bb79-3130-93f0-b067b1c9ceda.png)
1. 「リポジトリ」で今回作ったリポジトリにチェックを入れる
1. 「URLのクローン」->「HTTPSのクローン」をクリック（クリップボードにURLがコピーされます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/d1cf3787-3c66-0b8e-14b4-f5cc955a33ca.png)
1. Cloud9で作った開発環境のウィンドウに移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/9e911e3e-340b-d611-7ba8-3043dd3b42f5.png)
1. 画面下部にターミナルがあるためそこにコマンドを入力していく
（*表示されていない場合は「Window」->「New Terminal」で開けます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/479f4c8f-3f81-c4b0-9b3b-29c80a961183.png)
1. ターミナルにgit cloneコマンドを入力
```git clone https://xxxxxxxxxxxxxxxxx```
（https://xxxxxxx...は「HTTPSのクローン」でクリップボードにコピーしたURL）
1. 求められた場合、指示に従ってIAMユーザのGit認証情報（ユーザ名、パスワード）を入力する

成功すると画面左側にクローンしたリポジトリ名のディレクトリ（wildrytes-site）が作成されました。ディレクトリはまだ空の状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/b08a15ab-d44f-fe8f-d9ab-0c860db3bf66.png)

### 開発環境からGitリポジトリを更新してみる

それでは開発環境からCodeCommitのGitリポジトリを更新できるかやってみましょう。今回は公式のチュートリアルで配布されているサンプルを利用します。

1. ターミナルで現在のディレクトリからgitリポジトリのディレクトリに移動する
```cd ./wildrydes-site```
1. ターミナルで公式が配布しているサンプルコードをダウンロードする
```aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive```
1. ダウンロードが完了するとwildrydes-siteディレクトリが以下のようになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/f41318ab-e1aa-1fe5-6063-74588254536c.png)
1. Cloud9の開発環境の変更をCodeCommitのGitリポジトリに反映させるため、ターミナルで以下のコマンドを入力
```$ git add .```
```$ git commit -m 'new'```
```$ git push```

CodeCommitにアクセスして変更が反映されているか確認します。
反映されていれば開発環境の構築は成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/056ca69f-4cec-ce9f-fe71-96b6914f1548.png)

## AmplifyでWebサイトを公開する
最後にAmplifyを使ってWebサイトをホストします。

### Amplifyホスティングを開始する

Amplifyホスティングを開始してCodeCommitのソースコードからWebサイトを公開します。

1. AWS Consoleの検索欄に「amplify」と入力
1. AWS Amplifyのロゴをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/39ca4ce1-6e13-f03b-b982-83b19a49925c.png)
1. 「使用を開始する」->「Amplifyホスティング」->「使用を開始する」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/cd0a3de6-ae0f-de79-2620-b7680433d02b.png)
1. 「Amplifyホスティングの開始方法」->「既存のコードから」で「AWS CodeCommit」にチェックを入れる
1. 「続行」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/c6a72b06-bc29-3a51-808a-bd8da1e7e2bf.png)
1. 「リポジトリブランチの追加」->「AWS CodeCommit」->「レポジトリの選択」でwildrydes-siteを選択
1. 「ブランチ」で公開したいブランチを選択（master）
1. 「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/bf63b6eb-3831-7c41-d910-053bdf54c5e9.png)
1. 「ビルドの設定」->「アプリケーションの構築とテストの設定」->「AWS Amplify がプロジェクトのルート・・・」にチェックを入れる
*これにチェックするとCodeCommitの更新が自動的にWebサイトに反映されるようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/45cf8fce-f6ea-24f2-46cf-8810d3c85b2e.png)
1. 「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/4ac63ab8-4432-a4f1-7f0f-4476fc62766b.png)
1. 「保存してデプロイ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/95474f0d-54ee-7624-f453-676c79cae3e7.png)

デプロイが完了すると下記画面の「デプロイ」が緑色になります。
左下のURLをクリックしてアクセスしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/fa863089-6466-bc5c-3c7f-81d16ce62e1a.png)
このWebページが表示されたら成功です！お疲れ様でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/e897faf5-0af6-a0a9-2c0f-7c05abd53dce.png)

# 動作確認

Cloud9 + CodeCommit + Amplifyの開発環境が構築できたので、Cloud9でコーディングしてCodeCommitにgit pushすると変更がWebサイトに反映されるはずです。試してみましょう。

1. Cloud9の開発環境にアクセス
1. 「wildrydes-site/js/index.html」を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/c1897528-d2c1-b50f-2cdd-c247f78a7424.png)
1. headタグのtitleを好きな文字列に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/a5b45706-607c-2a94-95db-c170f541cec7.png)
1. 開発環境の変更をCodeCommitのGitリポジトリに反映させるため、ターミナルで以下のコマンドを入力
```$ git add .```
```$ git commit -m 'update title'```
```$ git push```

Amplifyのwildrydes-siteの「Hosting environments」を見ると「プロビジョン」「構築」「デプロイ」の色が変わって変更が自動でデプロイされていることがわかります。

反映されたらもういちどURLにアクセスしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/773aca8c-649f-9e89-7f5b-8d553dd37859.png)
無事タイトルが変わりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492231/903cd01e-1e82-7dd5-cf0b-6220d5150028.png)

# まとめ
今回はAWS Cloud9とAWS CodeCommitとAWS Amplifyを使ってWebサイトの開発環境を構築しました。
次回はAWS Cognitoを使用してこのチュートリアルで作ったWebサイトにログイン機能を実装していきます。
https://qiita.com/mkttks/items/5220724fdd10ff51333d