Organisez la communication dans un environnement qui utilise diverses ressources sur la machine hôte et le conteneur Docker

J'ai construit un exemple d'environnement en utilisant Django, nuxt.js, express, etc. avec la configuration suivante.

nuxt.js ・・・ SSR / frontal express, Django ・・・ Serveur API

Django fonctionne sur la machine hôte nuxt.js, les explorateurs fonctionnent sur Docker MySQL s'exécute dans un conteneur séparé

Je l'ai fait en considérant pour apprendre chaque ressource (Django, express, nuxt), Dans cet article, j'ai essayé d'organiser la partie communication entre les ressources.

Je voudrais organiser les différentes parties de Django, express et nuxt séparément.

Communication de la machine hôte au conteneur Docker

Je pense que c'est le cas le plus fréquemment utilisé lors de l'utilisation de Docker pour le développement, Lancez le conteneur en associant le port spécifié et accédez-y avec localhost.

Conteneur MySQL

docker run \
・ ・ ・
  -p 13306:3306 \ #Liez 13306 sur localhost à 3306 dans le conteneur
・ ・ ・
  -itd mysql:5.7

conteneur node.js

docker run \
・ ・ ・
  -p 3000:3000 \ #Liez 3000 sur localhost à 3000 dans le conteneur
  -p 3001:3001 \ #Liez 3001 sur localhost à 3001 dans le conteneur
・ ・ ・
  node:latest

Accédez à nuxt.js sur le port 3000

L'accès à express depuis nuxt.js se fait sur le port 3001 (Ici, la communication depuis le navigateur peut être la même avec SSR de nuxt.js)

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

Communication au sein de la machine hôte

Django s'exécute dans un environnement virtuel Python sur la machine hôte La communication depuis le navigateur est la même communication intra-hôte, donc localhost: 8000 C'est aussi normal

Cependant, dans cette configuration, le SSR de nuxt.js (lorsque process.server == true) La communication n'est pas possible avec localhost: 8000 (décrit plus loin)

 async fetch(context): Promise<void> {
    let api_host: string
    //Lors du rendu côté serveur
    if (process.server) {
      api_host = ??????
    }
　　 //Lors de l'accès à partir d'un navigateur
　　 else {
      api_host = 'http://localhost:8000'
    }
    const response = await (context as any).$axios.$get(
      api_host +・ ・ ・
    )

Communication dans le même conteneur

Pendant le rendu côté serveur de nuxt.js, nuxt.js communique avec express dans le même conteneur Puisqu'il s'agit d'une écoute express à 3001 dans le même conteneur, il peut communiquer à localhost: 3001 (Identique à la communication depuis un navigateur)

Communication entre conteneurs

Communiquer depuis le conteneur node.js vers un autre conteneur MySQL Dans ce cas, si vous accédez par nom de conteneur, vous pouvez accéder par le port 3306

Communication du conteneur à la machine hôte

C’est comme le sujet principal de cet article. Dans cette image, le conteneur node.js localhost pointe à l'intérieur du conteneur Ensuite, je me suis demandé s'il y avait un moyen d'accéder à Django avec SSR à partir de nuxt.js.

En conclusion, J'ai pu accéder avec ce nom d'hôte dans l'environnement Mac Docker Desktop

http://host.docker.internal:8000

Cependant, cela semble être un hôte disponible dans Docker Desktop (même la version Windows?)

Je construis une application avec la même configuration sous Windows, mais pour diverses raisons, Docker Desktop est sous Windows Je ne l'ai pas installé et j'utilise Docker dans les centos de la boîte virtuelle. À ce moment, host.docker.internal n'était pas valide pour accéder à la machine hôte depuis l'intérieur du conteneur. Il semble que vous deviez communiquer avec Windows à partir du conteneur, au-delà des centos de virtualbox, Concernant cette solution, l'article suivant a été évoqué par Don Pisha Accès au système d'exploitation hôte à partir d'un conteneur exécutant Windows + VirtualBox + Docker

Frappez ce qui suit avec centos dans 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 semble être la passerelle par défaut, La communication du conteneur à Windows était possible via cette IP 10.0.2.2

http://10.0.2.2:8000

Sur nuxt.js, un hôte de connexion est défini et utilisé dans .env pour chaque environnement Mac et Windows. Je voudrais résumer les détails du code ici séparément.