如何將NGINX配置爲在同一個盒子上提供JSON API和React.js

我一直在使用phoenix框架研究在Elixir中編寫的JSON API，並且我昨天成功進行了部署。但是，在使用React.js編寫Web前端時，該API並不適用。如何將NGINX配置爲在同一個盒子上提供JSON API和React.js

我正在部署使用酒廠和gatling組合的phoenix API，並且當我使用Postman對其進行測試時，所有東西似乎都在工作。

然後我編輯nginx的配置文件來loook像以下，

的/ etc/nginx的/位點可用/ kegcopr_api

server { 
    listen 80; 
    server_name kegcopr.chrisrjones.com; 
    root /opt/Code/react/kegcopr-frontend/build; 
    index index.html index.htm; 

    access_log /home/deploy/deployments/kegcopr_api/nginx.access.log; 
    error_log /home/deploy/deployments/kegcopr_api/nginx.error.log; 

    location/{ 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header Host $http_host; 
    proxy_redirect off; 
    proxy_pass http://localhost:33725; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    } 

}

我然後創建.env文件中的根React.js項目與以下行，

REACT_APP_API_URL=http://localhost:33725/api

任何幫助如何獲得此配置將gre非常感謝。

UPDATE 我改變了.env文件，

REACT_APP_API_URL=http://kegcopr.chrisrjones.com/api

，跑到下面的命令，

npm run build

但我仍然沒有看到在瀏覽器中React.js前端顯示。

來源

2017-05-12 Chris

究竟是什麼不適用於此？另外，假設這個nginx conf代理運行在端口33725上的Phoenix，不應該將'REACT_APP_API_URL'設爲'http：// kegcopr.chrisrjones.com/api'？ – Dogbert

@Dogbert感謝您指出了這一點。截至目前，React.js前端並未在瀏覽器中顯示。 – Chris

你可以試試這個：https：//gist.github.com/101e81da99416debbe0849be51afacf4？我使用類似的東西來使用nginx提供靜態文件，並將其他請求代理到Phoenix。 – Dogbert

您已設置root目錄，但您無條件地將所有請求發送至localhost:33725。如果你想從root目錄服務靜態文件和所有其他請求傳遞到proxy_pass，你可以使用try_files這樣的：

location/{ 
    try_files $uri @proxy; 
} 

location @proxy { 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header Host $http_host; 
    proxy_redirect off; 
    proxy_pass http://localhost:33725; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
}

try_files將嘗試使用相同的名稱作爲URL來定位內root文件，如果找不到文件，它會將請求傳遞給@proxy，該請求會將其傳遞給運行在localhost:33725上的Phoenix應用程序。

來源

2017-05-12 18:57:33 Dogbert

如何將NGINX配置爲在同一個盒子上提供JSON API和React.js

回答

相關問題