Deploy front-end

In this step, we will create an S3 bucket with Static web hosting enabled and publicly accessible based on SAM.

  1. Open template.yaml file in fcj-book-shop folder that we created in part 1.

    • Delete unnecessary part. CreateS3Bucket
  2. Copy the following scripts into that file.

    Parameters:
      fcjBookShopBucketName:
        Type: String
        Default: fcj-book-shop-by-myself    
    

    CreateS3Bucket

    FcjBookShop:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: !Ref fcjBookShopBucketName
        WebsiteConfiguration:
          IndexDocument: index.html
        PublicAccessBlockConfiguration:
          BlockPublicAcls: false
          BlockPublicPolicy: false
          IgnorePublicAcls: false
          RestrictPublicBuckets: false
    
    FcjBookShopPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket: !Ref FcjBookShop
        PolicyDocument:
          Version: 2012-10-17
          Statement:
            - Action:
                - "s3:GetObject"
              Effect: Allow
              Principal: "*"
              Resource: !Join
                - ""
                - - "arn:aws:s3:::"
                  - !Ref FcjBookShop
                  - /*
    

    The above script defines an S3 bucket is fcj-book-shop with FcjBookShopPolicy policy - allow public access. CreateS3Bucket

  3. Run the below command.

    • To build at the directory of the SAM project: fcj-book-shop.

      sam build
      
    • To check the validation of the SAM template.

      sam validate
      

      CreateS3Bucket

    • To deploy SAM.

      sam deploy --guided
      
      • Enter stack name: fcj-book-shop
      • Enter the deployemnt region, such as: us-east-1- should be the same as the default region.
      • Then enter other information as shown below. CreateS3Bucket
      • Wait a while to create the CloudFormation stack changeset.
      • Enter “y” when Deploy this changeset?. CreateS3Bucket
  4. Open Amazon S3 console.

    • Check if the bucket has been created or not, click fcj-book-shop-by-myself bucket. CreateS3Bucket
  5. At fcj-book-shop-by-myself page.

    • Click Properties tab. CreateS3Bucket
    • Then scroll down, check state of Static website hosting.
    • Record the endpoint of the website. CreateS3Bucket
    • Click Permissions tab.
    • Check the policy has been added. CreateS3Bucket
  6. Open CloudFormation console. Two stacks have been created.

    • Click fcj-book-shop stack. CreateS3Bucket
  7. At fcj-book-shop page.

    • Click Resource tab, see the resources that CloudFormation has initialized. CreateS3Bucket
    • Click to other stack and see other resources. CreateS3Bucket
  8. Download fcj-serverless-frontend code to your device

    • Open a terminal on your computer at the directory where you want to save the source code.

    • Copy and run the below command.

      git clone https://github.com/AWS-First-Cloud-Journey/FCJ-Serverless-Workshop.git
      cd FCJ-Serverless-Workshop
      yarn
      yarn build
      
  9. We have finished building the front-end. Next, execute the following command to upload the build folder to S3.

    aws s3 cp build s3://fcj-book-shop-by-myself --recursive
    

    Result after uploading: CreateS3Bucket