【AWS】初めてのサーバレスアプリケーション構築をやってみた（1/4）

# はじめに
サーバレスのサービスをあまり触ったことがなかったので、AWSの「初めてのサーバレスアプリケーション構築」をやってみました。

私は、Gitも触ったことがなかったフロントエンド初心者のため、つまずいてしまった部分を含めて記載していこうと思います。
（つまずいた部分：:writing_hand:マーク）

実施したハンズオンはこちらです。（途中から英語になります。）
https://aws.amazon.com/jp/serverless/build-a-web-app/

# ハンズオンの概要
> ![概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/c565d62b-81bf-aeb6-97ab-362fc830561c.png)
出典：[サーバーレスのウェブアプリケーションを構築する](https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/ "サーバーレスのウェブアプリケーションを構築する")

**①静的ウェブサイトをホストする**：静的リソース（HTML,CSS,JavaScript,etc.）をホストするようにAWS Amplifyを設定します。

**②ユーザーの管理**：ユーザーのアカウントを管理するために、Amazon Cognitoユーザープールを作成します。

**③サーバーレスバックエンドを構築する**：AWS LambdaとAmazon DynamoDBを使用して、ウェブアプリケーションのリクエストを処理するためのバックエンドプロセスを構築します。

**④RESTful APIをデプロイする**：Amazon API Gatewayを使用して、RESTful APIとして構築したLambda関数を公開します。

本記事では①を設定していきます。

# 手順
以下手順です。

## リージョンを選択
私は東京リージョン（ap-northeast-1）で実施しました。

## CodeCommitを使用するためのセットアップ
:writing_hand:CodeCommitを使用するためのセットアップをしていきます。

### IAMユーザーのアクセスキーを作成
（今回は許可ポリシーにAdministratorAccessがあるIAMユーザーを使用しています。）

**①　IAMコンソール**　＞　**ナビゲーションメニューから「ユーザー」を選択**　＞　**使用するユーザー名を選択**　＞　**「セキュリティ認証情報」を選択**　＞　**「アクセスキー」項目で「アクセスキーを作成」を選択**
![シークレットアクセスキー作成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/d7b0c3ce-c3a7-ee1f-a8c6-cb77dc6e4495.png)

**②　「その他」を選択し、他はそのまま「次へ」**　＞　**「アクセスキーを作成」を選択**
![その他を選択.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/29345f3b-439b-2cf6-5e8b-2d2b6a1a9cbe.png)

**③　「アクセスキーを取得」画面で、「.csvファイルをダウンロード」を選択**　＞　**ダウンロード後、「完了」を選択**
（次の手順で使用します。）
![シークレットアクセスcsvファイルをダウンロード.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/977a627d-f654-bdad-14df-9e2479c09c3c.png)

### AWS CLIをインストール＆設定
CodeCommitでAWS CLIコマンドを使用するため、AWS CLIをローカルにインストールします。

**①　Windows用のAWS CLI MSIインストーラをダウンロードして実行**
https://awscli.amazonaws.com/AWSCLIV2.msi

**②　コマンドプロンプトを開き、インストールされていることを確認**

```text:コマンドプロンプト
aws --version
```

**③　AWS CLIを設定**

```text:コマンドプロンプト
aws configure
```

**④　プロンプトが表示されたら、CodeCommitで使用するIAMユーザーのアクセスキーとシークレットアクセスキーを指定**
（先ほどダウンロードした.csvファイル「ユーザー名_accessKeys.csv」に記載があります。）

```text:コマンドプロンプト
AWS Access Key ID [None]: IAMユーザーのAccess key IDを入力し、Enter
AWS Secret Access Key [None]: IAMユーザーのSecret access keyを入力し、Enter
Default region name [None]: 今回は何も入力せず、Enter
Default output format [None]: 今回は何も入力せず、Enter
```

### CodeCommitへのHTTPS接続用のGit認証情報を生成する

AWSマネジメントコンソールに戻ります。

**①　IAMコンソール**　＞　**ナビゲーションメニューから「ユーザー」を選択**　＞　**使用するユーザー名を選択**　＞　**「セキュリティ認証情報」を選択**　＞　**「AWS CodeCommitのHTTPS Git認証情報」項目で「認証情報を生成」を選択**
![HTTPS Git認証情報　詳細情報を生成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/d25d5853-3721-7b3c-d2d8-cf606a6057c7.png)

**②　「認証情報を生成」画面で「認証情報をダウンロード」を選択**　＞　**ダウンロード後、「閉じる」を選択**
（後ほど手順で出てくる「Git Credential Manager」で使用します。）
![認証情報をダウンロード.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/e7d56184-c4bb-eb8d-c2e8-8f124cc33983.png)

### Gitをインストールする
**①　https://git-scm.com/downloads からGitインストーラをダウンロードして実行**

**②　「Completing the Git Setup Wizard」画面で、「Launch Git Bash」にチェックを入れて「Finish」を選択**
![git launchgitbash.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/20cb9c58-7809-567a-e935-c7199e657646.png)

:writing_hand:git commitコマンドでエラーが出ないようにするために、事前にユーザー情報の登録をしておきます。

```text:Git
git config --global user.email "xxxxx@xxx.com【任意のメールアドレス】"
git config --global user.name "test【任意のユーザー名】"
```

## Gitリポジトリを作成
CodeCommitを使ってアプリケーションコードを保存します。まずは、Gitリポジトリを作成していきます。

**①　AWS CodeCommitコンソール**　＞　**ナビゲーションメニューから「リポジトリ」を選択**　＞　**「リポジトリの作成」を選択**
![リポジトリの作成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/39e8cb1a-3b38-5d27-f2e1-dd9f30c6d0d0.png)

**②　リポジトリ名に「wildrydes-site」を入力**　＞　**「作成」を選択**
![リポジトリの作成画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/dc99e8c5-973b-0275-2e19-81fcc9bbb2b8.png)

**③　作成後、「URLのクローン」から「HTTPSのクローン」を選択**　＞　**画面上部に「コピーされました」と表示されることを確認**
![HTTPSのクローンを選択、コピーされました.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/9fe13dff-b929-feae-8565-6817d670cece.png)

**④　Gitのターミナルウィンドウを開く**　＞　**git cloneコマンドを使用**

```text:Git
git clone https://xxxxx（先ほどコピーしたリポジトリのHTTPS URL）
```

:writing_hand:実行後、「Git Credential Manager」が表示されてUsernameとPasswordの入力を求められました。
（先ほどダウンロードした.csvファイル「ユーザー名_codecommit_credentials.csv」に記載があります。）
![初めてGit Cloneするとき.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/e74efe72-1d4a-a002-9b4a-a7913989ced4.png)

```text:Git：結果例
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Cloning into 'wildrydes-site'...
warning: You appear to have cloned an empty repository.
```

## Gitリポジトリにデータを追加する
**①　ディレクトリをリポジトリに変更**　＞　**AWSのハンズオンで提供されているS3バケットからウェブサイトの静的ファイルをコピー**

```text:Git
cd wildrydes-site
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
```

:writing_hand:bash: aws: command not foundと表示されてしまった場合、Gitを再起動してみたらいけました。

**②　静的ファイルをプッシュ**

```text:Git
git add .
git commit -m 'new'
git push

#結果例
Counting objects: 95, done.
Compressing objects: 100% (94/94), done.
Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
Total 95 (delta 2), reused 0 (delta 0)
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master
```

コンソール上でCodeCommitのコードを見てみると、無事にファイルが上がっていることを確認できます。
![codecommitに入っていることが確認できる.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/a35cfd7f-26f5-83cb-74b9-7b69ac690918.png)

## AWS Amplify使ってウェブサイトをデプロイする
**①　AWS Amplifyコンソール**　＞　**「使用を開始する」を選択**　＞　**Amplify ホスティングの「使用を開始する」を選択**
![Amplify使用を開始する.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/0611593f-644c-0523-66b3-573768b7b23b.png)

**②　「既存のコードから」項目で「AWS CodeCommit」を選択**　＞　**「続行」を選択**
![Amplify CodeCommitを選択.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/577d6ff3-1754-25bb-643f-d30d54a151c5.png)

**③　「最近更新されたリポジトリ」項目で今回使用するリポジトリを選択**　＞　**他はそのまま「次へ」を選択**
最近更新されたリポジトリ：wildrydes-site
ブランチ：master
![リポジトリを選択して次へ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/8db96c40-ea13-9f8e-340c-fb6c0481b90f.png)

**④　「AWS Amplifyがプロジェクトのルートディレクトリでホストされているすべてのファイルを自動的にデプロイすることを許可」を選択**　＞　**他はそのまま「次へ」を選択**
![デプロイすることを許可を選択し次へ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/6c910936-0951-9dc4-ddfa-8d142e0c7440.png)

**⑤　設定を確認し、「保存してデプロイ」を選択**
![確認画面で保存してデプロイ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/6084100f-dbd7-20fc-ad08-a91f6c530135.png)

Amplifyが必要なリソースを作成して、デプロイしてくれます。（私は2分弱でできました。）
完了したら、URLをクリックしてサイトを立ち上げてみます。
![デプロイ完了.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/d6fb0b92-5870-5725-fa12-67de7bd846b5.png)
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491382/b8cb8090-eec3-0433-1400-546ac542c934.png)

無事にできていることを確認できました。

次の記事で②ユーザーの管理の設定をしていきたいと思います。

# 参考

https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/

https://docs.aws.amazon.com/codecommit/latest/userguide/setting-up-gc.html#setting-up-gc-iam

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html

https://yutaka-gakushu.com/tips/git/author-identity-unknown-error