0

I have rest services deployed on aws. now I'd like to deploy a frontend. it's a reactjs app. build produces a folder with html and assets.

now i'd like to host this app on aws and let it talk to my rest services there. does aws offer some dedicated solution for that (static hosting under same domain to avoid cross-origin issues) or i have to build something custom? like putting files on s3 or bundling together with my rest services?

2
  • why don't you use create-react-app ? and deploy your front as a standalone nodejs with minimal express server ? find your happiness here github.com/facebook/create-react-app/blob/master/packages/… Commented Mar 13, 2018 at 11:01
  • I would recommend going for S3 and Cloudfront. Commented Mar 13, 2018 at 11:24

2 Answers 2

2

You can deploy and host your React app using S3 and CloudFront:

  1. Create an S3 bucket for your app (e.g., myapp.example.com). Don't assign any public read access permissions to your bucket, not yet.
  2. Copy the content of your React ./build directory to your S3 bucket.
  3. Create a CloudFront Web distribution with an S3 origin that points to your S3 bucket. Set the Alternate Domain Names (CNAMEs) to myapp.example.com.
  4. Under Origin Settings > Set Restrict Bucket Access to Yes and create a new Origin Access Identity. (Don't let CloudFront to grant read permissions on your bucket. You'll do it manually in the coming steps)
  5. Under Error Pages, add a new error response for 403 Forbidden, set the Customize Error Response to Yes, Response Page Path to /index.html and HTTP Response Code to 200 OK.
  6. Using your DNS provider, add a CNAME record for myapp.example.com that points to your CloudFront distribution's domain name (e.g., XXXXXXXXXXXXXX.cloudfront.net). NOTE: This can be done with an ALIAS A host record in Route 53.
  7. Add the following bucket policy to your app bucket in S3 (where XXXXXXXXXXXXX is your Origin Access Identity ID created in step 4 above. This value can be found under Security in CloudFront home page's left sidebar):

    {
        "Version": "2008-10-17",
        "Id": "Policy1415003215468",
        "Statement": [
            {
                "Sid": "Stmt1415003056675",
                "Effect": "Allow",
                "Principal": {
                    "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXX"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::myapp.example.com/*"
            }
        ]
    }
    

    This will deny access to your app using direct S3 URLs. It will allow access via CloudFront only.

  8. Set the Access-Control-Allow-Origin in your REST API configuration to http://myapp.example.com.

    ENABLE AND ENFORCE SSL

  9. In your CloudFront's Distribution Settings, select your custom SSL certificate.

  10. Under Behaviors, set the Viewer Protocol Policy for your default behavior to Redirect HTTP to HTTPS.
  11. Change the Access-Control-Allow-Origin in your REST API configuration to https://myapp.example.com.
Sign up to request clarification or add additional context in comments.

Comments

0

You can use AWS CloudFront and S3 to deploy react application. Currently, there is no direct way to setup CloudFront to handle React Routes (If the page is reloaded to serve the index page). For this, as a workaround, you can use error routes in CloudFront to handle this.

For more details on setting up the CloudFront distribution and S3 buckets, refer the article on Deploying Angular/React Apps in AWS. You can also use the CloudFormation Launch Stack button in the article to provision the entire setup.

To set up the full stack application including the Restful APIs, refer Full Stack Serverless Web Apps with AWS.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.