皆さん、フロントエンドのホスティングはどのように行なっていますか？

HerokuなどのPaasにデプロイする、AWSでAmplifyを使うなど様々な手段があると思います。

今回はその中でもAWSのCloudforntとS3を使ってフロントエンドを静的ホスティングしてみようと思います。

ホスティングの手段について

ホスティングには、静的ホスティング と　動的ホスティング の二種類存在します。

ホスティングとは

サーバー等に保存したアプリケーションを世界に発信すること(つまり色々なデバイスで利用可能な状態にすること)をホスティングと言います。

webフロントエンドの話で言うと、ブラウザで表示されるサイトが表示される状態のことを指します。

静的ホスティングとは

どの時間で見ても表示されるサイトの表示が変わらないホスティング方法を静的ホスティングといいます。

アプリケーション開発をやったことがない人からすると静的と言う単語が聞き慣れないと思います。

静的は言葉からもわかる通り変わらないものを指します。

例えばwebサイトを表示するにはHTML、CSS、JavaScriptが挙げられますが、それらのコードに記載されている内容が変更されることがない状態を指します。

有名な静的ホスティングの例で言うとGithubPagesが挙げられます。

動的ホスティングとは

動的ホスティングとは、時間によって表示される内容が変わることを指します。

動的はその名前の通り変化するものであり、webサイトで言うとHTML等のデータが動的に変化し、サイトで表示される内容が一定でないホスティング方法です。

S3にファイルをアップロード

まず、S3にファイルをアップロードしてみようと思います。

S3とは

S3(Simple Storage Service)とは、あるデータをオブジェクトという単位で保存することが可能なAWSのオブジェクトストレージサービスです。

大量のデータや大きなデータの保存、静的コンテンツの配信、バックアップのデータ保存等に使うことができます。

まず、S3のページに移動してバケットを作成を選択します。

バケットとは

オブジェクトを入れるコンテナのことを言います。

この中に複数のオブジェクト(画像や動画)などを入れることができます。

バケットを作成する際のオプションは大体デフォルトの状態で設定しています。

バケット名は他のバケットと被らないように入力します。

ここにビルドしたアプリケーションをアップロードします。

今回はNext.jsのアプリケーションをpnpmで作成していたので、以下のコマンドでビルドしました。

pnpm build

すると、outディレクトリにビルドしたファイルが置かれるのでその中身をuploadします。

これで完了です。

Cloudfrontを使ってみる

cloudfrontのリソースを作成してみます。

Cloudfrontとは?

AWSのCDNサービスです。

静的コンテンツを高速かつ安全に配信することが出来るのが特徴です。

エッジロケーションと呼ばれるコンテンツをキャッシュしたエッジサーバーが集められている箇所が世界各地に配置されており、エッジロケーションまでの道を最適化することで配信の最適化を行っています。

https://aws.amazon.com/jp/builders-flash/202311/learn-cloudfront-with-trainer/

またデフォルトでHTTPSを使えるようになっているので安全に配信もできます

ディストリビューションの作成を選択します。

ディストリビューションとは

ドメイン毎に当てられるcloudfrontの設定単位のことを指します。

下のような画面が出てきます。

ここで注意なのはオリジンアクセスをOrigin access controll settings にしてください。
そしてCreate OACを選択して新しいOACを作成してください

OACとは

Origin Access Contorlとは、指定されたcloudfrontのディストリビューションのみからS3にアクセスできるようにするセキュリティの仕組みです。

以下はほとんど設定はデフォルトの状態から変更していないです。

WAFは無効にしています。

WAFとは

Web アプリケーションファイアウォールとは、AWSのセキュリティサービスの一つでファイアーウォールの役割をします。

SQLインジェクションやクロスサイトスクリプティング、DDosなどアプリケーションからそれらの脅威を防いでくれます。

作成すると下の画面になります。

その後にディストリビューション名にindex.htmlを追加して検索すると画面が表示されるのですが、現在はcloudfrontからs3にアクセスできないようになっています。
https://d2kwpy4k28mwol.cloudfront.net/index.html

アクセスできるようにするためにs3のバケットポリシーを変更します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": [s3のARN],
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": [cloudfrontのARN]
                }
            }
        }
    ]
}

s3のARNはバケットを検索するとコピーできるようになります。

それでhttps://d2kwpy4k28mwol.cloudfront.net/index.htmlを検索すると以下のようにサイトが表示されるようになります。

最後に

今回AWSでの静的ホスティングをcloudfrontとs3で行う方法を紹介しました。

cloudfrontとs3の構成を使うことで高速かつ安全に静的webサイトを配信することができます。

個人使用であれば、ある程度安価で運用できると思うのでぜひ参考にしてみてください。

AWS関連の記事