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-store folder that we created in part 1.
  • Delete unnecessary part:

CreateS3Bucket

  1. Copy the following script into that file:
FcjBookStore:
    Type: AWS::S3::Bucket
    Properties:
      AccessControl: PublicRead
      BucketName: fcj-book-store
      WebsiteConfiguration:
        IndexDocument: index.html

  FcjBookStorePolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref FcjBookStore
      PolicyDocument:
        Version: 2012-10-17
        Statement:
          - Action: 
              - 's3:GetObject'
            Effect: Allow
            Principal: '*'
            Resource: !Join
              - ''
              - - 'arn:aws:s3:::'
                - !Ref FcjBookStore
                - /*

The above script defines an S3 bucket is fcj-book-store with FcjBookStorePolicy policy - allow public access

CreateBucket

  1. Run the below command to build at the directory of the SAM project: fcj-book-store
sam build

CreateBucket

  • Run the following command to check the validation of the SAM template
sam validate

CreateBucket

  • Run the following command to deploy SAM
sam deploy --guided
  • Enter stack name: fcj-book-store
  • Enter the deployemnt region, such as: ap-southeast-1- should be the same as the default region
  • Then enter other information as shown below

CreateBucket

  • Wait a while to create the CloudFormation stack changeset
  • Enter “y” when Deploy this changeset? display

CreateBucket

  1. Open Amazon S3 console

CheckBucket

  1. Check if the bucket has been created or not.
  • Click fcj-book-store bucket

CheckBucket

  1. Click Properties tab

CheckBucket

  1. Scroll down, check state of Static website hosting
  • Record the endpoint of the website CheckBucket
  1. Click Permissions tab
  • See the policy has been added

CheckBucket

  1. Open CloudFormation console

CheckCloudFormation

  1. Two stacks have been created
  • Click fcj-book-store stack

CheckCloudFormation

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

CheckCloudFormation

  • Click to other stack:

CheckCloudFormation

  1. 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
  1. 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-store --recursive

Result after uploading:

SettingBucket