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
・ ・ ・

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


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. image.png 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 dev eth0 proto dhcp metric 100 dev eth0 proto kernel scope link src metric 100 dev docker0 proto kernel scope link src dev br-25ec00a7e9f1 proto kernel scope link src dev br-94818cb53527 proto kernel scope link src dev eth1 proto kernel scope link src metric 101

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

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.

Recommended Posts

Organize communication in an environment that uses various resources on the host machine and Docker container
How to create an environment that uses Docker (WSL2) and Vagrant (VirtualBox) together on Windows
Put Zabbix in Ubuntu with Docker and monitor Docker on the same host
Monitor the Docker container and SystemD process on the same host with Zabbix on Ubuntu.
Check when the container cannot be accessed from Host in the Laravel on docker environment using VS Code's Remote container.
Copy and paste the file contents in Ubuntu's Docker container
Nginx container that displays the Hostname of the host running Docker
Install docker and docker-compose on ubuntu in the shortest process
[Docker] The story that an error occurred in docker-compose up
Until you build the docker environment and start / stop the Ubuntu container
Resolved the error that occurred when trying to use Spark in an environment where Java 8 and Java 11 coexist.
Push the Docker Image distributed by Docker Hub to Google Container Registry and start the VM based on that Image
Starting with installing Docker on EC2 and running Yellowfin in a container
Launching the production environment with docker + rails (ver5.2) and errors that occurred
Kind @ Mac in Docker and vctl container
Use docker in proxy environment on ubuntu 20.04.1
Build an environment with Docker on AWS
Try the Docker environment on AWS ECS
Build an Ultra96v2 development environment on Docker 1
Building an environment for WordPress, MySQL and phpMyAdmin with Docker Compose on EC2
Run Docker environment Rails MySQL on Heroku. devise and hiding the twitter API