nginx怎么部署前端項目

通過以下步驟在 nginx 中部署前端項目：創建項目結構，將代碼分為 public 和 src 目錄。編譯源代碼（可選）。配置 Nginx 服務器塊，指定根目錄和域名。啟用服務器塊。重新加載 Nginx。訪問已部署的項目。

如何在 Nginx 中部署前端項目

步驟 1：創建項目結構

• 創建一個新目錄作為項目根目錄，例如 /var/www/my-app。
• 在根目錄下創建兩個子目錄：public 和 src。
• 將所有前端代碼（html、css、JavaScript）放在 public 目錄中。
• 將源代碼（例如 sass 或 typescript）放在 src 目錄中。

步驟 2：編譯項目（可選）

• 如果您使用 Sass 或 TypeScript 等預處理器，需要編譯它們以生成用于部署的優化代碼。
• 運行必要的命令來編譯源代碼并將其放置在 public 目錄中。

步驟 3：配置 Nginx 服務器塊

立即學習“前端免費學習筆記（深入）”；

• 在 Nginx 配置文件中創建一個新服務器塊，例如 /etc/nginx/sites-available/my-app.conf。
• 將以下內容粘貼到該文件中：

server {     listen 80;     server_name my-app.com;     root /var/www/my-app/public; }

• 將 my-app.com 替換為您的實際域名。
• 如果您的項目使用非標準端口（例如 3000），請更新 listen 指令。

步驟 4：啟用服務器塊

• 運行以下命令啟用新創建的服務器塊：

sudo ln -s /etc/nginx/sites-available/my-app.conf /etc/nginx/sites-enabled/my-app.conf

步驟 5：重新加載 Nginx

• 運行以下命令重新加載 Nginx 以應用更改：

sudo systemctl reload nginx

步驟 6：訪問您的項目

• 在瀏覽器中導航到您的域名（例如 my-app.com）。
• 如果一切配置正確，您應該看到您的前端項目正在運行。

以上就是