使用Docker Compose访问链接

Question

我是一位有用的助手，可以为您进行文本翻译。

我有一个与Express服务器通信的Angular应用程序。我已经将Angular应用程序链接到Express服务器。我可以在Angular容器内ping链接，但在代码中使用时会显示错误。 Docker Compose文件

myexpress: 
    build: express-server 
    links:
      - "mymongodb:mongo"
    ports:
      - "8080:3000" 
  angular: 
    build: angular 
    links:
      - "myexpress:express"
    ports:
      - "4200:4200" 

我可以访问http://localhost:4200/上的应用程序。HTTP调用的代码片段如下：

return this.http.post('http://express:3000/signup', body, {headers: headers})
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));

控制台显示以下错误： 如何从Angular容器访问链接？

- Nikhil Baby

---

尝试使用http://myexpress并删除链接块。 - Paul Collingwood

修改后仍然是一样的。我使用了 ping express 并且得到了输出。这一定是其他问题。 - Nikhil Baby

Answer 1

容器之间的通信是通过它们的主机名进行的。默认情况下，服务名称被视为主机名，因此您应该使用http://myexpress:3000来连接到myexpress。

此外，您还可以单独指定主机名。更多详情请看这里。

- Ayushya

---

即使将请求更改为 http://myexpress:3000/signup，我仍然收到错误。错误显示为：net::ERR_NAME_NOT_RESOLVED。 - Nikhil Baby

使用主机名，这将消除所有混淆。 - Ayushya

我通过将Angular和Express合并到一个容器中解决了这个问题。 - Nikhil Baby

Answer 2

这是旧的内容，但我正在处理类似的事情，并意识到我的浏览器在主机上运行，而不是任何服务容器中。

然后，主机无法访问express域，因为该域位于docker网络中，而不是主机网络中。

我创建了一个nginx配置来处理此问题，希望这可以帮助某些人：

// default environment
export const environment = {
    production: false,
    apiUrl: 'http://localhost:3000' // this is for development purpose
};

// prod environment
// used when build is created for the docker image
export const environment = {
    production: true,
    apiUrl: '' // empty string: for the api redirection @fallback conf
};

// angular service
urlBase = `${environment.apiUrl}/apiEndpoint`;
findById(id){
  let headers = new HttpHeaders( { 'Content-Type': 'application/json'});
  let request = this.http.get( `${this.urlBase}/${id}`, {headers: headers});
  return request.toPromise();
}

//nginx.conf
server {
  listen 80;
  location / {
    #serve angular built
    root /usr/share/nginx/html;
    index index.html index.htm;
    #try files, if a path fails in angular then the fallback is used
    try_files $uri $uri/index.html @fallback;
  }
  #fallback for express redirect
  location @fallback{
    #set the backend fallback, this will send requests to express container
    #in the frontend baseUrl should be empty
    proxy_pass http://express:3000; #set the backend service domain here
  }
}

另外，两个服务应该属于同一个网络，并且您需要将nginx配置文件挂载到您的web容器中。

version: "3"
networks:
  mean:
services:
  web:
    build: client
    image: mean-frontend
    ports:
      - "80:80"
    depends_on:
      - express
    networks: 
      - mean
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    restart: always
  express:
    build: server
    image: mean-backend
    ports:
      - "3000:3000"
    depends_on:
      - mongo
    environment:
      WAIT_HOSTS: mongo:27017
    networks: 
      - mean
  mongo:
    image: mongo
    restart: always
    volumes: 
      - ./dbData:/data/db
    networks: 
      - mean

最后，当Angular中的路径无效时，浏览器将调用Angular应用程序，回退将使用Docker网络将调用重定向到Express服务。

- Alberto Casas

Answer 3

我觉得你在compose文件中缺少了container_name选项。

myexpress: 
    build: express-server 
    container_name: myexpress
    links:
      - "mymongodb:mongo"
    ports:
      - "8080:3000" 
angular: 
    build: angular 
    links:
        - "myexpress:express"
    ports:
        - "4200:4200" 

- yamenk

---

我已经尝试过这个，但它并没有解决错误。我还有其他以同样方式链接的容器。所以问题肯定是其他方面引起的。 - Nikhil Baby