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