Front End #

1. Setup Front End side

   This part is used for the setup on the Back End side. User will set the deployment variable for a step using a variable that is passed to a custom pipeline.

   

   Details:

• VITE_SERVICE_ENDPOINT: an api Backend link
• VITE_APP_AWS_ACCOUNT: Aws account number
• VITE_APP_AWS_RUM_KEY, VITE_APP_AWS_RUM_GUEST_ROLE_ARN, VITE_APP_AWS_RUM_IDENTITY_POOL_ID: key to set up Rum
• HOSTING_S3_BUCKET: this is store name on S3 AWS to store source Front end after deployed.
• HOSTING_DISTRIBUTION_ID: id in CloudFront to get domain link. After writing the variable we will create a store in S3 AWS

In the Permission tab, we need to add bucket policy

“Principal” means we can view AWS guidelines here: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

Next, we must create CloudFront first to assign the Bucket policy

To avoid the Access denied error user needs to proceed 2 steps following:

• Set the default root object to index.html for the CloudFront.

• Collect all status codes and configure them at the Error pages in CloudFront to return a custom error response to the viewer and manage how CloudFront responds when there’s an error