Reactjs 为react应用程序设置nginx代理

我正在尝试使用两个服务创建docker compose，一个是Spring引导后端（运行在端口8080上），另一个是运行在Nginx上的React前端

react应用程序调用后端API，如/API/tests。 但是，当我运行docker compose并且前端发出请求时，它总是失败，并出现404错误：

GEThttp://localhost/api/tests 404（未找到）

当我将前端dockerfile设置为不使用Nginx时，只是

npm start

，它工作得很好，但我更喜欢在Nginx上使用生产构建

当前前端dockerfile：

FROM node:11.13 as builder

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@2.1.8 -g

COPY ./package-lock.json /usr/src/app/
COPY ./public /usr/src/app/public
COPY ./src /usr/src/app/src

COPY ./nginx.conf /etc/nginx/nginx.conf

RUN npm run build

FROM nginx:1.15.10-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

Nginx.conf：

server {
    listen 80;

    location / {
        try_files $uri $uri/ /index.html;
        add_header   Cache-Control public;
        expires      1d;
    }

    location /api {
       proxy_set_header X-Forwarded-Host $host;
       proxy_set_header X-Forwarded-Server $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://server:8080/;
    }
}

server {
    listen 80;
    include /etc/nginx/mime.types;
    root /var/www;
    index index.html index.htm;
    location /api {
        resolver 127.0.0.11;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://server:8080$request_uri;
    }
    location / {
        try_files $uri $uri/ =404;
    }
}

docker compose：

version: "3"

services:
  server:
    build: test-server/
    expose:
      - 8080
    ports:
      - 8080:8080
  ui:
    build: test-ui/
    expose:
      - 80
    ports:
      - 80:80

react应用程序有一行“代理”：http://server:8080“在其package.json中

Nginx记录以下错误：

2019/04/15 12:50:03 [error] 6#6: *1 open() "/usr/share/nginx/html/api/tests" failed (2: No such file or directory), client: 172.20.0.1, server: localhost, request: "GET /api/tests HTTP/1.1", host: "localhost", referrer: "http://localhost/"

---

由于您正在访问api

http://localhost/api/tests

，在您的

docker compose

文件中，您将api指向端口

8080

所以试试这个：

http://localhost:8080/api/tests

我建议您使用

环境变量

，以便您可以在更改端口或其他内容时更改它。然后，在React中，您可以通过以下方式访问它们： 例如，您可以从终端

设置REACT\u应用程序\u API\u URL=http://localhost:8080

并通过

process.env.REACT\u APP\u API\u URL

---

或者您甚至可以在

Dockerfile

或

docker compose

文件中设置它。

由于您正在访问api

http://localhost/api/tests

，在您的

docker compose

文件中，您将api指向端口

8080

所以试试这个：

http://localhost:8080/api/tests

我建议您使用

环境变量

，以便您可以在更改端口或其他内容时更改它。然后，在React中，您可以通过以下方式访问它们： 例如，您可以从终端

设置REACT\u应用程序\u API\u URL=http://localhost:8080

并通过

process.env.REACT\u APP\u API\u URL

---

或者您甚至可以在

Dockerfile

或

docker compose

文件中设置它。

它在dev中运行良好，因为您有一个webpack dev server代理您的请求到端口8080（代理）：http://server:8080“line），但这已在生产版本中消失

将

$request\u url

添加到代理\u pass应该可以解决此问题

位置/api{
代理集头X转发主机$Host；
代理设置头X转发服务器$host；
proxy\u set\u header X-Forwarded-For$proxy\u add\u X\u Forwarded\u For；
代理通行证http://server:8080$request_uri；
}

它在dev中运行良好，因为您有一个Web包dev服务器代理您的请求到端口8080（代理）：http://server:8080“line），但这已在生产版本中消失

将

$request\u url

添加到代理\u pass应该可以解决此问题

位置/api{
代理集头X转发主机$Host；
代理设置头X转发服务器$host；
proxy\u set\u header X-Forwarded-For$proxy\u add\u X\u Forwarded\u For；
代理通行证http://server:8080$request_uri；
}

我发现了问题。在docker映像的多阶段构建中，我意外地将nginx.conf文件复制到了构建器映像中，而不是生产映像中

固定Dockerfile现在如下所示：

# build environment
FROM node:11.13 as builder

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@2.1.8 -g

COPY ./package-lock.json /usr/src/app/
COPY ./public /usr/src/app/public
COPY ./src /usr/src/app/src


RUN npm run build

# production environment
FROM nginx:1.15.10-alpine
COPY --from=builder /usr/src/app/build /var/www
COPY ./nginx.conf /etc/nginx/nginx.conf
CMD ["nginx", "-g", "daemon off;"]

和nginx.conf：

server {
    listen 80;

    location / {
        try_files $uri $uri/ /index.html;
        add_header   Cache-Control public;
        expires      1d;
    }

    location /api {
       proxy_set_header X-Forwarded-Host $host;
       proxy_set_header X-Forwarded-Server $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://server:8080/;
    }
}

server {
    listen 80;
    include /etc/nginx/mime.types;
    root /var/www;
    index index.html index.htm;
    location /api {
        resolver 127.0.0.11;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://server:8080$request_uri;
    }
    location / {
        try_files $uri $uri/ =404;
    }
}

---

我发现了问题。在docker映像的多阶段构建中，我意外地将nginx.conf文件复制到了构建器映像中，而不是生产映像中

固定Dockerfile现在如下所示：

# build environment
FROM node:11.13 as builder

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@2.1.8 -g

COPY ./package-lock.json /usr/src/app/
COPY ./public /usr/src/app/public
COPY ./src /usr/src/app/src


RUN npm run build

# production environment
FROM nginx:1.15.10-alpine
COPY --from=builder /usr/src/app/build /var/www
COPY ./nginx.conf /etc/nginx/nginx.conf
CMD ["nginx", "-g", "daemon off;"]

和nginx.conf：

server {
    listen 80;

    location / {
        try_files $uri $uri/ /index.html;
        add_header   Cache-Control public;
        expires      1d;
    }

    location /api {
       proxy_set_header X-Forwarded-Host $host;
       proxy_set_header X-Forwarded-Server $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://server:8080/;
    }
}

server {
    listen 80;
    include /etc/nginx/mime.types;
    root /var/www;
    index index.html index.htm;
    location /api {
        resolver 127.0.0.11;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://server:8080$request_uri;
    }
    location / {
        try_files $uri $uri/ =404;
    }
}

---

现在我明白了为什么package.json中的配置不起作用了，但不幸的是，我尝试向代理添加

$request\u uri

，但仍然失败了。奇怪的是，我有一个几乎相同的nginx.conf一直在为我工作。唯一的另一个区别是，我的conf.Long shot的顶部有一个upsteam语句，但可以尝试将它添加到文件``上游服务器{server server server:8080；}``的顶部，然后将proxy_pass行更改为`` proxy_pass```不幸的是，没有工作。每当我调用API时，服务器仍会尝试查看

/usr/share/nginx/html/API/tests

，但失败（没有这样的文件或目录）。我想我一定是在conf文件中遗漏了一些东西。现在我可以明白为什么package.json中的配置不起作用了，但不幸的是，我尝试将

$request\u uri

添加到代理中，但仍然失败。奇怪的是，我有一个几乎相同的nginx.conf一直在为我工作。唯一的另一个区别是，我的conf.Long shot的顶部有一个upsteam语句，但可以尝试将它添加到文件``上游服务器{server server server:8080；}``的顶部，然后将proxy_pass行更改为`` proxy_pass```不幸的是，没有工作。每当我调用API时，服务器仍会尝试查看

/usr/share/nginx/html/API/tests

，但失败（没有这样的文件或目录）。我想我一定是在conf文件中遗漏了什么。有没有一种方法可以使用API服务的名称来引用它，比如在本例中？当我尝试运行dev服务器时，它工作了，但是当我将其硬编码为时，它无法解析名称。有没有方法使用其名称引用API服务，如本例中所示？当我尝试运行dev服务器时，它工作了，但当我将其硬编码到时，它无法解析名称。