Deploy Front-end

In this step, we will create an S3 bucket with Static website hosting enabled and publicly accessible using AWS SAM.

Edit SAM Template

1. Open the template.yaml file in the fcaj-book-shop folder that we created in Part 1.

   

2. Delete the unnecessary parts (highlighted in the image above), including:

   • Resources: HelloWorldFunction and its related Events.
   • Outputs: The entire Outputs section.

3. Add the Parameters section after Globals to define the bucket name:

   Parameters:
     FCAJBookShopBucketName:
       Type: String
       Default: fcaj-book-shop-by-myself
   

   

4. Add the Resources section to create the S3 Bucket and Bucket Policy:

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

The script above defines:

• FCAJBookShop: An S3 bucket with Static Website Hosting enabled and all Public Access Blocks disabled.
• FCAJBookShopPolicy: A Bucket Policy that allows everyone (Principal: "*") to read (s3:GetObject) all objects in the bucket.

Build and Deploy with SAM

5. Run the sam build command at the SAM project directory (fcaj-book-shop) to build the application:

   sam build
   

   

6. Validate the SAM template:

   sam validate
   

   

7. Deploy SAM in guided mode (step-by-step):

   sam deploy --guided
   

   Enter the following information when prompted:

   • Stack Name: fcaj-book-shop
   • AWS Region: ap-southeast-1 (or your preferred deployment region).
   • Parameter FCAJBookShopBucketName: Keep the default value or enter your desired bucket name.
   • Confirm changes before deploy: Y
   • Allow SAM CLI IAM role creation: Y
   • Disable rollback: N
   • Save arguments to configuration file: Y

   

8. While waiting for the deployment, you can open the CloudFormation console to monitor the stack creation progress.

   

9. Wait for the changeset creation to complete. When prompted Deploy this changeset?, enter y to confirm the deployment.

   

Verify Results on AWS Console

10. Open Amazon S3 console.

    • Search and confirm the bucket has been created successfully.
    • Click on the bucket to view its details.

    

11. At the bucket detail page:

    • Click on the Properties tab to view configuration information.

    

12. Scroll down to the Static website hosting section:

    • Confirm the status is Enabled.
    • Note the Bucket website endpoint — this is the URL to access the website after uploading the front-end.

    

13. Click on the Permissions tab:

    • Verify the Bucket policy has been automatically added by CloudFormation.
    • The policy allows s3:GetObject with Principal: "*", meaning everyone can read the files in the bucket.

    

14. Open the CloudFormation console to check the stacks:

    • The fcaj-book-shop stack has the status CREATE_COMPLETE.

    

15. Click on the fcaj-book-shop stack, switch to the Resources tab:

    • View the resources created by CloudFormation: FCAJBookShop (S3 Bucket) and FCAJBookShopPolicy (Bucket Policy).

    

16. Click on the aws-sam-cli-managed-default stack to view the resources automatically created by SAM CLI:

    • SamCliSourceBucket: Bucket used to store deployment artifacts.
    • SamCliSourceBucketBucketPolicy: Policy for that bucket.

    

Upload Front-end to S3

17. Download the fcj-serverless-frontend source code to your device:

    git clone https://github.com/tranvix0910/FCAJ_Workshop-Serverless.git
    cd FCAJ_Workshop-Serverless
    

18. Install dependencies. Since some packages in the project may be outdated, use the --force flag:

    npm install --force
    

    

    

19. Build the front-end application:

    npm run build
    

    The build may show some warnings — these can be safely ignored.

    

20. After the build completes, a build folder will be created. Upload it to the S3 bucket:

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

    

Verify the Deployment

21. Open the Amazon S3 console, navigate to your bucket and check the Objects tab to confirm all files have been uploaded successfully.

    

22. Go to the Properties tab, scroll down to Static website hosting and copy the Bucket website endpoint.

    

23. Open the endpoint URL in your browser. You should see the FCJ Book Store website loaded successfully.