AWS Amplifyの公開設定を色々とためしてみた

:::note info
AWS AmplifyはGen1 → Gen2へと進化しました。
最新の記事は、「[AWS Amplify Gen2の公開設定](https://zenn.dev/mierune/articles/try-111-aws-amplify)」で公開しています。
:::

![img](https://day-journal.com/memo/images/logo/aws/amplify.png)

### AWS Amplifyの公開設定を色々とためしてみました :tada:  

<br>

AWS Amplifyには主に3パターンの公開方法があります。

1. AWSコンソールから利用するAmplify Consoleで公開
2. Amplify CLIから利用するAmplify Consoleで公開
3. Amplify CLIから利用するカスタム公開

<br>

詳細として下記について説明します。

- [Amplify Consoleで公開](https://qiita.com/dayjournal/items/c6e4ca20887a093560a0#amplify-console%E3%81%A7%E5%85%AC%E9%96%8B)
- [Amplify ConsoleでBasic認証公開](https://qiita.com/dayjournal/items/c6e4ca20887a093560a0#amplify-console%E3%81%A7basic%E8%AA%8D%E8%A8%BC%E5%85%AC%E9%96%8B)
- [Amplify Consoleでルーティング対応](https://qiita.com/dayjournal/items/c6e4ca20887a093560a0#amplify-console%E3%81%A7%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E5%AF%BE%E5%BF%9C)
- [Amplify Consoleで公開(Amplify CLI)](https://qiita.com/dayjournal/items/c6e4ca20887a093560a0#amplify-console%E3%81%A7%E5%85%AC%E9%96%8Bamplify-cli)
- [カスタム公開(Amplify CLI)](https://qiita.com/dayjournal/items/c6e4ca20887a093560a0#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E5%85%AC%E9%96%8Bamplify-cli)
- [公開削除(Amplify CLI)](https://qiita.com/dayjournal/items/c6e4ca20887a093560a0#%E5%85%AC%E9%96%8B%E8%A8%AD%E5%AE%9A%E5%89%8A%E9%99%A4amplify-cli)

<br>

## Amplify Consoleで公開

Amplify Consoleで公開する方法です。

AWSコンソール → AWS Amplifyをクリック。
![img](https://day-journal.com/memo/images/aws-amplify-007_01.png)

Amplify Hostingの「使用を開始する」をクリック。
![img](https://day-journal.com/memo/images/aws-amplify-007_02.png)

今回はシンプルにするため「Gitプロバイダーなしでデプロイ」をクリック。
![img](https://day-journal.com/memo/images/aws-amplify-007_03.png)

アプリケーション名と環境名を任意で設定。公開したいファイル一式をドラッグ&ドロップ → 「保存してデプロイ」をクリック。今回はサンプルとして、Vue.jsで構築したアプリケーションを手動でビルドしたものを利用。
![img](https://day-journal.com/memo/images/aws-amplify-007_05.png)

アップロードするファイルは下記コマンドでZip化。Mac標準のGUIによる圧縮だとデプロイしても表示できません。

```shell
zip -r xxxxx.zip *
```

![img](https://day-journal.com/memo/images//aws-amplify-007_04.png)

アップロードが終わるとURLが発行されるのでアクセスします。
![img](https://day-journal.com/memo/images/aws-amplify-007_06.png)

アップロードしたWebSiteが表示されます。
![img](https://day-journal.com/memo/images/aws-amplify-007_07.png)

コンソール上には表示されませんが、内部的にはAmazon S3とAmazon CloudFrontを利用してデプロイをしているようです。  

<br>

## Amplify ConsoleでBasic認証公開

Amplify ConsoleでBasic認証公開する方法です。  

事前準備として、Amplify ConsoleでWebSite表示。

アクセスコントロール → 「アクセスの管理」をクリック。
![img](https://day-journal.com/memo/images/aws-amplify-008_01.png)

アクセス設定を制限に設定。ユーザーとパスワードを設定 → 「Save」をクリック。
![img](https://day-journal.com/memo/images/aws-amplify-008_02.png)

設定を確認。
![img](https://day-journal.com/memo/images/aws-amplify-008_03.png)

URLにアクセスするとユーザーとパスワードの入力画面が表示されます。
![img](https://day-journal.com/memo/images/aws-amplify-008_04.png)

設定したユーザーとパスワードを入力するとWebSiteが表示されます。

<br>

## Amplify Consoleでルーティング対応

Amplify Consoleでルーティング対応する方法です。  

事前準備として、Amplify ConsoleでWebSite表示。

書き換えて、リダイレクト → 「編集」をクリック。
![img](https://day-journal.com/memo/images//aws-amplify-009_01.png)

送信元アドレス・ターゲットアドレス・入力を設定 → 「編集」をクリック。
設定値は「[AWS Amplify User Guide](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html)」を参考に入力。

Original address

```text
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
```

Destination Address

```text
/index.html
```

Redirect Type

```text
200
```

![img](https://day-journal.com/memo/images/aws-amplify-009_02.png)

設定を確認。
![img](https://day-journal.com/memo/images/aws-amplify-009_03.png)

これでルーティングのページも表示されます。
![img](https://day-journal.com/memo/images/aws-amplify-009_04.png)

<br>

## Amplify Consoleで公開(Amplify CLI)

Amplify CLIによるAmplify Consoleで公開する方法です。このホスティング環境は、「[Amplify Consoleで公開](https://qiita.com/dayjournal/items/c6e4ca20887a093560a0#amplify-console%E3%81%A7%E5%85%AC%E9%96%8B)」と同じ環境になります。

事前準備として、AWS Amplifyの環境構築。
[AWS Amplify #002 - 環境構築 [Vue.jsバージョン]](https://day-journal.com/memo/aws-amplify-002)

実行環境

- node v16.10.0
- npm v7.24.0

ホスティング環境を設定します。実行時に「Hosting with Amplify Console」を選択します。

```shell
amplify add hosting
```

![img](https://day-journal.com/memo/images/aws-amplify-010_01.png)

設定確認をします。

```shell
amplify status
```

![img](https://day-journal.com/memo/images/aws-amplify-010_02.png)


アプリケーションを自動でビルドしクラウドにデプロイします。

```shell
amplify publish
```

![img](https://day-journal.com/memo/images/aws-amplify-010_03.png)


デプロイが終わるとAWSコンソールでURLが発行されるのでアクセスします。
![img](https://day-journal.com/memo/images/aws-amplify-010_04.png)

デプロイしたWebSiteが表示されます。

<br>

## カスタム公開(Amplify CLI)

Amplify CLIによるカスタム公開する方法です。  

事前準備として、AWS Amplifyの環境構築。
[AWS Amplify #002 - 環境構築 [Vue.jsバージョン]](https://day-journal.com/memo/aws-amplify-002)

実行環境

- node v16.10.0
- npm v7.24.0

ホスティング環境を設定します。実行時に「Amazon CloudFront and S3」を選択します。

```shell
amplify add hosting
```

![img](https://day-journal.com/memo/images/aws-amplify-012_01.png)
![img](https://day-journal.com/memo/images/aws-amplify-012_02.png)

設定確認をします。

```shell
amplify status
```

![img](https://day-journal.com/memo/images/aws-amplify-012_03.png)

アプリケーションを自動でビルドしクラウドにデプロイします。

```shell
amplify publish
```

![img](https://day-journal.com/memo/images/aws-amplify-012_04.png)

AWS Amplify Consoleにはデプロイされていないのを確認します。
![img](https://day-journal.com/memo/images/aws-amplify-012_05.png)

Amazon S3に自動でデプロイされているのを確認します。
![img](https://day-journal.com/memo/images/aws-amplify-012_06.png)

Amazon CloudFrontに自動でデプロイされているのを確認します。作成されたURLにアクセスします。
![img](https://day-journal.com/memo/images/aws-amplify-012_07.png)

デプロイしたURLにアクセスしても、リージョンによってはすぐには表示できません。「[Amplify Docs - Hosting](https://docs.amplify.aws/cli/hosting/hosting/#amazon-s3-and-amazon-cloudfront)」によると24時間後までには表示されるらしいです。すぐに表示したいかたは下記設定で表示可能です。  
![img](https://day-journal.com/memo/images/aws-amplify-012_08.png)

オリジン → 対象のオリジン選択 → 「編集」をクリック。
![img](https://day-journal.com/memo/images/aws-amplify-012_09.png)

同一のオリジンドメインを再選択(ドメインにリージョンが追加される) → 「変更を保存」をクリック。
![img](https://day-journal.com/memo/images/aws-amplify-012_10.png)

デプロイしたWebSiteが表示されます。

カスタム公開で、IP制限やBasic認証を設定したい場合は下記記事を参考に追加で設定。または、プロジェクト内のAWS CloudFormationの設定ファイルを編集。  

https://qiita.com/dayjournal/items/7989da7374050c5d09b1

https://qiita.com/dayjournal/items/47ec90a12447dc458cca

<br>

## 公開設定削除(Amplify CLI)

Amplify CLIによる公開設定を削除する方法です。カスタム公開の場合は、Amazon CloudFrontは自動で削除されますが、Amazon S3のバケットは削除されないようなので別途削除する必要があります。  

ホスティング環境の削除を設定します。

```shell
amplify remove hosting
```

![img](https://day-journal.com/memo/images/aws-amplify-011_01.png)

設定確認をします。

```shell
amplify status
```

![img](https://day-journal.com/memo/images/aws-amplify-011_02.png)

ホスティング環境の削除をします。

```shell
amplify push
```

![img](https://day-journal.com/memo/images/aws-amplify-011_03.png)

AWSコンソールでホスティング環境が自動で削除されているのを確認。
![img](https://day-journal.com/memo/images/aws-amplify-011_04.png)

<br>

AWS Amplifyを利用することで、Amplify Consoleでの公開やカスタム公開やBasic認証が可能です :bulb: 

次回は、AWS Amplifyの独自ドメインホスティング環境の構築方法も紹介できたらと思います。

<br>

AWS Amplifyについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://day-journal.com/memo/tags/AWS-Amplify" target="_blank">tags - AWS Amplify</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

https://qiita.com/dayjournal/items/47ec90a12447dc458cca

https://qiita.com/dayjournal/items/7989da7374050c5d09b1

https://qiita.com/dayjournal/items/c827a17917127bff3906

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>