CFNとvue-cliでさくっとS3にSPAをホスティングするためのメモ

S3の準備

CFNでS3のバケットを作る

vue-s3.yaml

Resources:
  S3WebSiteSample:
    Type: "AWS::S3::Bucket"
    DependsOn: S3WebSiteSampleLog
    Properties: 
      BucketName: vue-website-sample
      LoggingConfiguration:
        DestinationBucketName:
          Ref: S3WebSiteSampleLog
        LogFilePrefix: logs/
      WebsiteConfiguration:
        IndexDocument: index.html
        ErrorDocument: error.html

  S3WebSiteSampleLog:
    Type: "AWS::S3::Bucket"
    Properties: 
      AccessControl: LogDeliveryWrite
      BucketName: vue-website-sample-log

  S3WebSiteSampleBucketPolicy: 
    Type: "AWS::S3::BucketPolicy"
    Properties: 
      Bucket: 
        Ref: S3WebSiteSample
      PolicyDocument: 
        Statement: 
          - 
            Sid: "PublicReadForGetBucketObjects"
            Action: 
              - "s3:GetObject"
            Effect: "Allow"
            Resource: 
              Fn::Join: 
                - ""
                - 
                  - "arn:aws:s3:::"
                  - 
                    Ref: S3WebSiteSample
                  - "/*"
            Principal: "*"

create-stackしてバケットを作る

$ aws cloudformation create-stack --stack-name vue-s3-website --template-body file://./vue-s3.yaml

vue-cli

vue-cliでテンプレートプロジェクトを作成する。

$ npm install -g vue-cli 
$ vue init webpack my-project 
$ cd my-project/
$ npm run build 

S3へ配置

$ aws s3 sync dist/ s3://vue-website-sample/

確認

はいっ！