在 NGINX 上託管 Angular 應用程式的終極指南

在 nginx 伺服器上託管 angular 應用程式可以增強效能，提供更好的安全性，併為生產環境提供更輕鬆的配置。以下是在 nginx 上部署 angular 應用程式的分步指南。先決條件已安裝 nginx：確保您的伺服器上安裝了 nginx。您可以使用以下命令將其安裝在基於 linux 的系統上：狂歡sudo apt updatesudo apt install nginxangular 應用程式：確保您的 angular 應用程式已準備好用於生產並使用以下命令進行構建：狂歡ng build --prod訪問伺服器：您應該具有 ssh 訪問許可權或直接訪問要部署應用程式的伺服器。第 1 步：構建您的 angular 應用程式在 angular 專案目錄中執行以下命令來構建用於生產的應用程式：狂歡ng build --prod此命令將在專案的 dist 資料夾中生成生產就緒檔案。第 2 步：將檔案複製到伺服器您需要將 angular dist 資料夾的內容複製到您的伺服器。您可以使用 scp 或 rsync。假設您的 dist 資料夾名為 dist/my-angular-app，請執行：狂歡scp -r dist/my-angular-app/* 使用者名稱@your_server_ip:/var/www/html/將 username 替換為您的伺服器使用者名稱，將 your_server_ip 替換為您伺服器的 ip 地址。第 3 步：配置 nginx檔案位於伺服器上後，您需要配置 nginx 來為您的 angular 應用程式提供服務。為您的應用程式建立一個新的配置檔案：狂歡sudo nano /etc/nginx/sites-available/my-angular-app將以下配置插入檔案中：nginx伺服器{ 聽80； 伺服器名稱 your_domain.com； # 替換為您的域名或伺服器 iplocation / { root /var/www/html; # Path to the folder where your files are located try_files $uri $uri/ /index.html; # Fallback to index.html for Angular routing}error_page 404 /index.html; # Handle 404 errors by redirecting to index.html登入後複製}儲存並退出編輯器。第 4 步：啟用配置建立符號連結以啟用站點配置：狂歡sudo ln -s /etc/nginx/sites-available/my-angular-app /etc/nginx/sites-enabled/第 5 步：測試您的 nginx 配置在重新啟動 nginx 之前，您應該測試配置以確保沒有語法錯誤：狂歡sudo nginx -t如果一切正確，您將看到一條訊息，表明測試成功。第 6 步：重新啟動 nginx重新啟動 nginx 以應用更改：狂歡sudo systemctl 重新啟動 nginx第 7 步：訪問您的應用程式現在，您的 angular 應用程式應該可以透過您的域或公共 ip 地址訪問。開啟網路瀏覽器並訪問您的域（例如，http://your_domain.com）。其他提示ssl 配置：建議設定 ssl 以確保安全訪問。您可以使用 let's encrypt 獲取免費的 ssl 證書。錯誤處理：實施適當的錯誤處理來管理意外情況。快取：考慮在 nginx 中配置快取以獲得更好的效能。 以上就是在 NGINX 上託管 Angular 應用程式的終極指南的詳細內容，更多請關注我的其它相關文章！