怎樣將 Angular 項目部署到 Nginx 子目錄中

最近更新時間 2020-11-27 19:50:37

項目開發完成後，如果要把項目部署到 Nginx 的二級目錄，需要進行一些設置才能找到資源文件。下面用一個新建的 Welcome 項目部署到 Nginx 的 /admin 子目錄下來講解部署過程。

創建項目

創建一個 Welcome 項目，如果是部署到根目錄，直接使用 ng build --prod 編譯後部署到 Nginx ，修改 rewrite 規則即可。

ng new ng-build

編譯生成環境項目

ng build --prod

如果把上面生成的項目直接複製到根目錄即可成功部署項目，如果是需要路由的項目需要配置 Nginx 的 rewrite。上面編譯的項目放到二級目錄 /admin 下面頁面會出現空白，錯誤提示找不到 runtime 和 main 等文件。

可通過下面的方法解決二級目錄問題。

修改 HTML base

修改編譯後 index.html 文件的 base 為 /admin/ 如下所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgBuild</title>
  <base href="/admin/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

編譯時增加參數

編譯時增加 --base-href 參數，指定需要部署的目錄。

ng build --base-href /admin/ --prod

修改 angular.json

在 angular.json 文件中找到 production 下面的 fileReplacements，在同級後面添加 baseHref 參數，表示部署時的二級目錄，如下所示：

...
"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "baseHref": "/admin/",
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  ...

以上三種方法都可以完成 Nginx 二級目錄的部署。

配置 Nginx

如果 Angular 項目帶有 Router（路由）功能，需要設置 Nginx 的 rewrite 如下所示。

server {
  root /html;
  location /admin/ {
    try_files $uri $uri/ /index.html;
  }
}