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

Bug - Always Redirects To Home Page #114

Closed
JimLynchCodes opened this issue Nov 5, 2019 · 27 comments
Closed

Bug - Always Redirects To Home Page #114

JimLynchCodes opened this issue Nov 5, 2019 · 27 comments

Comments

@JimLynchCodes
Copy link

@JimLynchCodes JimLynchCodes commented Nov 5, 2019

Hi! Thanks for making this plugin. I am having some small issues getting it to work though.

I think I have configured it according to the docs, but now whenever I enter a non-homepage route into the address bar it always redirects to the home page (it should just go to the non-page route)

Here's what I did:

  • set error page to "index.html" in the s3 bucket
  • redirect 400, 403, and 404 errors to "index.html" in cloudfront
  • install the s3 plugin and add it to gatsby-config.js with my bucket name.

Then I deployed with the special gatsby command: "gatsby-plugin-s3 deploy --yes"

Interestingly, it spit out a url that does work correctly when I try to go to other pages:
http://aaa-evaluates2-site-production.s3-website-us-east-1.amazonaws.com

With AWS Route53 I am pointing a domain name to this cloudfront url.
https://evaluates2.com

So that's my issue- it works with the cloudfront url and not with the real domain. It there something extra I am missing to get it working with the real domain?

Thanks!

PS. unfortunately, the code for this site is private and I can't show it.

@JimLynchCodes

This comment has been minimized.

@JoshuaWalsh

This comment has been minimized.

Copy link
Collaborator

@JoshuaWalsh JoshuaWalsh commented Nov 5, 2019

I'm not really sure what's going on here, but it doesn't look like it's an issue with CloudFront/S3 to me. When I request https://evaluates2.com/engineering I get a 200 response, no redirect. The redirect appears to happen in JavaScript, but I can't work out why.

I understand that you can't share the code for the website, but could you share your gatsby-config?

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 5, 2019

Hi @JoshuaWalsh, thanks so much for getting back to me. Apart from a few strings changed, this is what's in my gatsby-config.js file:

require('dotenv').config({
  path: `.env.development`,
});

module.exports = {
  siteMetadata: {
    title: `Derp`,
    description: `Derp`,
    author: `Jimbo`,
    url: `https://derpsauce.com`,
  },
  plugins: [
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/team/*`] },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `json`,
        path: `${__dirname}/src/data`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/data/logo.png`, // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-emotion',
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-s3`,
      options: {
        bucketName: 'aaa-jimbos-bucket',
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.app/offline
    // 'gatsby-plugin-offline',
  ],
};
@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 5, 2019

Oh duh, it is probably because I don't have protocol and hostname in the gatsby-plugin-s3 options up here! 🤦‍♂

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 6, 2019

@JoshuaWalsh I added protocol and hostname, but sadly it's still not working 😢 . My new gatsby-config.js:

require("dotenv").config({
  path: `.env.development`,
})

module.exports = {
  siteMetadata: {
    title: `Derp`,
    description: `Derp`,
    author: `Jimbo`,
    url: `https://derpsauce.com`,
  },
  plugins: [
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/team/*`] },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `json`,
        path: `${__dirname}/src/data`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/data/logo.png`, // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-emotion',
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-s3`,
      options: {
        bucketName: 'aaa-jimbos-bucket',
        protocol: "https",
        hostname: "www.evaluates2.com",
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.app/offline
    // 'gatsby-plugin-offline',
  ],
};

It still always forwards to the home page, evaluates2.com

I also tried "evaluates2.com" for the hostname but no luck...

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 6, 2019

(Sorry, thought it was fixed but it's actually not)

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 6, 2019

@JoshuaWalsh is there maybe some other options param I am missing? Thanks

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 6, 2019

route53

^ This is my route53 config

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 6, 2019

Screen Shot 2019-11-06 at 1 48 04 PM

^ This is my cloudfront re-routing

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 6, 2019

It would be great if someone could help me out on this. Thanks

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 6, 2019

@JoshuaWalsh Should I need to change anything in

gatsby-browser.js, gatsby-node.js, or gatsby-ssr.js

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

So, a few observations.

  • S3 should serve the correct 404 error page already, there's no need for the additional cloudfront error pages. You can remove all of them.
    Also, just as an FYI, returning 200 when a 404 has occurred is considered pretty bad practice.
  • The redirect does happen client side, but this is only because cloudfront is serving the index page
  • DNS records are public, not sure why you censored them.
  • What does your origin look like?
    It should use the static website endpoint (http://aaa-evaluates2-site-production.s3-website-us-east-1.amazonaws.com/) as a custom origin, and not the S3 bucket (they are different things).
    If it says 'S3 Origin', then delete it and add a new custom origin with the aforementioned static site endpoint.
  • Don't set index.html as the error page in S3, it should be 404.html.

Also, kindly refrain from posting multiple comments after eachother, it clutters my email inbox and this thread.

@JoshuaWalsh

This comment has been minimized.

Copy link
Collaborator

@JoshuaWalsh JoshuaWalsh commented Nov 7, 2019

Ah, Jari is correct about the clientside redirect being caused by the index page being served. So the issue is definitely with your CloudFront+S3 setup.

We have a tutorial for how to set up CloudFront+S3 correctly here.

And yeah, if you think of extra things that you'd like to add, please edit your previous post instead of multiposting. We do this in our spare time, I was busy with work yesterday, getting 11 emails in a row is a bit annoying.

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

The problem definitely is in the CF setup, and not the code.

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 7, 2019

@jariz @JoshuaWalsh

Thank you for getting back to me, but @jariz as I said I ALREADY TRIED THAT.

I just removed the cloudfront error redirects, but indeed it still not NOT work. evaluates2.com/page-2 is still redirecting to the home page.

@jariz I don't know what you mean by "my" origin, but yes that is the static endpoint (http://aaa-evaluates2-site-production.s3-website-us-east-1.amazonaws.com/). As I said before, it does work properly when you enter http://aaa-evaluates2-site-production.s3-website-us-east-1.amazonaws.com/page-2

I understand that you guys are busy, but this is a very urgent issue for us.

PS. Has anyone actually used this plugin with a real domain name before releasing it into the world?

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 7, 2019

@jariz Can you recommend anything else for me to change in the CF setup?

I am now back to being completely stuck...

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

https://evaluates2.com/page-2/ is was returning a 403 so I'm still pretty convinced there's something wrong with your origin settings or your permission settings in S3.

What I mean with "your" origin is the origins tab in the CF config; it should look like something along the lines of

Additionally, check if your bucket is set to public.

Has anyone actually used this plugin with a real domain name before releasing it into the world?

I personally have this plugin running in multiple pretty large projects that utilise a wide range of the plugin's features.

Gonna close this now because it's not really relevant to the plugin itself.

@jariz jariz closed this Nov 7, 2019
@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 7, 2019

@jariz For Origin Type mine says "S3 Origin", not "Custom Origin" like yours... Can you screenshot when it looks like when you hit Edit?

What am I supposed to change here? I am using the default with cloudfront, but it seems like you had to make some customizations.

And JFC, is this is the docs anywhere??????

Screen Shot 2019-11-07 at 9 32 06 AM

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

Like I said earlier, it shouldn't say "S3 origin".
When editing, don't use the dropdown and enter aaa-evaluates2-site-production.s3-website-us-east-1.amazonaws.com as the domain. (notice the .s3-website- part in this domain)

Here's a screenshot (but it's basically the same screen as you should see yourself when editing now)

And JFC, is this is the docs anywhere??????

"In order for all the features of your site to work correctly, you must instead use your S3 bucket's Static Website Hosting Endpoint as the CloudFront origin. "

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 7, 2019

Thanks @jariz.

Still doesn't work though.

I changed it to say exatly this (aaa-evaluates2-site-production.s3-website-us-east-1.amazonaws.com), but I still get the exact same behavior...

Screen Shot 2019-11-07 at 9 41 57 AM

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

It does on my side though?

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

Could be that your CF edge location is serving a old version. Go to invalidations > Create
Enter '*' as object path.

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 7, 2019

ok it's finally working. jesus god damn christmas trees, you need to make the docs more clear...

Also, it would have been nice if you didn't ignore me for 3 days...

@JimLynchCodes

This comment has been minimized.

Copy link
Author

@JimLynchCodes JimLynchCodes commented Nov 7, 2019

Sorry to be a douche @JoshuaWalsh @jariz but this has been super frustrating and unpleasant for us.

Thanks though!

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

I've mentioned all this previously already a couple hours ago but you chose to ignore it.
As for the timeframe, we're volunteers and not part of the gatsby team.
A word of advice: other people might not be as patient as me when you're responding to them like this on a OSS repo.

Repository owner locked as resolved and limited conversation to collaborators Nov 7, 2019
@JoshuaWalsh

This comment has been minimized.

Copy link
Collaborator

@JoshuaWalsh JoshuaWalsh commented Nov 7, 2019

Sorry to be a douche JoshuaWalsh jariz but this has been super frustrating and unpleasant for us.

This has also been the least pleasant experience that I've had in open source. I'm a consultant and even my paying customers are only guaranteed a response within 24 hours. If you re-read this conversation you will see that we have been nothing but helpful and polite, while you have abused us and insulted our project. It's not just that your words have been rude, but the fact that you continued double-posting even after we both asked you to stop is a huge breach of internet etiquette.

ok it's finally working. jesus god damn christmas trees, you need to make the docs more clear...

I'm not really sure how much clearer we can make it, we have a tutorial that works perfectly if you read it and follow it, including two paragraphs explaining why you need to use a Custom Origin instead of an S3 Origin.

Additionally, Jari specifically told you to check this in his first reply, and instead of following his advice (which later fixed your problem) you sent a snarky reply.

It doesn't matter how good our docs are if you don't read them.

Learn some manners.

@jariz

This comment has been minimized.

Copy link
Owner

@jariz jariz commented Nov 7, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.