Amazon CloudFrontの公開設定を色々とためしてみた

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

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

<br>

事前準備

- 事前にAmazon S3に公開したいファイル一式をアップロード  
- 設定は非公開のままでOK

![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_07.png)
![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_08.png)

<br>

## Amazon S3と組み合わせた公開

Amazon CloudFrontとAmazon S3を組み合わせて公開する方法です。  

AWSコンソール → CloudFrontをクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_01.png)

「CloudFrontディストリビューションを作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_02.png)

対象のS3のドメインを指定。S3のバケットアクセスを指定しポリシーは自動更新に設定。httpsにリダイレクトする設定。ルートオブジェクトにS3のindex.htmlを設定。その他は今回はデフォルトのまま設定。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_03.png)

作成後、S3のバケットを確認するとポリシーが自動で設定されているのを確認。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_04.png)

作成されたCloudFrontのS3用のディストリビューションのURLにアクセスしてみる。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_05.png)

CloudFront経由でS3にアクセスしWebSiteが表示される。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-001_06.png)

<br>

## 指定IPのみ公開

Amazon CloudFrontで指定IPのみ公開する方法です。  

事前準備として、CloudFront経由でS3でのWebSite表示。

関数 → 「関数を作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-003_01.png)

関数名と説明を設定 → 「関数を作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-003_02.png)

CloudFront FunctionsでIP制限をする関数を設定します。

```javascript
function handler(event) {
    var request = event.request;
    var clientIP = event.viewer.ip;
    // 許可したいIP指定
    var allowIP  = '許可したいIP';

    if (clientIP === allowIP) {
        return request;
    } else {
        var response = {
            statusCode: 403,
            statusDescription: 'Forbidden',
        }
        return response;
    }
}
```

![画像](https://day-journal.com/memo/images/amazon-cloudfront-003_03.png)

発行 → 「関数を発行」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-003_04.png)

関数作成後関連付けのメニューが表示されるので「関連付けを追加」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-003_05.png)

対象のディストリビューション・イベントタイプ・キャッシュビヘイビアを設定 → 「関連付けを追加」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-003_06.png)

関連付けされたかを確認。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-003_07.png)

設定したIPからURLにアクセスするとWebSiteが表示されます。指定IP以外はWebSiteが表示されません。

<br>

## Basic認証公開

Amazon CloudFrontでBasic認証で公開する方法です。  

↓ 参考にさせて頂きました。

https://qiita.com/yoshuuua/items/c575a2b077f8004a0747

事前準備として、CloudFront経由でS3でのWebSite表示。

関数 → 「関数を作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-004_01.png)

関数名と説明を設定 → 「関数を作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-004_02.png)

CloudFront FunctionsでBasic認証をする関数を設定します。

```javascript
function handler(event) {
    var request = event.request;
    var headers = request.headers;
    // ユーザーとパスワード設定
    var user = 'ユーザーを設定';
    var pass = 'パスワードを設定';
    var authValue = 'Basic ' + (user + ':' + pass).toString('base64');
    
    if (typeof headers.authorization === 'undefined' || headers.authorization.value !== authValue) {
        var response = {
            statusCode: 401,
            statusDescription: 'Unauthorized',
            headers: {'www-authenticate': {value:'Basic'}}
        };
        return response;
     } else {
        return request;
     }
}
```

![画像](https://day-journal.com/memo/images/amazon-cloudfront-004_03.png)

発行 → 「関数を発行」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-004_04.png)

関数作成後関連付けのメニューが表示されるので「関連付けを追加」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-004_05.png)

対象のディストリビューション・イベントタイプ・キャッシュビヘイビアを設定 → 「関連付けを追加」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-004_06.png)

関連付けされたかを確認。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-004_07.png)

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

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

<br>

## Vue.jsルーティング対応 (おまけ)

Amazon CloudFrontでVue.jsのルーティング対応する方法です。  

Vue.jsで構築したアプケーションを、デプロイした時にルーティングページがうまく表示されなくてはまったときの解決方法です。

↓ 参考にさせて頂きました。

https://stackoverflow.com/questions/43095823/vue-js-router-history-mode-and-aws-s3-routingrules

事前準備として、CloudFront経由でS3でのWebSite表示。

エラーページ → 「カスタムエラーレスポンスを作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-002_01.png)

エラーコード403とその他キャプチャの内容で設定 → 「カスタムエラーレスポンスを作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-002_02.png)

エラーコード404とその他キャプチャの内容で設定 → 「カスタムエラーレスポンスを作成」をクリック。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-002_03.png)

設定を確認。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-002_04.png)

これでルーティングのページも表示されます。
![画像](https://day-journal.com/memo/images/amazon-cloudfront-002_05.png)

<br>

Amazon CloudFrontを利用することで、Amazon S3と組み合わせた公開や、CloudFront Functionsと連携したIP制限やBasic認証が可能です :bulb: 

次回は、AWS WAFと組み合わせた方法も紹介できたらと思います。

<br>

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

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

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

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

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

<br>
<br>

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