umi 非根路径部署umi 4.0 通过非根路径部署多个前端服务在同一域名下，可以实现资源的高效利用和管理，适用于微前端

名词解释

在umi 项目部署时需要了解一下概念

nginx 相关

根路径 (Root Path)

定义: 根路径是指服务器上文件系统的起始点。在 Web 环境中，根路径通常是指 Web 服务器提供的文档根目录。
示例:
- 在 Nginx 或 Apache 的配置中，根路径通过 root 指令定义。例如：
```
root /var/www/html;  # 这里 /var/www/html 是根路径
```
- 当用户访问 http://example.com/index.html 时，服务器会在 /var/www/html/index.html 寻找该文件。
特点:
- 所有 URL 默认从根路径开始解析。
- 根路径通常用作服务器的主要入口。

非根路径 (Non-Root Path)

定义: 非根路径是指相对于根路径的其他路径。它通常指向根路径下的子目录或文件。
示例:
- 如果根路径为 /var/www/html，那么 /var/www/html/myapp/about.html 是一个非根路径。
- 访问 http://example.com/myapp/about.html 的请求会被解析为在根路径下查找 myapp 文件夹下的about.html 文件。
特点:
- 非根路径可以是任何有效的文件或目录路径，通常用于组织网站内容。
- 可以包含多级目录，例如 /var/www/html/myapp/item1.html。

总结

根路径: 服务器的起始点，所有请求都从这里开始解析。
非根路径: 相对于根路径的其他目录或文件路径，可以是根路径下的子目录或文件。

图文说明

nginx 上的html 目录（默认为根路径）:
html 目录中的根文件和非根路径:

umi 相关

在 UMI 中，publicPath 和 base 是两个重要的配置项，用于控制静态资源的路径和应用的基础路径。以下是它们的详细说明：

1. `publicPath`

定义: publicPath 用于指定应用中静态资源（如 JavaScript、CSS、图片等）的公共路径。它告诉浏览器从哪里加载这些资源。
类型: 字符串

示例:

export default {
  publicPath: '/static/', // 静态资源的公共路径
};

使用场景:
- 当你将应用部署在 CDN 或特定子路径时，设置 publicPath 可以确保浏览器正确加载静态资源。
- 例如，如果你的静态资源在 https://cdn.example.com/static/ 下，publicPath 应设置为 https://cdn.example.com/static/。

2. `base`

定义: base 用于指定应用的基础路径。它影响路由的解析和应用的访问路径。
类型: 字符串

示例:

export default {
  base: '/myapp/', // 应用的基本路径
};

使用场景:
- 当你的应用部署在特定的子路径下时，例如 https://example.com/myapp/，你需要将 base 设置为 /myapp/，这样 UMI 的路由才能正确解析。
- 这会影响到所有路由的生成和访问，确保用户在访问时能够正确地找到资源。

3. `outputPath`

定义: outputPath 用于指定 UMI 构建生成的文件存放的目录。构建过程会将所有生成的静态文件（如 HTML、JavaScript、CSS 等）输出到该目录。
类型: 字符串
默认值: 通常默认为 dist，即生成的文件会放在项目根目录下的 dist 文件夹中。

默认示例:

export default {
  outputPath: 'dist', // 将构建输出到 build 目录
};

非默认值: dist/myapp

 export default {
 outputPath: 'dist/myapp', // 将构建输出到 dist 下的myapp 目录  };

效果:
- 当你运行构建命令（如 npm run build）时，UMI 会在项目根目录下创建 dist/myapp 目录，并将构建生成的文件存放在此目录中。
- 例如，构建后可能会生成如下文件结构： dist/ └─ myapp/ ├─ index.html ├─ main.js ├─ styles.css └─ other-assets/
使用场景:
- 当你希望将构建输出到一个特定目录时，可以通过设置 outputPath 来实现。这在需要将构建文件与其他文件分开管理时特别有用。
- 例如，在 CI/CD 环境中，你可能想将输出目录设置为一个特定的位置，以便于部署。

访问输出文件

在构建完成后，构建生成的文件将位于你指定的 outputPath 目录中。你可以根据需要进行进一步的处理或部署。

总结

publicPath: 指定静态资源的加载路径，通常用于 CDN 或特定路径的部署。
base: 指定应用的基础路径，影响路由的解析，适用于应用部署在子路径的场景。
outputPath: 指定 UMI 构建输出的目录，默认为 dist，可以自定义为其他路径，以便于管理和部署构建文件。

非根路径部署实战

示例配置--使用outputPath

假设你希望将应用部署在 https://example.com/myapp/，并将构建输出到 dist/myapp 目录。你的配置文件（通常是 config/config.ts 或 .umirc.ts）可以如下设置：

// config/config.ts
export default {
  publicPath: '/myapp/', // 指定静态资源的公共路径
  base: '/myapp/',       // 指定应用的基础路径
  outputPath: 'dist/myapp', // 指定构建输出目录

  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/about', component: '@/pages/about' },
    { path: '/contact', component: '@/pages/contact/index' },
  ],
};

注意事项

复制dist 目录下的内容到nginx 根路径下，此时dist 目录下有文件夹，并且文件夹的名称为域名的非根路径

示例配置--不使用outputPath

// config/config.ts
export default {
  publicPath: '/myapp/', // 指定静态资源的公共路径
  base: '/myapp/',       // 指定应用的基础路径
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/about', component: '@/pages/about' },
    { path: '/contact', component: '@/pages/contact/index' },
  ],
};

注意事项

在nginx 根路径下创建一个文件夹（文件夹名称为myapp 即非根路径的路径名称）

复制dist 目录下的内容到nginx 根路径下，此时dist 目录下都是静态文件，非根路径的文件夹名称说明：因为构建产物没有指定非根路径的名称，所以需要在nginx 非根路径下创建一个文件夹

nginx 配置

server {
    listen       80;
    server_name  _;

    add_header Access-Control-Allow-Origin '*';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-             Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    location / {
        expires 0;
        root html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
     location ^~ /myapp {
          alias html/myapp;
          index index.html;
          try_files $uri $uri/ /myapp/index.html;
      }
}

总结

非根路径部署的确适用于不同的前端服务共享同一个域名的场景。这种配置可以帮助你在同一个域名下托管多个应用或服务，每个应用可以通过不同的路径进行访问。以下是一些适用场景和配置建议：

适用场景

多个微前端应用:
- 在微前端架构中，你可以将多个独立开发和部署的前端应用托管在同一个域名下，每个应用通过不同路径进行访问。例如：
  - https://example.com/app1
  - https://example.com/app2
版本管理:
- 在同一域名下部署多个版本的应用，便于用户进行版本切换和测试。例如：
  - https://example.com/v1
  - https://example.com/v2
特性发布:
- 可以将新特性或实验性功能放在特定路径下供少数用户访问。例如：
  - https://example.com/new-feature
不同产品线:
- 如果同一公司有多个产品线，可以通过不同路径来区分。例如：
  - https://example.com/product-a
  - https://example.com/product-b

Nginx 配置示例

以下是一个简单的 Nginx 配置示例，适用于上述场景：

server {
    listen 80;
    server_name example.com;

    location /app1/ {
        proxy_pass http://localhost:3001;  # 将请求转发到 app1 服务
    }

    location /app2/ {
        proxy_pass http://localhost:3002;  # 将请求转发到 app2 服务
    }

    location /v1/ {
        proxy_pass http://localhost:3003;  # 将请求转发到 v1 服务
    }

    location /v2/ {
        proxy_pass http://localhost:3004;  # 将请求转发到 v2 服务
    }
}

前端配置

在前端应用中，你需要确保正确配置 publicPath 和 base，使得静态资源和路由能够正确工作。例如，对于 app1 的 UMI 配置：

// config/config.ts
export default {
  publicPath: '/app1/', // 静态资源的公共路径
  base: '/app1/',       // 应用的基础路径
  outputPath: 'dist/app1', // 构建输出目录
};

总结

通过非根路径部署多个前端服务在同一域名下，可以实现资源的高效利用和管理，适用于微前端架构、版本管理和特性发布等场景。确保 Nginx 配置和前端应用的路径设置一致，以实现无缝访问。

umi 非根路径部署