Search code examples
reactjsamazon-web-servicesamazon-s3

How to deploy react project to AWS s3

I tried to deploy react project to s3, and I followed every step of this instruction. https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af

However, I cannot see my project on s3 server, and I always get these 2 errors.

Uncaught SyntaxError: Unexpected token <
Failed to load resource: the server responded with a status of 403 (Forbidden)

Can anyone tell me how to solve this problem? Should I change anything?

Here is the file structore enter image description here

Here is the first three lines of generated main.js

!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}(function(e){for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t))switch(typeof e[t]){case"function":break;case"object":e[t]=function(t){var n=t.slice(1),r=e[t[0]];return function(e,t,o){r.apply(this,[e,t,o].concat(n))}}(e[t]);break;default:e[t]=e[e[t]]}return e}([function(e,t,n){
Solution

  • It seems like your cloudfront origin access identity has no permission to access your s3 bucket. You have to update the bucket policy to allow access from cloudfront or update the cloud front origin settings to create an origin identity and automatically update bucket policy.

    You can do this from cloud front, by going to origins and editing the s3 origin as in the following screen shot.

    enter image description here

    Else if you want to do this from s3 bucket, have a look at the topic "Granting Permission to an Amazon CloudFront Origin Identity" in the following aws documentation.

    http://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-6