Nginx是一個流行的web服務器，用于提供web應用程序的靜態資源(客戶端源)。我將解釋如何將Nginx設置為靜態內容資源web服務器，以及如何將它配置為linux系統上的反向代理(連接客戶機和后端)。基本上如何設置前端+后端與Nginx在Linux上。如果你:

希望將您的Angular/React/Vue或任何其他基于前端的框架應用程序放在Nginx上;
希望將Nginx上的客戶端與后端連接(如Node.js或JAVA App);
要將域調用委托給內部web服務器，例如在其他端口(代理)上工作;

在Nginx上的前端應用

如果您使用任何框架(如Vue、Angular或React)開發前端應用程序，那么您最終將生成一個產品包——準備部署在web服務器上的文件(html、js、css)。在大多數框架中，運行生產構建將類似于npm構建，或者例如在Vue: Quasar構建中使用Quasar。您的生產文件應該在項目文件夾中生成的dest文件夾中。

在destfolder中生成的文件(前端應用程序)可以放在web服務器上，比如Apache或Nginx。

我假設您已經在目標機器上安裝了Nginx(就像您的服務器機器一樣)。

Nginx前端應用配置

Nginx配置可以在/etc/ Nginx下找到主配置文件名為nginx.conf。取決于你的系統配置可以有一點不同:

nginx.conf文件中的整個配置(例如Arch linux)
nginx中的主配置。conf，每個域分割域配置(就像在Ubuntu中，域配置可以在insitesavailable文件夾中找到)

假設您的域名是domain.com。您希望在http://domain.com(默認80端口)下設置前端應用程序。

nginx的配置如下:

server {
server_name domain.com;
location / {
root /usr/share/nginx/html/domain;
try_files $uri $uri/ /index.html;
}
}

如果您的配置基于nginx.conf (例如Arch linux):

在nginx.conf的http部分粘貼上面的配置

如果你使用Ubuntu:

在/etc/nginx/sites-available中創建文件domain.com(touch domain.com)
將上面的配置粘貼到文件中
轉到/etc/nginx/sites-enabled并調用:sudo ln -s /etc/nginx/sites-available/domain.com /etc/nginx/sites-enabled/

下一步是向nginx resources文件夾提供前端應用程序內容。首先構建前端應用程序(例如，npm構建取決于您的設置)。然后將前端應用程序dist文件夾中創建的每個文件/文件夾移動到/usr/share/nginx/html/domain(必須在/usr/share/nginx/html下創建域文件夾)。

最后一步:sudo systemctl restart nginx.service

現在訪問http://domain.com應該呈現前端應用程序。