［AWS］S 3静的WebホスティングVueを使用する.jsプロジェクトの導入

今回はVuejsを使用して作成したプロジェクトにNginxなどの静的ファイルを提供するサーバを作成するのではなく、AWS 3に低価格でアップロードしてサービスを簡素化する方法を知りたいです.

S 3への配備のメリット

通常、nginxまたはapacheをデプロイの1つの方法として使用し、静的ファイルをアップロードしてデプロイすると、サーバを作成することは難しくなります.
でも最近みたいにVuejsやreactのようなSPAプロジェクトでは、JavaScriptを実行するだけで済むため、S 3のようなストレージに格納し、サーバを作成することなくクライアントアプリケーションにサービスを提供できる!
また、S 3では、フロントエンドリソースサービスのためのサーバを作成または実行するよりも、より良好に実行することができる.

S 3パケットの作成

まず、構築が完了したと仮定します.

まず、サービスプロジェクトのためにドメイン名のパケットを作成する必要があります.
bucket名をサービスするドメインに設定し、必要な設定を行った後、「Next」をクリックしてbucketを生成します.

パケットを作成したら、Properties->Static WebサイトのホストでUse this bucket to host a websiteをクリックします.
次に、Index document/Error documentを適切に設定します.(まずここでindex.htmlに設定します.)
では上端にEndpointがありますので、これをメモしてください.

その後、PermissionでBucket Policyにアクセスし、bucketリソースにアクセスするように設定します.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::DOMAIN.COM/*"
        }
    ]
}

Saveで保存します.

アップロード

次に、上記で構築したリソースをアップロードします.

CNAME設定

最後に先ほど記したEndpointを自分のドメイン名に接続するためにCNAMEを設定します.

上の図はCloudplareの例で、それぞれのドメイン名設定にCNAMEに自分の希望するドメイン名を加え、Targetに注釈の良いEndpointを加えています.
ちょっと待ってから接続できます!