Not able to open Strapi app on the Browser while running Strapi on Docker

[vinod77]

Describe the bug Not able to open Strapi app on the Browser while running Strapi on Docker

Steps to reproduce the behavior

1. Dockerize Strapi App & MongoDB
2. Try to run App from the Docker with all 3 containers: Strapi_App & MongoDB
3. See logs/ See error

Observed Behavior: app_1 | [2020-10-06T18:43:34.097Z] warn ⚠️ The admin panel is unavailable... Impossible to open it in the browser. Above error log is from here: https://github.com/strapi/strapi/blob/master/packages/strapi/lib/utils/openBrowser.js#L116

And this condition, here: https://github.com/strapi/strapi/blob/master/packages/strapi/lib/utils/openBrowser.js#L110 is becomes false since e.code is returning as e.code:: ECONNREFUSED

But when i run the App on my local machine, this cond: https://github.com/strapi/strapi/blob/master/packages/strapi/lib/utils/openBrowser.js#L110 is becomes true & it's not executing this line: https://github.com/strapi/strapi/blob/master/packages/strapi/lib/utils/openBrowser.js#L116 Which works as expected.

Note: My Strapi_app is connected to MongoDB

Expected behavior Strapi app opens on the Browser & Strapi Admin panel should be available while running Strapi on Docker

Code snippets docker-compose.yml:

version: '3'

services:

  mongo:
    container_name: mongo
    image: mongo
    ports:
      - 27017:27017
    volumes:
      - ./docker/db:/docker/db
    restart: always

  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: my-image/strapi:latest

    environment:
      DATABASE_CLIENT: mongo
      DATABASE_NAME: strapi-306
      DATABASE_HOST: mongo
      DATABASE_PORT: 27017
      DATABASE_USERNAME:
      DATABASE_PASSWORD:

    ports:
      - 1337:1337
      - 9229:9229
    volumes:
      - .:/app
      - /app/node_modules
    links:
      - mongo
    depends_on:
      - mongo
    restart: always

Dockerfile:

# Use the official image as a parent image.
FROM node:10

# Set the working directory.
WORKDIR /app

# Copy the rest of your app's source code from your host to your image filesystem.
COPY . .

COPY ./admin ./

COPY ./env ./

COPY ./certs ./

# Copy the file from your host to your current location.
COPY package.json ./

# Run the command inside your image filesystem.
RUN npm install

# Add metadata to the image to describe which port the container is listening on at runtime.
EXPOSE 1337 9229

RUN npm run build

# Run the specified command within the container.
CMD ["npm","run","start"]

Our config/database.js:

module.exports = env => {
  return {
    defaultConnection: 'default',
    connections: {
      default: {
        connector: 'mongoose',
        settings: {
          host: env('DATABASE_HOST', '127.0.0.1'),
          port: env.int('DATABASE_PORT', 27017),
          database: env('DATABASE_NAME', 'strapi-306'),
          username: env('DATABASE_USERNAME', ''),
          password: env('DATABASE_PASSWORD', '')
        },
        options: {
          authenticationDatabase: env('AUTHENTICATION_DATABASE', null),
          ssl: env.bool('DATABASE_SSL', false)
        }
      }
    }
  };
};

Modified this file: https://github.com/strapi/strapi/blob/master/packages/strapi/lib/utils/openBrowser.js#L104 to see the error logs:

async function pingDashboard(url, multipleTime = false) {
  try {
    console.log("Inside try of pingDashboard, url:: ", url);
    console.log("Inside try of pingDashboard, multipleTime::", multipleTime);
    await fetch(url, { method: 'HEAD', timeout: 300, body: null });
    // Inform the user that we're going to open the administration panel.
    this.log.info('⏳ Opening the admin panel...');
  } catch (e) {
    console.log("Inside catch of pingDashboard e::", e);
    if (e.code !== 'ECONNREFUSED' && e.type !== 'request-timeout') {
      console.log("Inside catch(e), e.code !== 'ECONNREFUSED'", e.code !== 'ECONNREFUSED');
      console.log("Inside catch(e), e.type !== 'request-timeout'", e.type !== 'request-timeout');
      console.log("e.code::", e.code);
      console.log("e.type::", e.type);

      return console.error(e);
    }

    // Only display once.
    if (!multipleTime) {
      console.log("This is inside !multipleTime::", multipleTime);
      this.log.warn(`⚠️  The admin panel is unavailable... Impossible to open it in the browser.`);
    }
  }
}

Error logs:

app_1    | 
app_1    |  Project information
app_1    | 
app_1    | ┌────────────────────┬──────────────────────────────────────────────────┐
app_1    | │ Time               │ Tue Oct 06 2020 18:43:34 GMT+0000 (Coordinated … │
app_1    | │ Launched in        │ 4457 ms                                          │
app_1    | │ Environment        │ development                                      │
app_1    | │ Process PID        │ 34                                               │
app_1    | │ Version            │ 3.0.6 (node v10.22.1)                            │
app_1    | └────────────────────┴──────────────────────────────────────────────────┘
app_1    | 
app_1    |  Actions available
app_1    | 
app_1    | One more thing...
app_1    | Create your first administrator 💻 by going to the administration panel at:
app_1    | 
app_1    | ┌─────────────────────────────────────────┐
app_1    | │ https://my-localhost.com/admin │
app_1    | └─────────────────────────────────────────┘
app_1    | 
app_1    | Inside try of pingDashboard, url::  https://my-localhost.com/admin
app_1    | Inside try of pingDashboard, multipleTime:: false
app_1    | Inside catch of pingDashboard e:: { FetchError: request to https://my-localhost.com/admin failed, reason: connect ECONNREFUSED 127.0.0.1:443
app_1    |     at ClientRequest.<anonymous> (/app/node_modules/node-fetch/lib/index.js:1455:11)
app_1    |     at ClientRequest.emit (events.js:198:13)
app_1    |     at ClientRequest.EventEmitter.emit (domain.js:448:20)
app_1    |     at TLSSocket.socketErrorListener (_http_client.js:401:9)
app_1    |     at TLSSocket.emit (events.js:198:13)
app_1    |     at TLSSocket.EventEmitter.emit (domain.js:448:20)
app_1    |     at emitErrorNT (internal/streams/destroy.js:91:8)
app_1    |     at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
app_1    |     at process._tickCallback (internal/process/next_tick.js:63:19)
app_1    |   message:
app_1    |    'request to https://my-localhost.com/admin failed, reason: connect ECONNREFUSED 127.0.0.1:443',
app_1    |   type: 'system',
app_1    |   errno: 'ECONNREFUSED',
app_1    |   code: 'ECONNREFUSED' }
app_1    | Inside catch(e), e.code !== 'ECONNREFUSED' false
app_1    | Inside catch(e), e.type !== 'request-timeout' true
app_1    | e.code:: ECONNREFUSED
app_1    | e.type:: system
app_1    | This is inside !multipleTime:: false
app_1    | [2020-10-06T18:43:34.097Z] warn ⚠️  The admin panel is unavailable... Impossible to open it in the browser.

System

• Node.js version: v14.8.0
• NPM version: 6.14.7
• Strapi version: v3.0.6
• Database: MongoDB
• Operating system: MAC

Additional context Add any other context about the problem here.

[derrickmehaffy]

@alexandrebodin can you assist here

[derrickmehaffy]

Migrating issue to the strapi/strapi-docker repo

[alexandrebodin]

Hi this is the normal behavior in a docker container as it can't access the host. It is just a warning, you can still manually go to the url of the admin and open it if you shared the app port between your container and your host =) Going to close as there isn't much to do about it :)