為Vue應用程序前端和node.js后端配置Nginx

Question

我一直在尋找這個答案幾個月，卻一直無法解決。 我使用nginx作為我的Web服務器，並使用node.js作為我的后端api和vue作為使用webpack的主要前端網頁。 我希望能夠通過訪問http：// ip進入我的Vue頁面，然后通過訪問http：// ip / api來訪問api服務。 我沒有設置域名，所以我使用IP地址作為URL。

到目前為止，我已經構建了Vue應用程序，它位於/ var / www / html / Web / dist文件夾中，如果您訪問http：// ip url，但它可以工作，但是我無法訪問我的node.js API，它可以工作。 我的node.js服務器在本地主機端口3000上運行。我的nginx配置看起來像這樣：

server {
        listen 80;

        root /var/www/html/Web/dist;
}

server {

listen 80;

  location /api/ {

        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

  }

}

Answer 1

您正在復制服務器配置。 只需設置一個服務器屬性即可：

server {
  listen 80;    
  root /var/www/html/Web/dist;
  location /api/ {    
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

  }
}

這意味着：

• 偵聽端口80上所有IP的所有請求
• 從根目錄/var/www/html/Web/dist;評估相對路徑/var/www/html/Web/dist;
• 如果網址中有匹配的'/ api /'，請將其傳遞給localhost：3000

現在應該可以正常工作了