☰

Nginx + Flask + React 域路径匹配

tag-icon • tag-icon nginx
Nginx + Flask + React 域路径匹配

我正在使用 nginx 和 gunicorn/flask 以及单页反应应用程序。

我正在使用 react-router 进行导航，为了使其工作，我在 nginx 配置文件中添加了以下行：

location / {
    try_files $uri $uri/ /index.html;

    proxy_pass http://localhost:8006;
    ....

因此，这解决了我致电时遇到的问题https://www.my-domain.com/url-path。

但现在我遇到了一个新问题。

因为现在，原来的实际 url 路径不再起作用。

我的意思是我有一个可在 url-path 下使用的后端 API https://www.my-domain.com/data_service。

此钩子用于让 React 应用程序与后端进行通信、加载/发送 json 等。

在当前配置下，这不再有效。所以我现在猜测我需要为这个 url-path 添加一个例外。

我尝试了以下内容并添加：

location /data_service {
    try_files $uri/data_service /data_service;
}

到我的 nginx 配置。以及以下内容：

location /data_service {
    alias /data_service;
}

但它不起作用，却导致 500 错误或 404。

有人知道如何为这个特定的 url 路径添加例外吗？

答案1

好的，我通过猜测和稍微玩了一下成功了：

您只需要第二部分来配置您想要实现的路径。

因此，就我而言，我必须复制完整的部分：

location / {
    try_files $uri $uri/ /index.html;

    proxy_pass http://localhost:8006;
    include /etc/nginx/proxy_params;
    proxy_redirect off;
    # Max file size allowed for upload by user. Here 1M = 1 Megabyte
    client_max_body_size 1M;
    ... other configuration param for / 
}

并将其第二次添加到同一个 nginx 配置文件中：

location /data_service {
    proxy_pass http://localhost:8006;
    include /etc/nginx/proxy_params;
    proxy_redirect off;
    # Max file size allowed for upload by user. Here 1M = 1 Megabyte
    client_max_body_size 1M;
    ... other config params...
}

如您所见，不同之处在于现在有一个单独的配置，urlhttps://www.my-domain.com/data_service将不会检查try_files指令。

注意：这些条目都在同一个 nginx 配置文件中，就像这样，位于/etc/nginx/sites-enabledUbuntu 上。完整的配置文件现在如下所示：

server {
    listen 80;
    server_name mydomain.com www.mydomain.com;

    location /robots.txt {
        alias /path/to/flask-backend/static/robots.txt;
    }

    location /static {
        alias /path/to/flask-backend/static/static;
    }

    location /data_service {
        proxy_pass http://localhost:8006;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
        # Max file size allowed for upload by user. Here 1M = 1 Megabyte
        client_max_body_size 1M;

        # prevents warning messages when setting up let's encrypt
        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128;

        # Enable Websocket by adding these two options
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location / {
        try_files $uri $uri/ /index.html;

        proxy_pass http://localhost:8006;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
        # Max file size allowed for upload by user. Here 1M = 1 Megabyte
        client_max_body_size 1M;

        # prevents warning messages when setting up let's encrypt
        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128;

        # Enable Websocket by adding these two options
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

相关内容