添加第二个服务器块作为反向代理破坏服务器

Question

我有4个码头集装箱：

用于Laravel的frontend

• mysql

• nginx

1. php-fpm Next.js
2. 节点

到目前为止，我只使用nginx来服务Laravel进行测试--这样我就可以直接用Postman调用API，并且Next.js前端页面(节点容器)由主机通过localhost:3000直接访问。但是现在我希望nginx为前端Next.js项目提供服务，然后节点容器将调用Laravel，但我仍然希望将测试服务器留给Postman，所以我在default.conf文件中添加了第二个服务器块，并调整了docker-compose.yml文件，但它破坏了所有东西，现在没有什么工作了。

到目前为止，这是我的设置(起作用)：

The docker-compose.yml

networks:
    laravel:
        driver: bridge

services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx
        ports:
            - "8088:80"
        volumes:
            - ./laravel-api:/var/www/html 
            - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
        
        depends_on:
            - php
            - mysql           
            - node             
        networks:
            - laravel
            
    mysql:
        image: mysql
        container_name: mysql
        restart: unless-stopped
        tty: true
        ports:
            - "4306:3306"
        volumes:
            - ./mysql:/var/lib/mysql
        environment:
            MYSQL_DATABASE: laravel          
            MYSQL_ROOT_PASSWORD: password
            SERVICE_TAGS: dev
            SERVICE_NAME: mysql            
        networks:
            - laravel
                     
    
    php:
        build:
            context: .
            dockerfile: Dockerfile
        container_name: php
        volumes:
            - ./laravel-api:/var/www/html
        ports:
            - "9000:9000"
        networks:
            - laravel

    node:
        build:
            context: ./nextjs
            dockerfile: Dockerfile
        container_name: next
        
        volumes:
            - ./nextjs:/var/www/html
        ports:
            - "3000:3000"
            - "49153:49153"

        networks:
            - laravel

和nginx default.conf文件：

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location ~ \.php$ {        
        try_files $uri = 404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    
}

因此，我直接在3000端口上访问节点容器，对Laravel的任何调用都由nginx处理--将8088端口上的主机重定向请求到端口80上的nginx容器。

我试图从localhost:3000向nginx容器添加用于反向代理的服务器块，就像我使用Laravel调用一样：

这是更新的default.conf，添加了第二个服务器块：

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location ~ \.php$ {        
        try_files $uri = 404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    
}

  server {
    listen       80;
    server_name  nextjs;
    access_log   logs/nextjs.access.log  main;


    
    location /nextjs {
      proxy_pass      node:3000;
    }
  }

并调整了docker-compose.yml文件：

networks:
    laravel:
        driver: bridge

services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx
        ports:
            - "8088:80"
            - "3000:80"
        volumes:
            - ./nextjs:/var/www/html/nextjs
            - ./laravel-api:/var/www/html 
            - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
        
        depends_on:
            - php
            - mysql           
            - node             
        networks:
            - laravel
            
    mysql:
        image: mysql
        container_name: mysql
        restart: unless-stopped
        tty: true
        ports:
            - "4306:3306"
        volumes:
            - ./mysql:/var/lib/mysql
        environment:
            MYSQL_DATABASE: laravel          
            MYSQL_ROOT_PASSWORD: password
            SERVICE_TAGS: dev
            SERVICE_NAME: mysql            
        networks:
            - laravel
                     
    
    php:
        build:
            context: .
            dockerfile: Dockerfile
        container_name: php
        volumes:
            - ./laravel-api:/var/www/html
        ports:
            - "9000:9000"
        networks:
            - laravel

    node:
        build:
            context: ./nextjs
            dockerfile: Dockerfile
        container_name: next
        
        volumes:
            - ./nextjs:/var/www/html
        ports:
            
            - "49153:49153"

        networks:
            - laravel

我从节点容器中删除了端口3000，并将其添加到nginx并映射到nginx容器的端口80，因此我的主机对端口3000的任何请求都将由nginx的端口80处理--就像Laravel一样，因此现在Laravel和Nextjs都被重定向到nginx容器上的端口80 (同样，我离开了Laravel服务器，这样我也可以直接从主机测试API --而不仅仅是从Next.js网站)。

另外，我在nginx容器上为nextjs项目创建了一个链接：- ./nextjs:/var/www/html/nextjs

但是现在当我从我的主机转到localhost:3000或localhost:8088时，没有什么起作用的。

Answer 1

为了使用Nginx作为NextJS应用程序的反向代理，您需要更改多个东西。

首先，在docker-compose.yml中，必须更新Nginx服务：

services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx
        ports:
            - "3000:80"

如您所见，我删除了"8088:80"映射。为什么？因为，请记住，这用于将主机的一个端口映射到服务(始终是<host>:<container>)。它的意思是“如果打开浏览器并键入http://localhost:8088，将此请求转发给Nginx容器，端口80”。

由于您将主机的两个端口映射到Nginx容器中的端口80，所以执行http://localhost:8088和http://localhost:3000的操作完全相同。

为了解决这个问题，我们删除了未使用的端口8088。我们只保留3000口。

接下来，我们将更新您的第一个服务器块，并对它侦听的端口进行更改。现在，我们将听取端口8088 (任何可用端口都可以)，而不是端口80。

server {
    listen 8088;
    index index.php index.html;
    ...
}

因为您没有配置任何server_name (这需要额外的步骤)，所以我们必须为每个服务器块使用不同的端口。按照惯例，由于前端应用程序将在API之前先被访问，所以我们会将端口80保留在Nextjs服务器块上.因此，我们不得不为API选择另一个API(我们选择了8088)。

此时，向http://localhost:3000提出的每个请求都将在端口80上的Nginx容器中着陆。您的第二个服务器块侦听端口80，因此让我们深入研究它：

server {
  listen       80;

    
  location / {
    proxy_pass http://node:3000;
  }
}

我删除了/nextjs，我们希望http://localhost:3000的所有请求都是反向代理，而不仅仅是那些以http://localhost:3000/nextjs开头的请求。

我们还在http://之前添加了node:3000，因为它将是一个HTTP。

我还删除了server_name和访问日志(严格来说并不需要，而且可能不存在，以后可以在有工作应用程序时添加)。

最后要做的更改是告诉节点应用程序向http://nginx:8088发送API请求(例如，http://nginx:8088/api/products.)。

总结一下应该发生的事情：

打开浏览器后，在端口80上的http://localhost:3000/my-pretty-url

• It容器中输入
• (因为映射"3000":"80")
• Nginx看到它有一个服务器块侦听该端口，并查看它应该做什么：proxy_pass http://node:3000; )。请注意，此处使用的端口3000可能与节点应用程序使用的端口完全不同。如果您用端口6000启动节点应用程序，只需在节点应用程序中用http://node:6000
• The请求lands替换http://node:3000即可。如果您在该url上有任何API请求(比方说对http://nginx:8088/api/products
• Back )，则应该对Nginx容器执行这些请求，在这里，请求不是在端口80上发出的，而是8088
• ，Nginx再次看到了一个带有该端口的服务器块:您的API
• 做了他擅长的事情:反向代理到fastcgi_pass php:9000;

。

我们就完了！

我不太了解Nextjs。您可能需要为您的节点应用程序代理额外的头，但这完全可以用于开发目的，只使用proxy_pass node:3000。

有许多“可能发生的问题”可能会发生，但总的想法是在这里。如果你有任何问题，请在评论中告诉我。