nginx 部署注意事项

rabowl在部署上和普通的spa 应用一样所以就不多说了，这里要讲的是如果需要将应用部署在子目录下要怎么配置主项目和子项目。
假如我们要通过域名 http://www.wenjunblog.com/rabowl来访问我们的rabowl项目。

首先，在主项目的.umirc.ts中配置base和publicPath

import { defineConfig } from 'umi';
const isDev = process.env.NODE_ENV === 'development';
const baseUri = '/rabowl'
const baseUrl = isDev ? undefined : baseUri;
const publicPath = isDev ? undefined : `${baseUri}/`;

export default defineConfig({
 ...
  base: baseUrl,
  publicPath,
 qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'App1', // 唯一 id
          entry: isDev
            ? 'http://localhost:8001'
            : `${baseUrl}/webs/app1/index.html`, // html entry
        }
      ],
    },
  },
  ...
});

使用isDev来保证开发和生产环境都能正常访问。

其次，在子项目的.umirc.ts文件中也需要类似配置

import { defineConfig } from 'umi';
const baseUri = '/rabowl'
const isDev = process.env.NODE_ENV === 'development';
const baseUrl = isDev ? undefined : `${baseUri}/app1`;
const publicPath = isDev ? undefined : './';
export default defineConfig({
...
  base: baseUrl,
  publicPath,
  outputPath: '../../dist/webs/app1',
 ...
});

这里baseUrl中的"app1"是在主应用中为子应用配置的路由路径。
事实上在这里是配置的打包路径，在子应用中我们很多时候使用的静态资源都是来自主应用的public文件夹的。所以，最好是在rbutils中写一个工具函数将静态资源路径的获取进行封装，让所有子应用公用。

最后，就是nginx配置了。

以上配置好了之后，nginx配置其实没有什么花哨的了。基本上和普通的spa项目配置子目录方式类似。

#user  nobody;
worker_processes 4;

error_log /app/openresty/nginx/logs/error.log error;
pid /app/openresty/nginx/logs/nginx.pid;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;


events {
 worker_connections 65536 ;
}

http {
 include mime.types;
 default_type application/octet-stream;
 log_format main '$remote_addr|$remote_user|[$time_local]|"$request"'
 '|$status|$request_time|$body_bytes_sent|"$http_referer"'
 '|"$http_user_agent"|"$http_x_forwarded_for"|$upstream_response_time|$upstream_status';
 access_log /app/openresty/nginx/logs/access.log main;
 server_tokens off;
 sendfile on;
 tcp_nopush on;
 tcp_nodelay on;
 client_max_body_size 100m;
 client_header_buffer_size 100m;
 keepalive_timeout 60;
 proxy_buffering off;
 gzip on;

 server {
   listen 80;

   location /rabowl {
     alias /etc/nginx/html/rabowl/;
  #   index index.html;
    try_files $uri  $uri/ /rabowl/index.html;
   }

   # redirect server error pages to the static page /50x.html
   error_page 500 502 503 504 /50x.html;
   location = /50x.html {
     root html;
   }
 }
}

这里要注意的是，你打包后的目录，项目中配置的是 dist。在部署时要重命名为rabowl和子目录名称一致，然后直接放到html目录下。

到这里rabowl框架的开发和使用基本讲解完毕，如果有什么问题，可以在评论区留言，大家一起交流。