CODEWITHSUNDEEP
azuredockerdocker-composenestjsnuxt.js
Thomas Saison
Thomas Saison

Reputation: 127

Docker-Compose / Azure WebApp / Nest.JS & Nuxt.js : got ENOTFOUND trying to fetch backend server container with axios

i'm new here and i hope to be able to find a solution to my problem :)

So,

I am developing an application (frontend + backend) with Nuxt.JS & Nest.JS and I would like to be able to deploy both applications in a single azure webapp.

So I used docker-compose to combine these two applications

I created my two applications nest and nuxt with their respective dockerfile but when I launch my azure webapp my application throws me a connection refused on the backend server address.

2021-01-04T14:25:40.285318405Z > [email protected] start /src
2021-01-04T14:25:40.285328805Z > nuxt start
2021-01-04T14:25:40.285332905Z
2021-01-04T14:25:48.450602161Z ℹ Listening on: http://172.16.1.3:3000/
2021-01-04T14:27:27.474295806Z
2021-01-04T14:27:27.474325906Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:27:27.474331907Z
2021-01-04T14:27:27.474336207Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:27:27.474340707Z
2021-01-04T14:27:27.502576941Z
2021-01-04T14:27:27.502597541Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:27:27.502654542Z
2021-01-04T14:27:27.502660442Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:27:27.502664942Z
2021-01-04T14:43:42.908712507Z
2021-01-04T14:43:42.910087624Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:43:42.910098524Z
2021-01-04T14:43:42.910103124Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:43:42.910107624Z
2021-01-04T14:43:42.942548608Z
2021-01-04T14:43:42.942574408Z  ERROR  getaddrinfo ENOTFOUND back back:5000
2021-01-04T14:43:42.942592008Z
2021-01-04T14:43:42.942598908Z   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
2021-01-04T14:43:42.942605409Z

What I tried:

And I really don't know how to solve this problem which is quite difficult to debug

It's working locally

Here are my docker files:

Nuxt Dockerfile:

# Dockerfile
FROM node:10-alpine

ENV APP_ROOT /src

RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}

RUN npm install
RUN npm run build

ENV HOST 0.0.0.0

Nest Dockerfile:

FROM node:10 AS builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build


FROM node:10-alpine
WORKDIR /app
COPY --from=builder /app ./
CMD ["npm", "run", "start:prod"]

docker-compose.yml:

version: "3.3"
services:
  thomassaison-front:
    build: "./app/"
    container_name: "front"
    image: "thomassaison.azurecr.io/thomassaison-front"
    restart: always
    depends_on:
      - thomassaison-back
    ports: 
      - "80:3000"
    command:
      "npm run start"
      

  thomassaison-back:
    build: "server/"
    container_name: "back"
    image: "thomassaison.azurecr.io/thomassaison-back"
    restart: always
    ports:
      - "5000:5000"

Azure WebApp docker-compose:

version: "3.3"
services:
  thomassaison-front:
    image: "thomassaison.azurecr.io/thomassaison-front:latest"
    container_name: "front"
    depends_on:
      - thomassaison-back
    ports: 
      - "80:3000"
    command:
      "npm run start"
      

  thomassaison-back:
    image: "thomassaison.azurecr.io/thomassaison-back:latest"
    container_name: "back"

nuxt.config.js:

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'app',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    baseURL: 'https://back:5000',
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {},
}

Upvotes: 0

Views: 1075

Answers (1)

Charles Xu
Charles Xu

Reputation: 31424

In Azure Web App, when you use the docker-compose to run multiple containers, then all the containers can communicate with each other via the port that other containers expose, they are using the same host. See the example here, you need to set the environment variable and the option depends_on for the container that you want to connect:

version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:                          # here 
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306         # here
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:

I'm not sure, but maybe you can change the value of baseURL into https://thomassaison-back:5000 in the nuxt.config.js file, like the depends_on you set in the docker-compose.

Upvotes: 1

Related Questions