[Vue.js×AWS] Vue.js製SPAをAmplifyConsoleを使って、サーバレスなアプリケーションとしてデプロイする 

# はじめに

以前、[[Vue.js×AWS] Vue.js製SPAをAWSにサーバレスなアプリケーションとしてデプロイする](https://qiita.com/is_ryo/items/633cdc8bb89acd5be0ee)という記事を書いたのですが、このときのアーキテクチャをほぼ勝手に構築してくれる **Amplify Console** というサービスがあるので紹介していこうと思います。

## Amplify Consoleとは

```
AWS Amplify Console では、フルスタックのサーバーレスウェブアプリケーションをデプロイおよびホストするための、Git ベースのワークフローを提供します。
フルスタックのサーバーレスアプリケーションは、GraphQL や REST API などのクラウドリソース、ファイルおよびデータストレージで構成されたバックエンドと、
React、Angular、Vue、Gatsby などの単一ページのアプリケーションフレームワークで構築されたフロントエンドから構成されます。 

(中略)

Amplify Console では、フルスタックのサーバーレスアプリケーションをデプロイするためのシンプルなワークフローが提供されているため、
アプリケーションのリリースサイクルを短縮できます。アプリケーションのコードリポジトリを Amplify Console に接続するだけで、
フロントエンドとバックエンドへの変更が、コードコミットのたびに単一のワークフローにデプロイされます。
```

(出典：https://aws.amazon.com/jp/amplify/console/)

要するにリポジトリにソースコードをpushしたら、テストやビルドをして、デプロイしてアプリケーションを更新するよ！っていう、すごいやつです。(雑)

## どれだけ楽になるのか

どこぞの神「ここにこんなアーキテクチャのアプリケーションがあるじゃろ？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/1953095b-d033-316b-f914-603c077d59d7.png)

どこぞの神「**なんとAmplifyConsoleが全部やってくれるんじゃ！！！**」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/3070e101-f50a-4d29-e0fb-092ceefe4506.png)

## 設定どうするの？

### 1. リポジトリを選択する

<img width="573" alt="スクリーンショット 2019-06-06 15.31.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/3f03884d-feba-afd1-eddb-1ae7d4eab741.png">

### 2. ブランチを選択する

<img width="573" alt="スクリーンショット 2019-06-06 15.32.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/b76c8106-47cc-db51-ada3-afad9a16344f.png">

### 3. ビルドの設定をする

<img width="573" alt="スクリーンショット 2019-06-06 15.35.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/c22e4c66-7093-b093-5a39-40d445cb1042.png">

### 4. デプロイ実行！！！

<img width="573" alt="スクリーンショット 2019-06-06 15.36.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/1a69ddd6-62c0-6fa9-3e0c-31ecbeac01f8.png">

無事デプロイが完了したら `https://hoge.abcdefg123456.amplifyapp.com` のようなURLでアプリが公開されます！
たったこれだけでWebアプリを公開できるなんて、簡単ですね！！かなり嬉しいですね！！！
本編はここまでです。このあとは少し小ネタを挟んでおきます。

## 小ネタ

### カスタムドメインで公開したい

なんか `https://hoge.abcdefg123456.amplifyapp.com` って自動生成されたURLじゃ見栄えが悪いから、カスタムドメインで公開したいですよね？

#### 1. 「ドメイン管理」から「ドメインの追加」を選択

<img width="1280" alt="スクリーンショット 2019-06-06 15.40.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/6086a349-b9fe-580b-6d18-ec72b20148bf.png">

#### 2. あとは好きなサブドメインを追加する

<img width="843" alt="スクリーンショット 2019-06-06 15.42.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/7d736aa9-e3e6-4c44-2467-57e3d78a6082.png">

このときに注意が必要なのが、ルートドメイン横の「Exclude root」ボタンを押さないと、ルートドメインのValueが書き換わってしまうので注意。
ここで作られたサブドメインにはCloudFrontのURLがCNAMEのValueに設定されています。

### SPAでリロードしたときにURLががが…

CloudFrontでSPAを公開するときもあったんですが、擬似的にpathを切って画面(Component)を切り替えるため、`hogehoge.com/fuga` のようなルート以外のURL以外の画面でリロードをすると、S3が403を返してきます。
AmplifyConsoleではリダイレクトの設定をすることができるので、そこで対応します。

「書き換えてリダイレクト」から「編集」をクリックして、一番上の順番に
送信元アドレス： `</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>` 
ターゲットアドレス： `/`
入力： `200(Rewrite)`
を入力/選択します。これでリロードしても問題なく動きます。
まだ、なんでこれを書いたらうまくいくのかは追いきれてません…
ココらへんを参考にしました。
* https://github.com/aws-amplify/amplify-js/issues/2498
* https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html

<img width="1644" alt="スクリーンショット 2019-06-06 15.50.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95875/be6fa27b-d46c-5449-3fc0-e150c980b8b5.png">

## さいごに

AmplifyConsoleがリリースされたばかりのときに少し触れてみましたが、そのときはルートドメインしかホスティングできなかったし、東京リージョンに来てなかったし、ちょっとイケてないなーって思っていたんですが、改めて触ってみるとすごく使いやすい感じになっていたので、テンション上がってこの記事を書きましたwww
みなさんもAmplifyConsoleでWebアプリをデプロイ、ホスティングしてみてください！！！
ではまた！！！