AWSにフルサーバーレスなWebサイト運用環境を作る(Gatsby + Amplify + CodeCommit)

# 概要

「カッコいいデザインのモダンかつシンプルなWebサイトを堅牢安価に運用したい」をAWSのマネージドサービスをつなぎ合わせて構築します。管理すべきサーバーやRDBをなくしてDDoS、バージョンアップ失敗、リクエストの急増対策、高額な請求書とはおさらばして枕を高くして眠れるサイトを作ります。

- - - -

## もうちょっと詳しく

Webサイトを運営するには最低限、「(A)コンテンツを制作するしくみ」と「(B)コンテンツの構成を管理するしくみ」と「(C)作ったコンテンツを配信するしくみ」が必要です。

- - - -

20世紀の小規模ホームページなら

(A) コンテンツを制作するしくみ：ホームページ・ビルダー / Adobe Dreameaver
(B) コンテンツを管理する仕組み：PCのファイルシステム上+人力
(C) 作ったコンテンツを配信する仕組み：レンタルホームページ

だったでしょうし、

- - - -

近年主流のWordPressなら、

(A) コンテンツを制作するしくみ：WordPress
(B) コンテンツを管理する仕組み：WordPress 
　　　　(データはRDBMS + ホストのファイルシステム)
(C) 作ったコンテンツを配信する仕組み：WordPress 
　　　　(データはRDBMS + ホストのファイルシステム)

- - - -

WordPressだけあれば全て賄えるのですが、いわゆるLAMP環境のWordPressがネックになることも多々あります。
自動アップデートが失敗して何も応答しなくなったり、DDoSくらって借りてるサーバーが落とされたり、DBが過負荷で遅くなったり。だいたいトラヒック増えたらサーバーやDB増強なんて…めんどくさい。

- - - -

今回はそれぞれを分離して、フルサーバーレスでオートスケールで低コストな構成をつくります。

(A) コンテンツを制作するしくみ：Cloud9 (統合開発環境サービス) 上の Gatsby (静的サイトジェネレーター)
(B) コンテンツを管理する仕組み：CodeCommit (git リポジトリサービス)
(C) 作ったコンテンツを配信する仕組み：Amplify (ホスティングサービス)

- - - -

(A),(B)は制作中だけ動けば良く、配信は(C)だけで完結しているところがポイントです。
(C)はAmplifyの静的ホスティング機能(実態はCloudFront + S3 ＋ ACM = サーバーレス＆オートスケール＆高耐久性)だけあれば動き続けてくれます。
これでサーバーの稼働状況を心配することなく枕を高くして眠れます。
- - - -

(A)は30分間無操作で自動停止するマネージドインスタンスですし、Webブラウザさえあればいつでもどこでも制作・ビルドができて幸せです。
(B)でgitを使ってコンテンツを構成管理するので、RDBMSを持たなくてもバージョン管理でき、リポジトリのブランチを使ってステージング環境をデプロイしたり、複数の制作メンバーで共同作業をすることも容易です。
- - - -
# 利用するサービスとフレームワーク

- - - -
## AWS Amplify ?

AWS AmplifyはモバイルアプリケーションやWebアプリケーションをAWSのいろいろなバックエンドサービスを組み合わせていい感じにCD(継続的デプロイ)回してビルドアンドデプロイするための環境です(ざっくり)。
様々な機能がありますが、今回はその中のhosting機能だけを使ってます。
gitと連携してCD(継続的デプロイ)環境を構築・運用できます。
- - - -

## Cloud9 ?

AWSが提供するCDE(統合開発環境)のマネージドサービスです。
Webブラウザさえあればどこでもファイルの編集やモジュールのビルド・プリビューなどができます。
Webブラウザを閉じても状態は保存されますし、放置すればCloud9環境は自動的にインスタンスを停止しコストを抑えます。Cloud9の実態はEC2インスタンス(Amazon LinuxまたはUbuntu)なので、今回はCloud9にWeb制作環境一式を構築し、「ローカルにはWebブラウザだけあればよい」運用を目指します。

- - - -

## Gatsby ? SSG ? JAMStack ?

今回は「テンプレートにそって、ウェブサイトのコンテンツをテーマに沿ってレンダリングした静的サイトを出力する一種のコンパイル環境」として使ってます（ざっくり）。話が長くなりますし、使いこなしているわけでもないので詳細は割愛します。SSGはStatic Site Generator(静的サイトジェネレーター)の略です。Gatsbyは最近流行りのSSGです。サーバーレスな運用を実現したかったので完全静的なサイトを作ろうと思いました。完全静的といっても後日バックエンドサービスを追加してビルドしたWebアプリケーションとサーバーサイドのAPIサービスと連携できる将来性があります。それはそれとして今回は「カッコいいモダンかつシンプルなWebサイトを堅牢安価に運用したい」に話を絞ります。

- - - -

# 前提条件

* AWSアカウントがあり、基本的なAWS操作ができること
* AWS アカウントにアクセス可能なインターネット環境とクライアントPC
* Chromeブラウザ

- - - -

# AWS CodeCommitに新しいリポジトリを作る

CodeCommitにコンテンツ用のリポジトリを作ります。

* AWSの管理コンソールからCodeCommitを開く。
* `リポジトリを作成`を押して適当な名前(例えば`mysite`)リポジトリを作る。
* `接続のステップ`の`HTTS(GRC)`タブにある「ステップ 3: リポジトリのクローンを作成する」のコマンドをメモします。

```bash
$ git clone codecommit::ap-northeast-1://mysite
```

![スクリーンショット 2020-06-06 22.44.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/7f4111df-2791-78cf-9b04-33d9578a3151.png)

- - - -

# Amazon Cloud9の環境を作る

コンテンツ制作環境として用いる [Amazon Cloud9](https://aws.amazon.com/jp/cloud9/)をつくります。

* AWSの管理コンソールからCodeCommitを開く。
* `Create environment`を選択する。
  * 	Name: (Cloud9のホスト名。今回は`cde1`)
  * 	Environment type: `Create a new instance for environment (EC2)`
  * 	Instance type: `t2.micro (1 GiB RAM + 1 vCPU)`
  * 	Platform: `Ubuntu Server 18.04 LTS`
  * 	Cost-saving setting: `After 30 minutes (default)`

- - - - 


数分待つと自動的にWebブラウザーにCDE環境が表示されます。Cloud9の操作方法は公式ドキュメントをご覧ください。



![スクリーンショット 2020-06-06 23.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/94ecaa32-1955-8150-d46c-ab84bd5fc805.png)


- - - -
作ったらモジュールを更新します。Cloud9の右下のターミナルペインで操作してください。

```bash
$ sudo apt update -y && sudo apt upgrade -y
```

- - - - 

好みで便利コマンドをインストールします。
`c9`は`c9 ファイル名`でCloud9のWebUIエディタを起動するコマンドです。

```bash
$ sudo apt install tree -y
$ npm install -g c9
```

- - - - 

# Cloud9 にCodeCommit連携設定を行う

Cloud9上のユーザーにCodeCommitを利用するための設定を行います。詳しくは公式ドキュメント
https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up-ide-c9.html
を参照してください。

- - - - 

gitのユーザー情報を登録する

```bash
$ git config --global user.name "my-name"
$ git config --global user.email my-name@mail-address.local
```

認証情報ヘルパーを登録する。

```bash
$ git config --global credential.helper '!aws codecommit credential-helper $@'
$ git config --global credential.UseHttpPath true
```

- - - - 

# GatbyをCloud9上に構築する


Cloud9にGatsby環境を作ります。今回つくるサイト名は`mysite`とします。

参考  https://www.mitsue.co.jp/knowledge/blog/frontend/202001/23_1319.html

Gatsby-CLIをインストールする。

```bash
$ npm i -g gatsby-cli
```
- - - - 

## Starterをつかってサイトの雛形を作る

Gatsby はサイトの見栄えや構造の雛形を「スターター」というモジュールで環境構築時に選択します(テーマという仕組みもありますが、今回はスターターのみを使います)。
スターターは
[Gatsby Starter Library](https://www.gatsbyjs.org/starters/?v=2) にギャラリーがあるので、サイトに適したスターターを選びます。

<img width="1432" alt="スクリーンショット 2020-06-07 10.03.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/af3ccede-5689-0a89-5b69-161944ed7b04.png">

- - - -

今回は以下のスターター`gatsby-v2-tutorial-starter`を用います。
https://www.gatsbyjs.org/starters/justinformentin/gatsby-v2-tutorial-starter/

<img width="1174" alt="スクリーンショット 2020-06-07 10.34.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/01ca89b7-ef5e-4e95-0cd2-04344286cf46.png">

- - - -

スターターの説明の下の方にインストール方法が書いてあるのでそれを用います。

<img width="1114" alt="スクリーンショット 2020-06-07 10.36.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/351f589f-2568-a3b8-f6f1-83d43ffcca67.png">

> Install this starter locally:
> gatsby new gatsby-v2-tutorial-starter https://github.com/justinformentin/gatsby-v2-tutorial-starterCopy

- - - - 

## Gatsby で新しいサイト環境をつくる

いよいよ、StarterからWeb環境をつくります。Cloud9で実施します。

```bash
$ cd ~/environment
$ gatsby new mysite https://github.com/justinformentin/gatsby-v2-tutorial-starter
$ cd mysite
$ gatsby develop
```
- - - -

この時点で、Cloud9内にプリビュー用のhttpdがたちあがっているので、Cloud9の`Preview`メニューの`Preview Running Application`を選択すると、Webサイトのプレビューを見ることができます。

<img width="718" alt="スクリーンショット 2020-06-07 11.12.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/6657d6cf-cbbf-f94d-e43f-5232fbd505b9.png">

- - - -

<img width="1436" alt="スクリーンショット 2020-06-07 11.14.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/d4bf5a63-4c20-7b04-8bcd-ee5d90c5f67d.png">

- - - - 

## Gatsby の設定

コンテンツは(Gatshbyのrootdir)/src/に入っており、`gatsyby develop`が動作している状態でコンテンツファイルを変更すると自動でビルドが走りプレビューが更新されます。

<img width="200" alt="スクリーンショット 2020-06-07 11.24.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/be7a64d7-e4ef-2e8c-2a5c-3cdcdc1a2767.png">


- - - - 

(rootdir)/src配下のファイルを確認する。

```bash
$ cd ~/environment/mysite
$ tree -L 2 src
src
├── components
├── layouts
├── pages
│   ├── 404.jsx
│   ├── about.jsx
│   ├── blog.jsx
│   ├── index.jsx
│   └── tags.jsx
├── styles
└── templates
```

- - - - 

動作確認のため、`pages/index.jsx`を編集してみます。
`gatsby develop`を実行し、プリビューを表示させたまま、以下の手順を行います。

```bash
$ c9 ~/environment/mysite/src/pages/index.jsx                    
```

- - - -

28行目あたりのタイトルを修正する。

```JavaScript:index.jsx(修正前)
      <Header title="Home Page">Gatsby Tutorial Starter</Header>
```

```JavaScript:index.jsx(修正後)
      <Header title="私のサイト">サーバーレスでWebサイト運用</Header>
```

- - - -

修正したら、Cloud9 の`File`メニューの`Save`を選択してファイルを上書き保存する。
上書き保存すると、自動的にプリビューが修正後の内容に更新されていることを確認します。

Gatsbyは一種のWebアプリケーションフレームワークなのでAPIを活用してCMSとの連携やバックエンドサービスとの連携、画像やリンクの加工などを行えますがここでは触れません。

<img width="1440" alt="スクリーンショット 2020-06-07 11.33.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/6fbcc740-0573-72aa-3d56-18251f0bebcc.png">

- - - - 

# コンテンツをCodeCommitのgitリポジトリへ登録する

作成したgatsbyのサイトコンテンツをローカルリポジトリとしてcodeCommitのリモートリポジトリへ登録します。

参考：https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/how-to-connect.html#how-to-connect-local


```bash
$ cd ~/environment/mysite
$ git add .
$ git commit -m "1st commit"
$ git remote add origin codecommit::ap-northeast-1://mysite
$ git remote -v
$ git push --set-upstream origin master
```
- - - - 


# Cloud9 にamplify-cliを設定する (amplify configure)

Cloud9にamplify-cliをインストールし、Amplifyの環境設定とAmplifyが利用するIAM Userの作成を行います。

```bash
$ npm install -g @aws-amplify/cli
```
- - - - 

amplifyを設定する。
設問に答えていく。

```bash
$ amplify configure
```
- - - -
Specify the AWS Region
? region:  `ap-northeast-1`
Specify the username of the new IAM user:
? user name:  `(amplifyに利用させるIAM user名(ここではamplify-mysite)`

表示されるリンクへWebアクセスして管理コンソールからIAMユーザーを作る。

```
Complete the user creation using the AWS console
(IAM設定画面のURL)
```
- - - - 

IAM設定画面になるので、デフォルトで進め(`次のステップ`x2,`ユーザーの作成`)、作られた認証情報(アクセスキー、シークレットアクセスキー)を`.csvのダウンロード`を押してダウンロードする（重要）。
終わったらamplify-cliの設定画面に戻り`Enter`を押して対話設定を続ける。
作成したIAMユーザーの認証情報を入力する。
- - - -

IAM user name : `my-user`
access key :    `(my-userのアクセスキー)`
secret access key : `(my-userのシークレットアクセスキー)`
This would update/create the AWS Profile in your local machine
? Profile Name:  `default`

Successfully set up the new user.

- - - - 


# Gatsbyの構成とAmplifyプロジェクトを連携させる(amplify init)

gitローカルリポジトリ上にAmplifyのプロジェクトを連携させAmplifyにソースディレクトリ、公開ディレクトリ、ビルドコマンドを設定します。

`amplify init`コマンドでamplifyプロジェクトを作成し、cloud9上のディレクトリ、Gatsbyのビルド方式を設定する。

```bash
$ cd ~/environment/mysite
$ amplify init
```
- - - - 


対話設定に答え、設定する。

? Enter a name for the project `mysite`
? Enter a name for the environment `prod`
? Choose your default editor: `None`
? Choose the type of app that you're building `javascript`
? What javascript framework are you using `react`
? Source Directory Path:  `src`
? Distribution Directory Path: `public`
? Build Command:  `gatsby build`
? Start Command: `npm run-script start`
? Do you want to use an AWS profile? `Yes`
? Please choose the profile you want to use `default`

- - - - 


設定が終わったら、`prod`環境が作られたことを確認する。

```bash
$ amplify status
```
- - - - 


## Amplifyにホスティング環境を作りCodeCommitを連携させる(amplify add hosting)

Amplifyの`prod`環境にホスティング環境を追加し、gitの`master`ブランチを紐付けます。

```bash
$ amplify add hosting
```
- - - - 


対話設定に答え、設定する。

? Select the plugin module to execute `Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)`
? Choose a type `Continuous deployment (Git-based deployments)`
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository 

- - - - 


ここで、Webブラウザーで管理コンソールを開き、Amplify の管理画面を開きます。

<img width="462" alt="スクリーンショット 2020-06-07 22.00.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/a08a0e97-d508-041c-e1d6-e20bcce4094f.png">
- - - -

`すべてのアプリ mysite`画面で、`CodeCommit`を選択し管理コンソールのAmplify Consoleを開き、CLIで作ったプロジェクトを開く。

<img width="1357" alt="スクリーンショット 2020-06-07 22.00.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/8cb7e8fa-823a-fda7-a2d1-64c9893fc58f.png">
- - - -

`Amplify コンソール＞Connect a frontend web app`を選択し以下の対話設定を行う。

Connect a frontend web app: `AWS CodeCommit`を選び、`Connect Branch`を選択する。

<img width="1359" alt="スクリーンショット 2020-06-07 22.02.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/f9d7c509-3562-818e-69d9-496fd433cda9.png">
- - - -

リポジトリ: `mysite`
ブランチ:  `master`
ビルド設定: yamlファイルが自動的に生成されるので確認する。**[重要]**この中の`build:`コマンドが`gatsby build`ではない場合、設定後のビルドで失敗するので、後の手順で修正する必要がある(`編集`ボタンを押せる場合は今編集する)。
- - - -

<img width="1347" alt="スクリーンショット 2020-06-07 22.02.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/532d24e6-b330-427a-ef0e-91cdc81b4f32.png">

- - - - 


Backend deployments: `Deploy updates to backend resources with your frontend on every code commit`にチェックする。
Select a backend environment: プルダウンで`product`を選択する。

`Select an existing service role or create a new one so Amplify Console may access your resources.`で、プルダウンの下にある`Create new role`を選ぶ。
IAMの画面に遷移するので、すべてデフォルトの設定で`次のステップを選択`を押していき、`確認`を選択して、IAM-Roleが作られたらAmplifyの画面に戻り、リロードボタンを押し、プルダウンに作ったIAM-Roleがあらわれるのでそれを選択する。
ビルド設定の構成>Service role: プルダウンからAmplify用のRoleを選ぶ
確認: `保存してデプロイ`
- - - - 

画面が変わり、ビルドを環境が構築されます。しばらくかかります。
ビルド画面の４つの工程(プロビジョン-ビルド-デプロイ-検証)の全てがグリーンになったら成功です。

<img width="1149" alt="スクリーンショット 2020-06-07 22.43.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/e30a44f5-7d93-d72a-e139-649b0943bd6f.png">

ビルド結果の「検証」タブを開くと、さまざまなスマートフォンやタブレットでの見栄えのプリビューを確認することができます。

<img width="1363" alt="スクリーンショット 2020-06-07 23.27.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/508499d5-3481-1147-1de7-973e03adf339.png">

- - - - 

### ビルドに失敗した場合

ビルドに失敗した場合、ビルドの設定をAmplifyがうまく取得できていない場合があります。
管理コンソールのAmplify > `mysite` > `ビルドの設定`を開き、`build:`コマンドが`gatsby build`ではない場合、`編集`ボタンを選択して手で編集します。

<img width="1401" alt="スクリーンショット 2020-06-07 22.11.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/6b16eff8-315f-dfa5-1d5d-9798287c9dbe.png">


- - - -

```yaml:(修正前)
  phases:
    build:
      commands:
        - npm install
        - npm build
```

```yaml:(修正後)
    phases:
        preBuild:
            commands: ['npm install']
        build:
            commands: ['gatsby build']
```

- - - -
編集したら、Amplify > `mysite` を選択し、`このバージョンを再デプロイ`を選択してビルドしなおしてください。
- - - - 


### ビルドに成功した場合

成功したら、ターミナルに戻り、`Enter`キーを押すと、`amplify status`コマンドの結果が出力され、`master`環境のデプロイ先URL(Domain)が表示されます。

```bash
Current Environment: product

| Category | Resource name  | Operation | Provider plugin |
| - - - -- - - - | - - - -- - - -- - - --- | - - - -- - - -- | - - - -- - - -- - - ---- |
| Hosting  | amplifyhosting | No Change |                 |
Amplify hosting urls: 
┌──────────────┬──────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                       │
├──────────────┼──────────────────────────────────────────────┤
│ master       │ https://master.xxxxxxxxx.amplifyapp.com             │
└──────────────┴──────────────────────────────────────────────┘
```

- - - - 
WebブラウザでWebサイトが公開されたことを確認してください。
<img width="1323" alt="スクリーンショット 2020-06-07 19.45.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/af4ccc81-7c64-013f-f736-dfd1d086375b.png">

- - - - 


# Cloud9で変更したソースを再デプロイする

Amplify はCodeCommitのリポジトリに連携しているので、cloud9からcode commit へ`git push`することで自動的に公開データがリビルドされます。
- - - - 


# ステージング環境を作る

Webサイトを公開後、サイトを変更する際、公開前に関係者が確認するためのステージング環境が欲しくなります。プリビューからぶっつけ本番デプロイは怖いですから。Amplifyではgitのブランチ毎にホスティング環境を構築することができるので、gitの`master`ブランチが紐づいた`prod`環境に加えて、`stg`ブランチに紐づいた`stg`環境を構築します。
- - - - 


Cloud9のターミナルでgitのstgブランチをローカル,リモート双方へ作る。

```bash
$ git push
$ git branch stg
$ git push -u origin stg
$ git branch -a
$ git checkout stg
```

- - - - 

管理コンソールのAmplify > `mysite`を開き、`全般`>`ブランチを接続する`を選択。
`リモートブランチの追加`で以下を設定して`次へ`。

<img width="1416" alt="スクリーンショット 2020-06-07 23.07.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/d2fa0857-6734-1100-578c-e4779356dc38.png">

- - - - 

ブランチ: `stg`
Backend environment: `stg`
If you don't provide a value in this field, your branch name will be used by default.: `stg`


- - - - 

<img width="843" alt="スクリーンショット 2020-06-07 23.09.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/1e574919-ea45-5b61-d7b4-ccf349723e12.png">


- - - - 

`保存してデプロイ`を選択すると、stg用ホスティング環境がビルドされる。
ブランチ毎に独立したURLが割り当てられる。

<img width="846" alt="スクリーンショット 2020-06-07 23.09.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/c6156d4f-9f20-3b40-c457-4549b72642d3.png">


- - - - 


以後はCloud9で、gitのブランチを切り替えて、制作を行います。git pushしたリモートリポジトリに連動してそれぞれのホスティング環境が再構築されます。

master環境とstg環境の切り替えとpush

```bash
$ git checkout master
$ git branch -a
$ git checkout stg
$ git branch -a
```

- - - - 


# ステージング環境にBASIC認証を設定する

ステージング環境は公開前の関係者確認用なので簡単なアクセス制限を設けます。Amplifyのホスティング環境にはBASIC認証によるシンプルなアクセス制限を設定できるので、それを使います。

<img width="838" alt="スクリーンショット 2020-06-07 23.53.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/dc696c73-625c-b3f1-5cce-be15f4b31e3d.png">
- - - -

すべてのアプリ>mysite>アプリの設定: アクセスコントロール
で、stgの設定を以下へ変更する。
ブランチ名: `stg`
Access Setting: `制限 - パスワードが必須です`
User Name: `(任意の文字列)`
Password: `(７文字以上の任意の文字列)`

<img width="532" alt="スクリーンショット 2020-06-07 23.55.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/af52b408-e97c-b37e-d268-28b17d22e311.png">


- - - - 

# ステージング環境の変更を確認する

マスターとステージに差異を作ってみます。

```jsx:src/pages/index.jsx(修正前)
      <Header title="私のサイト">サーバーレスでWebサイト運用</Header>
```

```jsx:src/pages/index.jsx(修正後)
      <Header title="私のサイト">サーバーレスでWebサイト運用(STG)</Header>
```

- - - -
保存後、リモートリポジトリへpushします。

```bash
ubuntu:~/environment/mysite (stg) $ git add .
ubuntu:~/environment/mysite (stg) $ git commit -m "index.jsx"
ubuntu:~/environment/mysite (stg) $ git push
```
- - - - 

自動的にAmplify でstg環境のリビルドが走り、変更箇所が変わって公開されていることを確認できます。
あとはgitの世界ですので如何様にでも運用しましょう。

<img width="1438" alt="スクリーンショット 2020-06-08 0.33.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638875/363862ab-8c72-07e6-7332-4de939ff4346.png">

- - - - 


# Amplify consoleにカスタムドメインを設定する

Amplifyが提供するWebサイトのURLは`https://master.a95m0krigkdsk3.amplifyapp.com/` のような形式でかっこいいものではありませんし、環境をつくりなおせばURLが変わってしまいます。Amplifyにはカスタムドメイン機能があり、指定したドメイン名のSSL証明書を発行できます。運用するドメインをRoute53で管理することもできますが、今回は別のドメインレジストラで管理しているドメインを使ってAmplify consoleにカスタムドメインを設定します。

Amplify管理画面でドメイン管理を選択する。
カスタムドメインの設定を選び、登録したいドメインを設定する。
（３０分くらいかかる）
- - - - 


## 外部DNSを使っている場合の処理

Route53以外のドメインレジストラを利用している場合、通常のCNAME設定とは別にACMのバリデーションのためにACMが作るCNAME設定をDNSに登録します。

```
cname （カスタムドメイン名). master.(amplifyID).amplifyapp.com.
cname _(バリデーション用サブドメイン).(カスタムドメイン).  _(バリデーション検証のためのサブドメイン).acm-validations.aws.
```

これで、カスタムドメインへhttpsアクセスするとamplifyが公開しているホスティングが応答するようになります。
- - - - 


# 補足
- - - - 


## Amplifyのホスティング環境を削除する

Amplify環境内のホスティング環境を作り直したいときの削除手順です。削除後は`amplify add hosting`から再構築します。

```bash
$ amplify status
$ amplify hosting remove 
$ amplify status
```
- - - - 


## Amplify環境を削除する

Amplify環境全体を作り直したいときの削除手順です。Cloud9に紐づいているAmplify環境が1つのときと2つの時で手順が変わります。削除後は`amplify init`から再構築します。

Cloud9に紐づいているAmplify環境のリストを表示する

```bash
$ amplify env list
```

1つのときの環境削除手順

```bash
$ amplify delete
```
- - - -
- 
複数環境aとbという環境が紐づいている場合に、環境aのみを削除する手順

```bash
$ amplify env checkout b
$ amplify env remove a
```
- - - - 


## 分散開発

Cloud9はIAM Userに紐づいてますので、多人数でWebサイトを分散開発する場合は開発者毎にCloud9を立てて`gatsby develop`とgitコマンドを活用しながら容易に分散開発が可能です。CodeCommitの代わりにGitHubを使っても良いですね。
- - - - 


## 応答速度

そもそもPWAに対応してるので、一度読み込むとオフラインで動作するためネイティブアプリのように超高速です。キャッシュを消して初回アクセスしたときも完全に静的でCDNも効いてるのでかなり早いです。リッチなコンテンツの割に500msくらいでほぼ描画が終わります。しかし、残念ながら爆速ベンチマークの「[阿部寛のホームページ](http://abehiroshi.la.coocan.jp/)」にはかないませんでした。
- - - - 


## スケーラビリティ

基本的にAmplify hostingのCDN(CloudFrontでしょうね)が100%キャッシュするので相当なアクセスに耐えるはず。従量課金なのでそれに応じてコストは上がります。

- - - - 

## 可用性

SPOFがないので強いです。強固なAWS バックボーンにささえられてるのでDDoSも困難でしょう。Amplify内のオリジンサーバーもS3なので耐久性があります。Cloud9に永続データはないのでいざ壊れたら再構築してCodeCommitからPullします。

- - - - 

# まとめ

「カッコいいデザインのモダンかつシンプルなWebサイトを堅牢安価に運用したい」をAWSのサーバーレスサービスをつなぎ合わせて構築しました。管理すべきサーバーやRDBがないのはよいですね。これで枕を高くして眠れます。レスポンシブ、PWAといったモダンな機能にも対応しました。ランニングコストも抑えられました。
ここを起点に記事更新用にheadlessCMSをGatsbyと連携させたり、AWS のAPI GWやCognitoと連携させたりと発展性もある構成になりました。

- - - - 

(おわり)