Frontend trying to query localhost in production

[bensventures]

I've had a look at the docs and past issues but can't find anything clear.

I have deployed an app on a production server, inside a Docker container (using Dockerfile provided, thanks!). I have setup Nginx as the SSL termination, proxying to the container. If I load a page in a browser with https://www.myapp.com everything loads fine. But when the frontend tries to make a request to the GraphQL endpoint I get an error in the browser console:

Mixed Content: The page at 'https://www.myapp.com/someurl' was loaded over HTTPS, but requested an insecure resource 'http://0.0.0.0:4000/graphql'. This request has been blocked; the content must be served over HTTPS.

Do I need to specify somewhere the base url the frontend should use or something? I've upgraded to the latest CLI but still getting the same issue.

Note: when the page is generated directly from the server (SSR) everything loads fins too.

[klarstrup]

You want to make sure that the BROWSER_HOST environment variable is set as ie. www.myapp.com

[bensventures]

I have tried adding it to the Dockerfile like so:

# Set the default host/port
ENV BROWSER_HOST www.myapp.com
ENV BROWSER_PORT 443
ENV HOST 0.0.0.0
ENV PORT 4000

But that does not change the uri where the Apollo client tries to connect. I've also tried hardcoding it in the browser_prod webpack config or defining it when running the docker container unsuccessfully.

Right now I've hardcoded the getServerURL in lib/env to return the uri I need, and that seems to work, but it's obviously not ideal.

From what I've seen, BROWSER_HOST is only used in kit/webpack/browser_dev.js and does not seem to be taken into account in production mode?

[webexpert5]

From what I've seen, BROWSER_HOST is only used in kit/webpack/browser_dev.js and does not seem to be taken into account in production mode?

Yes, for production mode, the kit uses HOST variable (not Browser_HOST)

[bensventures]

I've tried also to specify the HOST variable to be the domain of the app but I'm guessing in the context of the container + nginx it does not make sense.

Specifying HOST would only work if you are using the Koa server in SSL mode. But as per the comments in the code and is more appropriate to use Nginx for that.

With Nginx as the SSL termination you proxy all request to an internal connection, in this case a docker container. Nginx passes everything to the port 4000 of your container and the server listens on 0.0.0.0:4000 inside the container.

But the url of the graphql endpoint defined in the frontend should be the sames as your domain name: https://www.myapp.com/graphql.

I think we are missing a way to have a different endpoint url on the front end and server no?

[leebenson]

Environment variables and host names will be improved with kit v3.0, along with moving to Typescript and Apollo v2. I'm aiming to release in the next 1-2 weeks.

In the meantime - hard code it.

[bensventures]

Awesome, great news. Happy to help testing things if needed. And thanks for the hard work 💪

[Kamill90]

@leebenson @bensventures
I have a similar issue. I hardcoded IP of my host server in env.js and I get an error saying that app is trying to fetch "http://159.89.18.79:4000/159.89.18.79/grapqh" so it concatenates two URI somehow.
Could you share how to hardcode it before building?

[bensventures]

@Kamill90 sure, here is my kit/kib/env.js file:

// Get the protocol://host:port of where the current server would bind
export function getServerURL(host = process.env.HOST, port = process.env.PORT, allowSSL = true) {
  //return 'https://www.urlofthewebsite.com';

  // Check for SSL
  if (allowSSL && process.env.SSL_PORT) {
    const stub = `https://${host || process.env.HOST}`;

    // If we're on port 443, that's 'regular' SSL so no need to specify port
    if (process.env.SSL_PORT === '443') return stub;
    return `${stub}:${process.env.SSL_PORT}`;
  }

  // Plain HTTP
  const stub = `http://${host || process.env.HOST}`;

  // If we're on port 80, that's 'regular' HTTP so no need to specify port
  if (port === '80') return stub;
  return `${stub}:${port}`;
}

You'll see the return, commented out, at the top. I uncomment the line before deploying to production. That's all. I haven't upgraded kit to the latest version so I don't know if this has been fixed or not yet.

[Kamill90]

Thanks. This is it.