📑

Nuxtで作ったブログをAWS S3で公開する

1 min read

はじめに

最近AWSの勉強を始めたので、実践として勉強した各機能を使ってみる記事を書いていきたいと思います。今回はS3で静的なウェブサイトを公開してみます。

手順

1. IAMユーザーでS3のバケットを作成
2. ビルドしたNuxtフォルダをアップロード
3. アクセス許可の設定
4. ホスティングの設定

S3とは?

AWSが提供するオブジェクトストレージサービス。
99.999...%の優れた耐久性と拡張性からログデータの保管やバックアップ、静的コンテンツの保管に用いられる。
あまり書き換えることがなく、消えたら困るデータを保存するのに向いている。

それでは実際に静的サイトのホスティングに使用してみます。

バケットの作成

AWSコンソールにIAMユーザーでログインします。
S3を選択後、「バケットを作成」をクリックします。
バケット名は任意のものになりますが、一意性がないと使用できません。
リージョンは東京で問題ありません。

ネット上の誰もが見れるようにアクセスブロックのチェックを外しておきます。

ここまでできたら作成をクリック。

フォルダのアップロード

Nuxtのビルドを行います。

$ yarn generate

ビルドが完了しますとdistというフォルダが作成されるので、それをオブジェクトのアップデートからドラッグ&ドロップします。

アクセス許可の設定

作成時にチェックを外しましたがもう一度アクセス許可がされていることを確認しておきます。

確認したら下にスクロールしてバケットポリシーを記述していきます。
バケットARNはポリシー設定画面に表示されています。

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

ホスティングの設定

プロパティ欄から一番下にある「静的ウェブサイトホスティングを編集」を選択。
静的ウェブサイトホスティング→有効
ホスティングタイプ→静的ウェブサイト と変更しておきます。

これでサイトにアクセス出来るようになりました!

Discussion

ログインするとコメントできます