Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments: Deploy to S3 #63

Closed
jayair opened this issue Apr 10, 2017 · 27 comments

Comments

Projects
None yet
@jayair
Copy link
Member

commented Apr 10, 2017

@jayair jayair added the Discussion label Apr 10, 2017

@riogaj89

This comment has been minimized.

Copy link

commented Apr 26, 2017

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

This comment has been minimized.

Copy link

commented Apr 26, 2017

@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

This comment has been minimized.

Copy link
Member Author

commented Apr 26, 2017

@riogaj89 does the login on your local work fine?

@riogaj89

This comment has been minimized.

Copy link

commented Apr 26, 2017

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

@jayair

This comment has been minimized.

Copy link
Member Author

commented Apr 26, 2017

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

@ryanjcruz

This comment has been minimized.

Copy link
Contributor

commented May 20, 2017

@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

This comment has been minimized.

Copy link
Member Author

commented May 20, 2017

@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 comment has been minimized.

Copy link

commented Aug 2, 2017

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.
webpack/webpack#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

This comment has been minimized.

Copy link

commented Aug 22, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Aug 22, 2017

@biznuge Thanks for the kind words!

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

@designpressure

This comment has been minimized.

Copy link

commented Sep 25, 2017

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

This comment has been minimized.

Copy link

commented Sep 25, 2017

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

This comment has been minimized.

Copy link

commented Oct 6, 2017

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

This comment has been minimized.

Copy link

commented Dec 2, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Dec 2, 2017

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

@roxy-target

This comment has been minimized.

Copy link

commented Dec 11, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Dec 12, 2017

@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

This comment has been minimized.

Copy link

commented Dec 13, 2017

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

@jonasbarsten

This comment has been minimized.

Copy link

commented Jan 20, 2018

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

This comment has been minimized.

Copy link

commented Jan 21, 2018

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

What can I do to address this?

@sgrinspoon

This comment has been minimized.

Copy link

commented Jan 22, 2018

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!

@muratcetinkaya

This comment has been minimized.

Copy link

commented Mar 8, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Mar 8, 2018

@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?

@muratcetinkaya

This comment has been minimized.

Copy link

commented Mar 9, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Mar 9, 2018

@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.

@muratcetinkaya

This comment has been minimized.

Copy link

commented Mar 10, 2018

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

@jayair jayair closed this May 9, 2018

@jayair jayair reopened this May 9, 2018

@jayair

This comment has been minimized.

Copy link
Member Author

commented May 9, 2018

@jayair jayair closed this May 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.