Serverless-stack-com: Comments: Deploy to S3

[jayair]

Link to chapter - http://serverless-stack.com/chapters/deploy-to-s3.html

[riogaj89]

When I run this command $ aws s3 sync build/ s3://gajen-notes-app-client, I get an error: Invalid endpoint: https://s3.region=us-east-1.amazonaws.com.... Any feedback on this?

[riogaj89]

@jayair I was able to resolve the issue above, however, when I opened the webpage and tried to log in I get an error message TypeError: re is not a function. Am I missing anything?

[jayair]

@riogaj89 does the login on your local work fine?

[riogaj89]

@jayair Yes it worked fine when deployed them on my local

[jayair]

That's really strange. Can I see the full error as it shows in the console?

[ryanjcruz]

@jayair just wondering, how secure is running this command? Would anyone - and I mean anyone be able to deploy to an S3 bucket if they know what's the bucket's name?

[jayair]

@ryanjcruz In this case they need your AWS credentials to upload it. So as long as you are not giving those out, you should be fine.

[manubhat90]

This guide is incredible, thanks for all the hard work!

I'm having an issue with the production build deployed to S3. Everything works fine locally and deployment isn't an issue, but when I go to my S3 URL to load the application I get the following error in console:

Uncaught TypeError: Cannot read property 'call' of undefined
at t (main.a20f4176.js:1)

Based on the the issue link below, I assume its something to do with webpack. Any chance you have an idea of how to fix it? Haven't been able to figure it out myself.
https://github.com/webpack/webpack/issues/959

I've incorporated a couple additional things to your guide: redux, react-redux, react-router-redux, redux-thunk, redux form and some babel/eslint stuff. Link to my test repository below, would really appreciate any help or thoughts.
https://github.com/manubhat90/serverless-test

[biznuge]

Once I attempted the _aws s3 sync_ command here, I realised nothing was being written to my s3 bucket.

After a little reading I realied that my admin IAM user didn't have PUT access to that bucket, so I amended the bucket policy to the version I've provided below.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::notes-app-client-XXX/*"
        },
        {
            "Sid": "PublicWriteForPutBucketObjects",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::YYYYYYYY:user/admin"
            },
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::notes-app-client-XXX/*"
        }
    ]
}

Hopefully this helps someone out in the same situation.

Otherwise an absolutely smashing tutorial here guys. Amazingly thorough and I've learned loads in just a few short hours.

Cheers.

[jayair]

@biznuge Thanks for the kind words!

And thanks for reporting back. I'm sure it'll help some folks.

[designpressure]

when trying to sync I received this message

fatal error: Could not connect to the endpoint URL: "https://s3.Frankfurt.amazon
aws.com/notes-app-client-my1test?prefix=&encoding-type=url"

a couple of thing I don't understand:

• what is this ?prefix=&encoding-type=url
• why s3.Frankfurt.amazon while up to now all regions where in the form eu-central-1?
  As a matter of fact I don't know where to start troubleshooting... if someone can help...

[designpressure]

Ok, so maybe this can help somebody else. I created the notes-app-client folder inside the notes-app-server. I thought it should inherit the login credential but it didnt, so I simply reconfigure awscli with a new accesskey and secretId.

[quantuminformation]

Don't forget to use --profile personal when uploading if you have profiles otherwise you will get

serverless-stack-demo-client git:(master) ✗ aws s3 sync build/ s3://notes-site-test           
fatal error: An error occurred (InvalidRequest) when calling the ListObjects operation: You are attempting to operate on a bucket in a region that requires Signature Version 4.  You can fix this issue by explicitly providing the correct region location using the --region argument, the AWS_DEFAULT_REGION environment variable, or the region variable in the AWS CLI configuration file.  You can get the bucket's location by running "aws s3api get-bucket-location --bucket BUCKET".

[teseodemigod]

Hi all, everything was working fine until I run npm run build... I'm using babili instead of uglify... The build is complete, but when I run the project I get this error: _Uncaught (in promise) TypeError: h.a.config.credentials.getPromise is not a function_

The line is _return AWS.config.credentials.getPromise()_ in the _getAwsCredentials()_ method, file _awsLib.js_

Does anybody have an idea of what's going wrong?
Thanks in advance for helping.

[jayair]

@teseodemigod I'm not too familiar with your setup so I can't really help. But maybe somebody else can.

[roxy-target]

Hi,

I created my S3 bucket and went to do npm run build and I deployed the build/ file to the S3 bucket I created.
In AWS the bucket shows up with all the files created in the build file, however when I go to the endpoint, the url where my app should be live, it shows up with the favicon icon but the screen is blank and the error i get from the console is:
Failed to load resource: the server responded with a status of 404 (Not Found)
main.f5cd3d98.js Failed to load resource: the server responded with a status of 404 (Not Found)
main.0e9b8740.css Failed to load resource: the server responded with a status of 404 (Not Found)
I understand that it is not reading the static files created during the build but I cannot seem to figure out how to fix this error?
Hopefully someone can help me please? Thanks :)

[jayair]

@roxy-target Can you ensure the permissions for the S3 bucket are set right? The CORS and permission section in this chapter - https://serverless-stack.com/chapters/create-an-s3-bucket-for-file-uploads.html

[roxy-target]

@jayair I manage to get it working ! So thank you for the help :)

[jonasbarsten]

Should maybe add --delete to

aws s3 sync build/ s3://YOUR_S3_DEPLOY_BUCKET_NAME --delete

So that the changes don't accumulate.

Before I did that, earlier versions were buffered and the correct version was not always rendered.

[sgrinspoon]

I'm getting the following response, "npm ERR! missing script: build"

What can I do to address this?

[sgrinspoon]

I figured it out -- I ran a few of the npm install scripts in my root directory as opposed to my working directory. never mind!

[dev-to-dev]

Is this example SEO friendly?
If yes which part helps to be seo-friendly. If not how can we make it so?

I'm a quite newbie on serverless and react, so please be kind if my question looks silly :)

[jayair]

@muratcetinkaya No worries.

We might have addressed this somewhere else. But the notes app is a single page app and it is not meant to be publicly accessible (it's behind a login). So it isn't really SEO friendly.

Are you wanting to remove the login and make it publicly accessible?

[dev-to-dev]

Hi @jayair,
I'm planning to build a mortgage comparison website. Yes it will be publicly accessible. I was thinking to build it with a similar stack as in this example. But I am not sure if google bots will be able to read the content of my pages and index it so people can find it when they search the words like 'mortgage calculator' ...

[jayair]

@muratcetinkaya Google does handle JS for SEO but a better pattern for this is to use a static page generator like Jekyll for your landing pages. And then use React for your actual app. This way you get to create content for SEO purposes while still having a single page app.

For example this tutorial itself is in Jekyll (for SEO purposes) and the demo app is in React.

[dev-to-dev]

@jayair Thank you very much. I'll test it for my website.

[jayair]

This issue was moved to https://discourse.serverless-stack.com/t/comments-deploy-to-s3/134