【AWS】ServerlessFrameworkでS3静的ホスティングを設定する

概要

serverlessFrameworkを用いて、S3の静的ホスティングを設定する方法を紹介します。

実装

1. pluginのインストール

ServerlessFrameworkにはファイルをS3にアップロードする機能が標準で備わっていないので、 以下のpluginをインストールします。

$ npm install --save serverless-s3-sync

serverless.yamlのpulginsに追加されていれば成功です。

plugins:
  - serverless-s3-sync

※pluginの詳細は以下を参照ください

Serverless Framework: Plugins

2. S3バケットの設定

serverless.yaml、resourcesにて以下を記述します。
customでS3へアップロードするローカルディレクトリを指定します。

resources:
  Resources:
    TestSite:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: test.com
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
          ErrorDocument: error.html

custom:
  s3Sync:
    - bucketName: sls-static-site.com
      localDir: /static

BucketNameが既に存在する場合、デプロイエラーとなるので注意

3. バケットポリシーの設定

resourcesにバケットポリシーを定義していきます。
Properties > Bucket > Ref にて上記で設定を行なったTestSiteリソースを指定します。

StaticSiteS3BucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket:
          Ref: TestSite
        PolicyDocument:
          Statement:
            - Sid: PublicReadGetObject
              Effect: Allow
              Principal: "*"
              Action:
              - s3:GetObject
              Resource:
                Fn::Join: ["", ["arn:aws:s3:::",{"Ref": "TestSite"},"/*"]]

4. デプロイ

最後にデプロイして完了となります。

sls deploy

AWSコンソールでバケットが作成されているか確認してみましょう。