title: Nginx + GraphQL Connection Refused
body: <ol>
  <li><p>My Client (next.js) app running at port <code>3000</code></p></li>
  <li><p>My Server (graphql) app running at port <code>4000</code></p></li>
  </ol>
  
  <p>My website is <code>https://example.com</code>, nginx will pass proxy port 3000.</p>
  
  <p>If the user access the site, the page is loaded successfully. </p>
  
  <p>But behind the scene, In my webpage some api requests are sended to graphql server. <code>(http://localhost:4000)</code></p>
  
  <p><strong>This api requests are failed.</strong></p>
  
  <p>I don't know why, but when I access <code>http://example.com:4000/graphql</code> the graphql playground (graphiql?) loaded successfully and I can send some query and result showed well. But request from webpage is failed.</p>
  
  <p><strong>nginx/sites-enabled/example.com</strong></p>
  
  <pre><code>server {
          listen 80;
          listen [::]:80;
          server_name www.example.com example.com;
          return 301 https://example.com$request_uri;
  }
  
  
  server {
      listen 80;
      listen [::]:80;
      server_name example.com;
  
  
      location / {
          proxy_pass http://localhost:3000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
      }
  
      listen [::]:443 ssl ipv6only=on; # managed by Certbot
      listen 443 ssl; # managed by Certbot
      ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
      ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
      include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
      ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
  
  }
  </code></pre>
  
  <p><strong>client app's graphql part</strong></p>
  
  <pre><code>export default function createApolloClient(initialState, ctx) {
    return new ApolloClient({
      ssrMode: Boolean(ctx),
      link: authLink.concat(new HttpLink({
        uri: 'http://localhost:4000/graphql', // Server URL (must be absolute)
        credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
        fetch,
      })),
      cache: new InMemoryCache({ fragmentMatcher }).restore(initialState),
      credentials: 'include',
    })
  }
  </code></pre>
  
  <p>** What I tried...**</p>
  
  <p>I added below snippets to nginx conf (above listen [::]443 part) and restart the nginx service, but nothing changed.</p>
  
  <pre><code>   location /graphql {
          proxy_pass http://localhost:4000/graphql;
     }
  </code></pre>
  
  <p>I think I miss something in nginx conf. How do I fix it?</p>