WEBサーバの代わりに AWS Amplify Console を利用できるか検証してみた

こんにちは。サーバーエンジニアの@momokenです。
今年はプライベートで大きな変化があり、あまり技術的な勉強ができてなかったですが、
このような機会があったので AWS re:Invent2018 で発表されたAWS Amplify Consoleを
触ってみようかと思います。

# AWS Amplify Console
簡単に言うと、webアプリを公開するための環境を開発者がサーバを意識することなく準備することができる。
フロントはCDNになっており、これで公開すれば堅牢性も勝手に手にい入るというスグレモノ。

[概要リンク](https://aws.amazon.com/jp/new/reinvent/?hp=r#Mobile)
[詳細リンク](https://aws.amazon.com/jp/about-aws/whats-new/2018/11/announcing-aws-amplify-console/)

## WEBサーバの代わりにならないか
このサービス、webアプリやらなんやらCI/CD環境やらっと言われている本サービスですが、
簡単なWEBサービスを提供するのにちょうど良さそうだったのと、
サーバレスの波にちゃんと乗っておこうと思い検証していきます。
なお、僕はハードウェア触るのが大好きです。

# 事前準備
## リポジトリを準備しておく。
Amplify Consoleで利用できるリポジトリは下記の種類です。

・Github (github.comのみ。Enterpriseは利用できない。)
・GitLab
・BitBucket
・AWS CodeCommit

今回は、CodeCommitを利用しようと思うので事前にリポジトリの作成とブランチを切っておく（本番とステージング用）
適当にindex.htmlでも作成してコミットもしておく。

### CodeCommitを利用する上での注意点
Amplify Consoleは2018/12現在、下記のリージョンでしか利用できない。

・米国東部 (バージニア北部)
・米国東部 (オハイオ)
・米国西部 (オレゴン)
・アジアパシフィック (シドニー)
・EU (アイルランド)

CodeCommitのリポジトリを、東京リージョンで作成してしまうとレポジトリが参照出来なくなってしまうので
リポジトリもAmplify Consoleを利用するリージョンに合わせて作成する。

# Amplify Consoleを始める
## 本番環境作成
マネジメントコンソールから、Amplify Consoleを探してクリックすると、下記のようなページが表示されるので
DeployをGET STARTEDする。
![hajime.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/faed4602-2a1d-2f8e-617a-6ffdd28cfc10.jpeg)
リポジトリを選択する画面になるので、CodeCommitを選択する。
![repo_select.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/bbaafa6b-05e3-cb2d-d6d2-91075092ba27.jpeg)
準備したリポジトリ（test-repo）を選択し、ビルドするブランチを選択する。
本番環境なのでmasterを選択した。
![repo-conf.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/237062c2-4859-0534-9114-2c7961693402.jpeg)
ビルドの設定について表示される。今回は環境を作成するのが目的なので特に変更しないで次へ
![build.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/f1a7c96f-54ec-8b59-9314-152dfb0bbed5.jpeg)
設定が完了するとビルドが始まる。ビルドが完了すると下記の用にすべてチェックが入ったようになる。
ドメインをクリックすると・・・
![build-finish.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/9c972708-dcc6-45ce-eb7e-225d522a32a0.jpeg)
テキストだけの素敵なページが現れました。
![master-view-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/99a0df0e-31c7-27bb-298a-49849cb85d08.jpeg)


## ステージング環境作成
ブランチの接続から
![nake-stg.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/5e3877cd-c1ac-6f1c-8904-7f4549d90ff0.jpeg)
stageブランチを接続
![stg.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/c1716993-d317-9c0b-34ae-d58603f9e0d1.jpeg)
あとは、本番環境作成時と同じです。
ビルドが終わるのを待ちます・・・
![noloading.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/58dd82c9-8730-ef87-680d-ad3b638fafee.jpeg)
ビルドが完了したら、同じように吐き出されたドメインにアクセスする。と、素敵なサイトが。
![STG.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/f7f27fc0-22ae-dd9f-95fa-4d15bce4de01.jpeg)

# 検証する

## BASIC認証の設定は可能。
ステージングは通常、パブリックには公開しないので何かしらの認証が必要です。
アクセスコントロールから、アクセス管理へ
![access1.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/ba57722d-1520-b736-6528-03101c54ea26.jpeg)
stargeを「制限・パスワードが必要です」に変更し、ユーザ・パスワードを設定し、save。
![access2.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/232a1397-ae7c-83d7-14b6-67aeb5b720bb.jpeg)
ステージング環境でBASIC認証が掛かりました。
![accesss3-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/e8f8bdce-84c2-4fc5-c387-09948a26ef1e.jpeg)

## 独自ドメインの利用は可能。
ドメイン管理からドメイン追加へ
![domain1.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/dc5761e0-9909-11b7-d286-b9da865521f4.jpeg)
使いたいドメインを入れ検索。存在していれば登録済みとでる。
![domain2.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/31ebc585-3764-19f8-bd15-5bf6bbad3ce0.jpeg)
これで保存をすると、該当ドメインに認証用のレコードを追加する旨、案内がでるので
レコード追加し認証されれば該当ドメインを利用することが可能となる。

### 独自ドメインでのhttpsは無料SSLが利用できそう。
```
独自のカスタムドメインを無料の HTTPS で使用して、アプリに安全で使いやすい URL を提供します。
```
っとあるので、自動的にSSL証明書も発行される模様。
実際にはできてない。ので改めて検証を行う。

## 末尾の/（スラッシュ）は補完されない。
例えば、

```
http://exsample.com/page1/
```
のようなURLを下記の用に、末尾の/（スラッシュ）を入れないと

```
http://exsample.com/page1
```
page1というファイルと認識されてしまいます。
Apacheだと、DirectorySlashという設定があり、これがONになっていれば、上記のようなURLに
/（スラッシュ）を補完するような動作となるが、Amplifyでは補完されなかった。


## リダイレクトの設定も可能。
書き換えて、リダイレクト という機能があるのでこれを利用する。
![redirect1.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/6f42ef7f-d0db-0bb6-fdca-d1e01eed24e3.jpeg)
非常に簡単に設定できる。
条件-オプションに何が使えるかまでは確認できてない。
デフォルトでは、存在しないパスに来たら/index.htmlに404で飛ばす設定が入っていた。
[Using Redirects](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html)

## pushしたら自動にデプロイが走る。
デフォルトでそうになっているらしい・・・。
試してみる。
適当に行数を増やしてコミット。
![comiit1.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/26eb7539-c882-1324-279e-145fcf5f01f3.jpeg)
ビルドが実行された！（キャプチャ取るの遅れてデプロイまで完了してしまっております・・・。）
![build1.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/32814ec1-5aab-815c-2f36-f204dcee3c2b.jpeg)

## モバイル端末での検証もしてくれる。
どの程度の精度なのかは不明ですが検証もやってくれている。
![kensyo.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/1ec2051e-1eb3-5cec-734d-df382b19a014.jpeg)
テキスト数行なんとも寂しい・・・。


## 本番環境への同期はmasterブランチへマージ
ステージング環境で確認が終わったら、stageブランチからmasterブランチへマージするだけ。
ファイル差分はgitの中で確認できるので問題ない。

## 前のバージョンに戻すのも容易。
なんだかんだでmasterブランチに上げたくないものを上げてしまった場合でも
簡単に前のバージョンに戻すことが可能。
戻したいビルド番号で「このバージョンを再デプロイ」を実行すれば良い。
![re-build.jpg](https://qiita-image-store.s3.amazonaws.com/0/57299/ee44005b-77d3-6048-de82-f53d2d309eb5.jpeg)

# 総括
殴り書きして来ましたが、簡単なwebサーバとして十分に利用できそうです。
検証して感じたこととして・・・

- メリット
 - 構築自体は非常に容易。
 - 意識せずともCDNで公開されている。
 - バージョン管理システムを利用することが前提なので、まともに運用すればバックアップがいらないし、いろいろと便利。


- デメリット
 - アクセスの制御方法が1つしか無い。IPアドレス等の制御ができない。
 - 複雑になればなるほどビルドの設定が難しくなりそう。

今後は他のサービス、特にDBなどとの連携が取れるかなどを考えて行きたいと思います。

以上です。

[:christmas_tree: FORK Advent Calendar 2018](/advent-calendar/2018/fork)
:arrow_left: 5日目 [AWS Toolkits for Visual Studio Code (プレビュー)を使ってみました](/Kodak_tmo/items/9d0a32e34bd927eaaea5) @Kodak_tmo
:arrow_right: 7日目 [転送量とかトラフィックを忘れないように](/shuhei4009/items/d567c165c92ea8a1e42f) @shuhei4009