Using SSR with NextJS + Nginx + Docker + Express on Elastic Beanstalk

Looking to get NextJS working with a separate express backend on Elastic Beanstalk. I’ve got everything dockerized with an NGINX reverse proxy.

Locally, everything works when using getServerSideProps, but the same request returns a 500 when deployed. Client side requests work as expected.

I’ve tried various updates to the config, different urls, and could only get the server side request working with the full aws site url.

Here is the code:

// index.tsx
export const getServerSideProps: GetServerSideProps = async () => {
      const { data } = await axios.get('http://api:5000/')
      return {
        props: {
          title: data,
        },
      }
    }

// Dockerrun.aws.json
{
  "AWSEBDockerrunVersion": 2,
  "containerDefinitions": [
    {
      "name": "ui",
      "image": "omitted/starter-ui",
      "hostname": "ui",
      "essential": false,
      "memory": 512
    },
    {
      "name": "server",
      "image": "omitted/starter-server",
      "hostname": "api",
      "essential": false,
      "memory": 512
    },
    {
      "name": "nginx",
      "image": "omitted/starter-nginx",
      "hostname": "nginx",
      "essential": true,
      "memory": 128,
      "portMappings": [
        {
          "hostPort": 80,
          "containerPort": 80
        }
      ],
      "links": ["ui", "server"]
    }
  ]
}

// default.conf
upstream ui {
    server ui:3000;
}

upstream api {
    server api:5000;
}

server {
    listen 80;

    location / {
        proxy_pass http://ui;
        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;
    }

    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://api;
    }
}

Source: Docker Questions

LEAVE A COMMENT