Organisieren Sie die Kommunikation in einer Umgebung, in der verschiedene Ressourcen auf dem Hostcomputer und dem Docker-Container verwendet werden

Ich habe eine Beispielumgebung mit Django, nuxt.js, Express usw. mit der folgenden Konfiguration erstellt.

nuxt.js R ・ ・ SSR / Frontend Express, Django server ・ ・ API-Server

Django läuft auf dem Host-Computer nuxt.js, Entdecker laufen auf Docker MySQL wird in einem separaten Container ausgeführt

Ich habe es geschafft, während ich überlegte, jede Ressource zu lernen (Django, Express, Nuxt). In diesem Artikel habe ich versucht, den Kommunikationsteil zwischen Ressourcen zu organisieren.

Ich möchte die verschiedenen Teile von Django, Express und Nuxt getrennt organisieren.

Kommunikation vom Host-Computer zum Docker-Container

Ich denke, dass dies der am häufigsten verwendete Fall ist, wenn Docker für die Entwicklung verwendet wird. Starten Sie den Container, indem Sie den angegebenen Port zuordnen und mit localhost darauf zugreifen.

MySQL-Container

docker run \
・ ・ ・
  -p 13306:3306 \ #Binden Sie 13306 auf localhost an 3306 im Container
・ ・ ・
  -itd mysql:5.7

node.js Container

docker run \
・ ・ ・
  -p 3000:3000 \ #Binden Sie 3000 auf localhost an 3000 im Container
  -p 3001:3001 \ #Binden Sie 3001 auf localhost an 3001 im Container
・ ・ ・
  node:latest

Greifen Sie auf nuxt.js über Port 3000 zu

Der Zugriff auf Express von nuxt.js erfolgt über Port 3001 (Hier kann die Kommunikation vom Browser mit der SSR von nuxt.js identisch sein.)

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

Kommunikation innerhalb des Host-Rechners

Django wird in einer virtuellen Python-Umgebung auf dem Host-Computer ausgeführt Die Kommunikation über den Browser ist dieselbe Kommunikation innerhalb des Hosts, also localhost: 8000 Das ist auch normal

In dieser Konfiguration ist jedoch die SSR von nuxt.js (wenn process.server == true) Kommunikation mit localhost: 8000 (später beschrieben) nicht möglich

 async fetch(context): Promise<void> {
    let api_host: string
    //Beim Rendern auf der Serverseite
    if (process.server) {
      api_host = ??????
    }
　　 //Beim Zugriff über einen Browser
　　 else {
      api_host = 'http://localhost:8000'
    }
    const response = await (context as any).$axios.$get(
      api_host +・ ・ ・
    )

Kommunikation innerhalb desselben Containers

Während des serverseitigen Renderns von nuxt.js kommuniziert nuxt.js mit Express im selben Container Da es Express-Listening bei 3001 im selben Container ist, kann es bei localhost: 3001 kommunizieren (Wie bei der Kommunikation über einen Browser)

Kommunikation zwischen Containern

Kommunizieren Sie vom node.js-Container zu einem anderen MySQL-Container Wenn Sie in diesem Fall über den Containernamen zugreifen, können Sie über Port 3306 darauf zugreifen

Kommunikation vom Container zum Host-Computer

Es ist wie das Hauptthema dieses Artikels. In diesem Bild zeigt der localhost des Containers node.js innerhalb des Containers Dann fragte ich mich, ob es eine Möglichkeit gibt, über nuxt.js mit SSR auf Django zuzugreifen.

Als Schlussfolgerung, Ich konnte mit diesem Hostnamen in der Docker Desktop Mac-Umgebung zugreifen

http://host.docker.internal:8000

Dies scheint jedoch ein in Docker Desktop verfügbarer Host zu sein (sogar die Windows-Version?)

Ich erstelle eine App mit derselben Konfiguration unter Windows, aber aus verschiedenen Gründen ist Docker Desktop unter Windows Ich habe es nicht installiert und verwende Docker in den Centos der virtuellen Box. Zu diesem Zeitpunkt war "host.docker.internal" nicht für den Zugriff auf den Hostcomputer innerhalb des Containers gültig. Es scheint, dass Sie mit Windows vom Container aus kommunizieren müssen, vorbei an den Virtualbox-Centos. In Bezug auf diese Lösung wurde der folgende Artikel von Don Pisha erwähnt Zugriff auf das Host-Betriebssystem über einen Container unter Windows + VirtualBox + Docker

Treffen Sie Folgendes mit Centos in der 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 scheint das Standard-Gateway zu sein, Die Kommunikation vom Container zu Windows war über diese IP "10.0.2.2" möglich

http://10.0.2.2:8000

In nuxt.js wird in .env für jede Mac- und Windows-Umgebung ein Host für die Verbindung definiert und verwendet. Ich möchte die Details des Codes hier separat zusammenfassen.