ServerlessFrameworkでS3の静的サイトのホスティングをする

概要

S3に静的サイトのホスティング機能がある。静的ファイル（HTML, js, css等）をS3に配置すると、それらのファイルをウェブ公開してくれる機能だ。
ウェブホスティング用のS3バケットを作成したり、静的ファイルをS3にアップロードしたりするのをServerlessFramework経由で行う。

プロジェクトを作成

とりあえず以下のコマンドを実行してプロジェクトを作成する。プロジェクト名はs3-sync-testにした。

sls create --template aws-nodejs --path s3-sync-test

プラグイン導入

ファイルをS3にアップロードする機能はServerlessFramework標準には無いようなので以下のプラグインを利用する。

github.com

以下のコマンドでプラグインをインストールする。

sls plugin install -n serverless-s3-sync

serverless.ymlの末尾にpluginsの項目が追加されたはずだ。

plugins:
  - serverless-s3-sync

S3バケットの設定

resourcesの項目にS3バケット設定とS3バケットポリシーを記載する。

resources:
  Resources:
    StaticSite:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.webSiteName}
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
          ErrorDocument: error.html
    StaticSiteS3BucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket:
          Ref: StaticSite
        PolicyDocument:
          Statement:
            - Sid: PublicReadGetObject
              Effect: Allow
              Principal: "*"
              Action:
              - s3:GetObject
              Resource:
                Fn::Join: ["", ["arn:aws:s3:::",{"Ref": "StaticSite"},"/*"]]

customにウェブサイト名とS3にアップロードするファイルを配置しているディレクトリ名を記載する。

custom:
  webSiteName: s3-sync-test.com
  s3Sync:
    - bucketName: ${self:custom.webSiteName}
      localDir: static

HTML用意

<project>/static ディレクトリにindex.htmlとerror.htmlを配置した。

デプロイ

以下のコマンドでデプロイする。

sls deploy -v

動作確認

AWSのマネジメントコンソールからS3のページへ遷移して、上記で作成したバケットがあるか確認する。
バケット内を確認し、HTMLファイルがアップロードされているか確認する。

ブラウザから確認

プロパティからStatic website hostingを選択してエンドポイントを開く。

ブラウザから表示することができた。