CloudFront・S3・API GatewayでマルチオリジンなSPAサイトを作ってみる
はじめに
AWSでサーバーレスアーキテクチャのSPAサイトを組むにあたって、フロントエンドをS3(+CloudFront)から配信し、バックエンドをAPI Gatewayに置くのは一般的な構成だと思います。フロントエンドのサイトとバックエンドのAPIで二つのドメインで運用することもできますが、前段にCloudFrontを置いて一つのドメインから両オリジンにアクセスができる構成を作ってみます。 構成図にするとこんな感じ。
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/1.png)
S3
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/2-890x1024.png)
API Gateway
REST APIを作成。![](https://www.blog.danishi.net/wp-content/uploads/2021/12/3-1024x389.png)
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/4-1024x599.png)
得られたエンドポイントからAPIを呼んでみます。
$ curl https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/api/hello
{
"message" : "hello"
}
CloudFront
まずはS3オリジンのディストリビューションを作成します。![](https://www.blog.danishi.net/wp-content/uploads/2021/12/image.png)
その他の項目は必要に応じて変更します。
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/5DB2ECAB-E045-4E79-BEA6-90E21F38D16E.tmp_.png)
ディストリビューションの作成したら次にAPIのオリジンを追加します。
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/image-1-1024x178.png)
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/5DB2ECAB-E045-4E79-BEA6-90E21F38D16E.tmp_-1.png)
API Gatewayへはhttps接続のみが許可されます。
APIのオリジンが追加されたらビヘイビアを追加します。
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/image-2.png)
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/image-3.png)
API Gatewayのステージ名が「api」だったのでパスパターンを合わせています。
その他APIの要件に応じて許可するメソッドだったりヘッダーやクエリ文字列の送信設定をします。
注意事項として「Host」リクエストヘッダーは送信してはいけません。
これでディストリビューションのデプロイが完了すれば設定は完了です。
SPAページのデプロイ・動作確認
簡易的なVue.jsとAxiosを使ったページをS3にデプロイします。<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample SPA</title>
</head>
<body>
<div id="app">
<pre><code>{{ result }}</code></pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
result: ''
},
mounted: function(){
const api = axios.create({
baseURL: "https://[cloudfront_url]/api/", // CloudFrontに割り当てたドメイン
headers: {
'Content-Type': 'application/json'
},
responseType: 'json',
timeout: 3000
})
api.get("hello")
.then(response => {
this.result = response.data
})
.catch(err => {
console.error(err)
})
}
})
</script>
<style>
pre {
font-size: 15px;
color: #2F4F4F;
background-color: #F5F5F5;
}
</style>
</body>
</html>
![](https://www.blog.danishi.net/wp-content/uploads/2021/12/5DB2ECAB-E045-4E79-BEA6-90E21F38D16E.tmp_-2.png)
同一オリジンにすることでCORS周りの設定を考えなくてもAPIを呼び出せてるのが便利です。
ディスカッション
コメント一覧
まだ、コメントがありません