0%
July 8, 2023

Deployment of React Project Using S3 and Cloudfront

aws

react

S3

  1. Created a new bucket named wbbucket-dev-frontend.

  2. In frontend project we run

    aws s3 sync --delete ./build/ s3://wbbucket-dev-frontend

    to sync our files in build folder to s3-bucket.

  3. In Permission tab:

    Here

    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Sid": "Statement1",
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::wb-admin-frontend/*"
        }
      ]
    }
  4. In Properties tab, we scroll to the bottom, click Edit,

    then choose

CloudFront

  1. Pricing:

  2. Click Create distribution:

  3. S3-buckets by default are among the choices for Origin domain:

  4. Once S3-bucket is chosen, aws fills the following:

  5. Check Redirect HTTP to HTTPS

  6. Enable firewall, note that this we charge for AWF service, if you are certain your react page has almost no backend behind the scene, we can choose not to enable security protections.

    • Prepare a domain or subdomain in route53

    • Fill in alternate domain name and

    • Choose SSL certificate.

      For example, I test the s3-deployment by using:

  7. Turn IPv6 Off

Route53 to CloudFront

  1. Once CloudFront was set up, we have the following "alias"

    we will need the high-lighted id in configuring records in route53.

    Our website is already up and running:

  2. Go to route53, choose hosted zone, and edit our prepared record.

    choose the domain prepared by CloudFront.

Cache Removal

  1. After first deployment succeeds, we will fail to see new changes due to caching. The removal of cache is called invalidation in aws-cli.

  2. We list all distributions by aws cloudfront list-distributions > ./list.json, we check the target id to remove cache:

    {
        "DistributionList": {
            "Items": [
                {...
                },
                {...
                },
                {
                    "Id": "EQ7AXNACL2PQ6",
                    "ARN": "arn:aws:cloudfront::798404461798:distribution/EQ7AXNACL2PQ6",
                    "Status": "Deployed",
                    "LastModifiedTime": "2023-07-06T06:29:17.206000+00:00",
                    "DomainName": "d1i8cgdq44oar0.cloudfront.net",
                    "Aliases": {
                        "Quantity": 1,
                        "Items": [
                            "wb-admin-s3-test.wonderbricks.com"
                        ]
                    },
                    "Origins": {
                        "Quantity": 1,
                        "Items": [
                        ...
                }

    By looking at the attribute we are sure EQ7AXNACL2PQ6 is our target id.

  3. aws cloudfront create-invalidation --distribution-id EQ7AXNACL2PQ6 --paths "/*"
  4. In frontend the complete deployment script becomes:

     "scripts": {
        "build:uat": "env-cmd -f .env.uat  react-app-rewired build",
        "invalidation:uat": "aws cloudfront create-invalidation --distribution-id EQ7AXNACL2PQ6 --paths \"/*\" > ./invalidation.json",
        "deploy:uat": "yarn build:uat && yarn invalidation:uat && aws s3 sync --delete ./build/ s3://wbbucket-dev-frontend",
        ...
      },

    In invalidation:uat will pipe the output into a file to avoid the console prompting user input.