AWS Cloudformation template for S3 Static Website bucket

deploy.yml

#.github/workflows/deploy.yaml
name: CD Stage
on:
  push:
    branches:
      - QA
      - '!master'
jobs:
  deploy:
    runs-on: ubuntu-20.04
    env:
      AWS_ACCESS_KEY_ID: '${{ secrets.AWS_ACCESS_KEY_ID }}'
      AWS_SECRET_ACCESS_KEY: '${{ secrets.AWS_SECRET_ACCESS_KEY }}'
    steps:
      - uses: actions/checkout@v2
      - name: Deploy QA
        uses: reggionick/s3-deploy@v3
        with:
          folder: .
          bucket: '${{ secrets.S3_BUCKET }}'
          bucket-region: '${{ secrets.S3_BUCKET_REGION }}'
          delete-removed: true
          no-cache: true
          private: true

main.yml

# main.yml
AWSTemplateFormatVersion: 2010-09-09

Parameters: # params passed to "--parameter-overrides" in CLI
    BucketName: # http://your_bucket_name.s3-website-your_region.amazonaws.com/
        Description: Unique name for your bucket. This will be in the S3 url to your static website.
        Type: String

Resources:
    # Create an S3 Bucket that serves a static website (i.e. React app)
    MyBucket:
        Type: AWS::S3::Bucket
        Properties:
            BucketName: !Ref BucketName
            AccessControl: PublicRead # important!!
            WebsiteConfiguration: # this makes the S3 Bucket a static website/app
                IndexDocument: index.html # default object served when visiting S3 domain
                ErrorDocument: index.html # just send to app, let React handle errors and routing
    # Add a Bucket Policy that lets public visitors access the web app
    MyBucketPolicy:
        Type: AWS::S3::BucketPolicy
        Properties:
            Bucket: !Ref MyBucket # attach to bucket being created
            PolicyDocument:
                Id: MyPolicy
                Version: 2012-10-17
                Statement: # lets the public access/view the contents of your Bucke t, i.e. web app
                    - Sid: PublicReadForGetBucketObjects
                      Effect: Allow
                      Principal: "*" # wildcard, allow all requests
                      Action: "s3:GetObject"
                      Resource: 
                        - !Join ["", [!GetAtt MyBucket.Arn, /*]]
    iamUser:
        Type: AWS::IAM::User
        Properties:
            Path: /
            Policies:
                - PolicyName: s3-upload-policy
                  PolicyDocument:
                      Version: "2012-10-17"
                      Statement:
                          - Effect: Allow
                            Action:
                                - "s3:PutObject"
                                - "s3:GetObject"
                                - "s3:ListBucket"
                                - "s3:DeleteObject"
                            Resource:
                                - !Join ["", [!GetAtt MyBucket.Arn, /*]]

Outputs:
    WebsiteURL:
        Value: !GetAtt MyBucket.WebsiteURL
        Description: URL for website hosted on S3

main_with_cors.yml

# main_with_cors.yml
# https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-s3-bucket.html#:~:text=Enable%20cross-origin%20resource%20sharing
# https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html
AWSTemplateFormatVersion: 2010-09-09
Resources:
  S3Bucket:
    Type: 'AWS::S3::Bucket'
    Properties:
      AccessControl: PublicRead
      # You must add this section to the previous cf template with the configuration you need
      CorsConfiguration:
        CorsRules:
          - AllowedHeaders:
              - '*'
            AllowedMethods:
              - GET
            AllowedOrigins:
              - '*'
            ExposedHeaders:
              - Date
            Id: myCORSRuleId1
            MaxAge: '3600'
          - AllowedHeaders:
              - x-amz-*
            AllowedMethods:
              - DELETE
            AllowedOrigins:
              - 'http://www.example.com'
              - 'http://www.example.net'
            ExposedHeaders:
              - Connection
              - Server
              - Date
            Id: myCORSRuleId2
            MaxAge: '1800'
Outputs:
  BucketName:
    Value: !Ref S3Bucket
    Description: Name of the sample Amazon S3 bucket with CORS enabled.

react_deploy.yml

#.github/workflows/react_deploy.yml
name: CD Stage
on:
  push: 
    branches:
      - QA
      - '!master'
jobs:
  deploy:
    runs-on: ubuntu-20.04
    env:
      AWS_ACCESS_KEY_ID: '${{ secrets.AWS_ACCESS_KEY_ID }}'
      AWS_SECRET_ACCESS_KEY: '${{ secrets.AWS_SECRET_ACCESS_KEY }}'
    steps:
      - uses: actions/checkout@v2
      - name: Set up nodejs 14 LTS
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Cache node_modules
        uses: actions/[email protected]
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-${{ env.cache-name }}-
            ${{ runner.os }}-node-
            ${{ runner.os }}-
      - name: ⛏ Building
        run: npm install && npm run build
      - name: Deploy QA
        uses: reggionick/s3-deploy@v3
        with:
          folder: build
          bucket: '${{ secrets.S3_BUCKET }}'
          bucket-region: '${{ secrets.S3_BUCKET_REGION }}'
          delete-removed: true
          no-cache: true
          private: true