怎样将 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;
  }
}