最速でAWSに静的サイトの開発環境を作る

静的サイトを自分で確認するなら、ローカル環境で十分かもしれませんが、
お客さんに確認してもらうにはサ、別途サーバを準備する必要があったりします。

本記事では、S3に静的サイトを構築するだけでなく、開発環境の連携も視野に入れて説明します。
（開発環境だけでなく、上手にやれば本番でも使えるかも）

各設定項目の詳しい内容はすっ飛ばします。他記事で参考してもらえば良いと思います。

次のような環境をAWSで構築します。

![AWS_S3_CodeCommit_CodePipeline.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/33c47c54-8c9f-f8a0-1d8c-36241acdcf15.png)

スムーズに行けば、15分ぐらいで終わります。

## S3｜バケットを作成

- S3から**バケットを作成する**をクリックします。
 
###名前とリージョン

- バケット名を入力して **次へ** ボタンをクリックします。
![S3_bucker_create (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/19fd07cb-190a-5faa-4a02-d79ec8dbdb68.png)

> バケット名はドメイン名がおすすめです。（例：example.com）

###オプションの設定

- デフォルトのまま **次へ** ボタンをクリックします。

###アクセス許可の設定

- アクセス許可はアクセスコントロールリスト(ACL)のみブロックします。
![S3_bucker_create2 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/76489839-9152-f846-e6fe-8153a7b666de.png)

###確認

- **バケットを作成** をクリックします。

これで、バケット一覧画面に作成したバケットが表示されていたらOKです！

## S3｜静的サイトホスティング

###静的サイトホスティングの許可

- バケットのプロパティから **Static website hosting** を開きます。
- **このバケットを使用してウェブサイトをホストする**にチェックして、インデックスドキュメントを指定します。  
ここでは、インデックスドキュメントを index.html としています。
- **保存**ボタンをクリックします。

![S3_bucket_web_hosting.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/049df0af-3cc3-8ee8-cc5a-b815ee0fe901.jpeg)

> **エンドポイントは静的サイトのURLになります。**どこかにメモしておきましょう。

###アクセス制限の設定

- バケット > アクセス制限 > バケットポリシー の画面に移動します。
- バケットポリシーエディターに以下を貼り付けます。

```:バケットポリシーエディター
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::example.com/*"
            ],
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": [
                        "xxx.xxx.xxx.xxx",
                        "yyy.yyy.yyy.yyy"
                    ]
                }
            } 
        }
    ]
}
```

> - Resource の **example.com** は、作成したバケット名に変更してください。 
> - Condition の IpAddress の部分は、**デベロッパのIPアドレス**と**ユーザのIPアドレス**を指定してください。

- **保存**ボタンをクリックします。

###確認

- ここで、エンドポイントのURLにアクセスしてみましょう。  
おそらく **404** になると思いますが、これは index.html がないからなので大丈夫です。

## CodeCommit｜Gitリポジトリの作成

- CodeCommitから**リポジトリの作成**をクリックします。

###リポジトリの作成

- リポジトリ名を入力します。

![CodeCommit_create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/e6c69f25-1e74-0f0b-b17e-84bcdd1037b3.png)

- **作成**ボタンをクリックします。

###リポジトリに接続

####（windows10の場合）

- Gitクライアントをインストールします。（既にある場合は作業不要）
  https://gitforwindows.org

- アクセスさせたいIAMのユーザに次のポリシーを追加します。
  **AWSCodeCommitFullAccess**

- Git Bash などから、鍵を作成するために次のコマンドを実行します。

```  
$ ssh-keygen
Enter file in which to save the key (/c/Users/user/.ssh/id_rsa): codecommit_rsa    <- ファイル名はなんでもOK
Enter passphrase (empty for no passphrase): xxx   <- 鍵のパスワードを入力
...
```

- IAMユーザに鍵を登録
  - IAMユーザの**認証情報**タブを開く
  - AWS CodeCommit の SSHキー の**SSHパブリックキーのアップロード**をクリック
  - 作成した公開鍵（~/.ssh/codecommit_rsa.pub）をエディタで開いて、コピペ
  - **SSHパプリックキーのアップロード**をクリック

- ~/.ssh/configにサーバ情報を追加

```:~/.ssh/config
Host git-codecommit.ap-northeast-1.amazonaws.com
User APKATRC... [SSHキーID (IAMユーザのSSHキーを参照) ]
IdentityFile ~/.ssh/codecommit_rsa
```

###確認

- ssh接続を確認

```
$ ssh git-codecommit.ap-northeast-1.amazonaws.com
Enter passphrase for key '/c/Users/user/.ssh/codecommit_rsa': xxx

You have successfully authenticated over SSH.
You can use Git to interact with AWS CodeCommit.
Interactive shells are not supported.Connection to git-codecommit.ap-northeast-1.amazonaws.com closed by remote host.
Connection to git-codecommit.ap-northeast-1.amazonaws.com closed.
```

- git clone が出来るか確認
    
```
$ git clone ssh://git-codecommit...    <- git clone コマンドが載っていると思うので、それをコピペ
```

### index.htmlを作成

- git clone したフォルダに**index.html**を作成します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>example</title>
  </head>
  <body>
    <h1>welcome to example.com !!</h1>
  </body>
</html>
```

- git push します。

```
$ git add .
$ git commit -m '新規作成'
$ git push origin master
```

### リモートリポジトリが更新されているか確認

- CodeCommit の example.com にアクセスし、index.html が追加されていることを確認する。

![CodeCommit_create_2_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/2f65d227-7afb-ef6a-7abc-5d4d4e92b967.jpeg)

## CodePipeline｜リリースプロセスの作成

- **パイプラインの作成**をクリックします。

###パイプラインの設定

- **パイプライン名**と**ロール名**を入力します。
- 高度な設定はそのままにしておきます。

![CodePipeline_create_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/861b966b-bed9-6cbe-02fa-6db17ab83cac.png)

- **次に**をクリックします。

###ソースステージを追加

- 下図のように入力します。  
  リポジトリ名は作成したリポジトリを選択してください。（例：example.com）

![CodePipeline_create_2_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/18c1f58b-bcf3-46ef-4849-b4c52f89ffad.jpeg)


- **次に**をクリックします。

###ビルドステージを追加

- **ビルドステージをスキップ**をクリックします。

###デプロイステージを追加

- 下図のように入力します。  
  バケット名はS3で作成したバケットを選択してください。（例：example.com）

![CodePipeline_create_3_LI (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/593430b6-0bbf-6ebd-76cc-cafb3877050b.jpeg)

- **次に**をクリックします。

###確認

- **パイプラインを作成する**をクリックします。

## 最終確認

- もう一度、S3のエンドポイントに表示されているURLにアクセスしてみましょう。
- index.html に変更を加え、git push したら内容が変わることを確認してください。

## 最後に

ここまで静的サイトの開発環境の作成方法について説明しましたが、
**デプロイした時にファイルが削除されなかったり、フォルダ名の変更が出来なかったり**と問題があるようです。
https://qiita.com/izanari/items/aaa8fb89761f7a4ccef9

詳細な設定などはすっ飛ばして説明していますので、
ここからバケットポリシーでアクセス制限をかけるなどの応用も可能です。いろいろ試してみてください。

ざっくり書いたので不親切な部分もあるかもしれませんが、
ご指摘など頂けますと大変助かります。