Docker with next js frontend getServerSideProps node api fetch

Question

We have a docker orchestration with API and web frontend in nextJS next to other services. The requests are managed by a proxy service.

So, I managed to find the right address with a bridged network in docker-compose:

version: '3'
services:
  mysql:
    build: ./mysql
    restart: always
    environment:
      ...
    networks:
    - app-network

  ...

  api:
    build: ./api
    volumes:
    - ./api/src:/usr/src/app/src
    environment:
    - ...
    depends_on:
    - ...
    ports:
    - 3000:3000
    networks:
    - app-network

  webapp:
    build:
      context: ./webapp
      dockerfile: Dockerfile.dev
    volumes:
    - ./webapp:/usr/src/app
    - /usr/src/app/node_modules
    - /usr/src/app/.next
    environment:
    - ...
    depends_on:
    - api
    - ...
    stdin_open: true
    networks:
    - app-network

  ...

  proxy:
    build:
      context: ./reverse-proxy
      dockerfile: Dockerfile.dev
    links:
    - api
    - webapp
    - ...
    ports:
    - 80:80
    - 443:443
    depends_on:
    - api
    - webapp
    - ...
    networks:
    - app-network

networks:
  app-network:
    driver: bridge

Which is https://api:3000/api. The error I'm getting is now the following for getting a post entry:

FetchError: request to https://api:3000/api/rad/1 failed, reason: write EPROTO 8069172B4A7F0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:355

Because api only accepts fetches over port 443 HTTPS, I guess this error is thrown. We have no certificate for this URL.

I try to fetch https://api:3000/api in getServerSideProps to get the page pre-rendered like this:

export async function getServerSideProps(context) {
    const { req, query, res, params, asPath, pathname } = context;
    // Create a cookies instance
    const cookies = new Cookies(req, res);
    const sessionUserInfo = getObjectFromServerCookieStorage('userInfo', cookies) || {};
    const radId = parseInt(query.radId);
    let radInfo = {};
    
    const result = await fetch("https://api:3000/api/rad/1");
    console.log("result", result);

    return {
        props: {
            radInfo: result.radInfo,
            loading: false,
        }
    }
}

Check that this is a test and I fetch the post entry number 1.

How can I connect to our API in getServerSideProps properly? Or do I misunderstand something here?

This post helped me a lot: https://stackoverflow.com/questions/65752932/internal-api-fetch-with-getserversideprops-next-js. I try to find time to answer my question later... — Kurt Lagerbier, Dec 15 '21 at 15:43

score 0 · Answer 1 · answered Dec 15 '21 at 16:01

So I added now a next.js API file under /pages/api/[radId].js. There I can call our bridged API on server side with this code:

export async function getRadData(radId) {
    const response = await fetch("http://api:3000/rad/" + radId)
    const jsonData = await response.json()
    return jsonData
}

Check that I do this with HTTP and I guess, because it is an internal API call over bridged network, this is accepted.

For doing an API call client side, I added this piece in the same file:

export async function getRadDataOnMount(radId) {
    const response = await fetch("https://api.onradr.local/rad/" + radId)
    const jsonData = await response.json()
    return jsonData
}

Check that this is just a test and of course API URLs should come from .env file.

Docker with next js frontend getServerSideProps node api fetch

1 Answers1