InfraAcademy Blog

【AWS】S3でNuxt.jsの静的サイトを公開する方法解説

公開日: 2021-01-25 | #aws #vue.js #nuxt.js #s3

無料でインフラ学習を始める

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、S3でNuxt.jsの静的サイトを公開する方法を解説します。AWSでS3を使用すれば、コストを抑えることが可能です。また、簡単にサイトを公開することも可能です。今回はその方法を詳しく解説します。

【AWS】S3でNuxt.jsの静的サイトを公開する方法解説¶

S3で静的サイトを公開するためにはどうすればいいの？

今回の記事では、S3でNuxt.jsの静的サイトを公開する方法解説を詳しく解説します。

S3では静的サイトのホスティングが可能です。S3を使用すると安価で素早く公開することが可能です。

ちなみに、SPAの場合公開が可能です。サーバーでレンダリングが必要なSSRの場合はnodeが必要なのでEC2やECSなどでデプロイしましょう！

では、早速解説します！

S3のバケットを作成する¶

まずは、AWSのコンソールにログインしS3の作成をします。

S3と検索して、サービスを選択します。

AWSのコンソールでS3の検索

画面右の「バケットを作成」をクリックします。

S3のバケットを作成次に、S3作成時の設定を行います。バケットとリージョンは適当に設定してください。今回は「nuxttest-xxxxxx」と設定しました。

S3の詳細を設定次にブロックパブリックアクセスのバケット設定を行います。「パブリックアクセスを全てブロック」のチェックを外しましょう。

バケットのセキュリティ設定そして、承認部分のチェックを押します。

その他の設定はデフォルトのままで良いです。「バケットの作成」をクリックしましょう。

S3その他の設定

「バケットが正常に作成されました」というメッセージが表示されたら完成です！

S3作成完了次に、S3の中のファイルを公開する設定を行います。

S3の中のファイルを公開する設定¶

では、S3の中のファイルを公開する設定を行います。作成したS3をクリックしましょう。

作成したS3の上部に設定のタブがあります。その「プロパティ」を選択します。

S3のプロパティ画面の下に「静的ウェブサイトホスティング」があるので、こちらの「編集」をクリックします。下記のように設定します。

静的ウェブサイトホスティング・・・有効にする
ホスティングタイプ・・・静的サイトをホストする
インデックスドキュメント・・・index.html
エラードキュメント・・・error.html

S3静的サイトのホスティングこれで、静的サイトを公開する設定ができました。しかし、S3への読み取り権限がないため、まだサイトを見ることができません。次にS3への権限を設定しましょう。

S3のアクセス許可の設定¶

S3の「アクセス許可」へ移動します。プロパティの右横のタブです。

まず、作成時にも設定しましたが、ブロックパブリックアクセス (バケット設定)の設定がオフになっていることを確認してください。こちらがオフになっていないと次のバケットポリシーで設定ができません。

バケットポリシー

ここからが本題です。全てのユーザーがS3内のファイルを読み取れるようにします。「バケットポリシー」の「編集する」をクリックします。

バケットポリシーの編集ポリシーはJSON形式です。下記のように設定します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "[バケットARN]/*"
        }
    ]
}

“Resource”: “[バケットARN]/*”の部分は自分のS3のARNを入力します。ポリシーの設定画面に書かれているので、それを貼り付けます。

Jsonファイルを貼り付けると以下のようになります。設定の保存を押して完了です。