Organize communication in an environment that uses various resources on the host machine and Docker container

I tried to build a sample environment using Django, nuxt.js, express, etc. with the following configuration.

nuxt.js ・・・ SSR / front end express, Django ・・・ API server

Django runs on host machine nuxt.js, explorers run on Docker MySQL runs in a separate container

I made it while considering for learning each resource (Django, express, nuxt), In this article, I tried to organize the communication part between resources.

I'd like to organize the parts of Django, express, and nuxt separately.

Communication from the host machine to the Docker container

I think that it is the most frequently used case when using Docker for development, Launch the container by associating the specified port and access it with localhost.

MySQL container

docker run \
・ ・ ・
  -p 13306:3306 \ #Bind 13306 on localhost to 3306 in the container
・ ・ ・
  -itd mysql:5.7

node.js container

docker run \
・ ・ ・
  -p 3000:3000 \ #Bind 3000 on localhost to 3000 in the container
  -p 3001:3001 \ #Bind 3001 on localhost to 3001 in the container
・ ・ ・
  node:latest

Access nuxt.js on port 3000

Access to express from nuxt.js is on port 3001 (Here, communication from the browser can be the same with SSR of nuxt.js)

  async fetch(context): Promise<void> {
・ ・ ・
    const api_host = 'http://localhost:3001'
・ ・ ・
    const response = await (context as any).$axios.$get(
      api_host +・ ・ ・
    )

Communication within the host machine

Django runs in a Python virtual environment on the host machine Communication from the browser is the same intra-host communication, so localhost: 8000 This is also normal

However, in this configuration, the SSR of nuxt.js (when process.server == true) Communication is not possible on localhost: 8000 (described later)

 async fetch(context): Promise<void> {
    let api_host: string
    //When rendering on the server side
    if (process.server) {
      api_host = ??????
    }
　　 //When accessing from a browser
　　 else {
      api_host = 'http://localhost:8000'
    }
    const response = await (context as any).$axios.$get(
      api_host +・ ・ ・
    )

Communication within the same container

During server-side rendering of nuxt.js, nuxt.js communicates with express in the same container Since it is express listening at 3001 in the same container, you can communicate at localhost: 3001 (Same as when communicating from a browser)

Inter-container communication

Communicate from node.js container to another container of MySQL In this case, you can access it on port 3306 by accessing it by container name.

Communication from container to host machine

It ’s like the main subject of this article. In this picture, the node.js container localhost points inside the container So, I wondered if there was a way to access Django with SSR from nuxt.js.

As conclusion, I was able to access with this host name in the Docker Desktop Mac environment

http://host.docker.internal:8000

However, this seems to be a host available on Docker Desktop (also for windows?)

I am building an app with the same configuration on windows, but for various reasons Docker Desktop is on windows I haven't installed it, and I'm using Docker in centos in virtualbox. At this time, host.docker.internal was not valid for accessing the host machine from inside the container. It seems that you need to communicate with Windows from the container, past the virtualbox centos, Regarding this solution, the following article was referred to by Don Pisha Accessing the host OS from a container running Windows + VirtualBox + Docker

Hit the following with centos in virtualbox

$ ip r
default via 10.0.2.2 dev eth0 proto dhcp metric 100
10.0.2.0/24 dev eth0 proto kernel scope link src 10.0.2.15 metric 100
172.17.0.0/16 dev docker0 proto kernel scope link src 172.17.0.1
172.18.0.0/16 dev br-25ec00a7e9f1 proto kernel scope link src 172.18.0.1
172.19.0.0/16 dev br-94818cb53527 proto kernel scope link src 172.19.0.1
192.168.33.0/24 dev eth1 proto kernel scope link src 192.168.33.11 metric 101

default via seems to be the default gateway, I was able to communicate from the container to Windows through this IP 10.0.2.2

http://10.0.2.2:8000

On nuxt.js, the host for connection is defined and used in .env for each Mac and windows environment. I would like to summarize the details of the code around here separately.