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 script into that file:

    FcjBookShop:
    Type: AWS::S3::Bucket
    Properties:
      AccessControl: PublicRead
      BucketName: fcj-book-shop
      WebsiteConfiguration:
        IndexDocument: index.html

  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? display CreateS3Bucket

  4. Open Amazon S3 console

    • Check if the bucket has been created or not.
    • Click fcj-book-shop bucket CreateS3Bucket

  5. Click Properties tab. Then scroll down, check state of Static website hosting

    • Record the endpoint of the website CreateS3Bucket

  6. Click Permissions tab

    • See the policy has been added CreateS3Bucket

  7. Open CloudFormation console. Two stacks have been created

    • Click fcj-book-shop stack CreateS3Bucket

  8. Click Resource tab, see the resources that CloudFormation has initialized CreateS3Bucket

    • Click to other stack: CreateS3Bucket

  9. 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 the below command 
      git clone https://github.com/AWS-First-Cloud-Journey/FCJ-Serverless-Workshop.git
cd FCJ-Serverless-Workshop
yarn build

  10. 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 --recursive

Result after uploading: CreateS3Bucket