Deploy to an Amazon S3 Bucket

The React PWA Reference Storefront is pre-configured to deploy on Amazon Web Service S3 (AWS S3).

Prerequisites

Before you deploy on AWS S3, you need the following tools and accounts:

• An AWS account to deploy the website on the AWS S3 bucket. Ensure that you can use the AWS S3 bucket for hosting your storefront.

• An AWS Identity and Access Management (IAM) profile.

• The AWS CLI tool.

  For more information about platform specific procedures, see the Amazon documentation.

• Your AWS credentials are set up on CLI.

  Open a new terminal, and type aws configure.

React PWA Reference Storefront on Amazon S3 Bucket Example

1. Create an Amazon S3 bucket.

   1. Log in to the AWS account.

   2. Follow the guidelines for using the available access policy options and generate a policy with the following settings:

      • Effect: Allow
      • Principal: *
      • Service: Amazon S3
      • Actions: GetObject

   3. Ensure that your bucket policy sets the bucket and all objects in the bucket to public.

   For the ARN (Amazon Resource Names), use the name of your bucket with /* at the end to provide everyone access to all files.

2. Set up the bucket as static hosting.

   1. In the bucket’s console, navigate to Properties > Static Website Hosting.

   2. Select Use this bucket to host a website.

   3. Fill the form and click Save.

3. Update the CORS (Cross-Origin Resource Sharing) configuration.

   1. Copy the following XML:

   <?xml version="1.0" encoding="UTF-8"?>
   <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
   <CORSRule>
       <AllowedOrigin>*</AllowedOrigin>
       <AllowedMethod>HEAD</AllowedMethod>
       <AllowedMethod>GET</AllowedMethod>
       <AllowedMethod>PUT</AllowedMethod>
       <AllowedMethod>POST</AllowedMethod>
       <AllowedMethod>DELETE</AllowedMethod>
       <ExposeHeader>ETag</ExposeHeader>
       <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
       <AllowedHeader>*</AllowedHeader>
   </CORSRule>
   </CORSConfiguration>
   

   1. Navigate to Permissions > CORS configuration.

   2. Paste the XML snippet, and modify the settings as required.

   With this configuration, the storefront can perform cross-origin requests to any origin.

   1. Click Save:

Deploy your application

1. Update the bucket name in the deploy command in package.json:

   "deploy": "aws s3 sync build/ s3://bucket-name"

2. Run the yarn run build command.

3. Run the yarn run deploy command.

4. Configure the Amazon CloudFront following the instructions at Getting Started with CloudFront.

After completing the set up, you can access your website at the domain name.