部署

前端路由与服务端的结合

如果你遇到 https://cdn.com/users/123 刷新后 404 的问题,你需要按照这个章节进行处理。

Ant Design Pro 使用的 Umi 支持两种路由方式:browserHistoryhashHistory

可以在 config/config.js 中进行配置选择用哪个方式:

  1. export default {
  2. history: 'hash', // 默认是 browser
  3. };

hashHistory 使用如 https://cdn.com/#/users/123 这样的 URL,取井号后面的字符作为路径。browserHistory 则直接使用 https://cdn.com/users/123 这样的 URL。使用 hashHistory 时浏览器访问到的始终都是根目录下 index.html。使用 browserHistory 则需要服务器做好处理 URL 的准备,处理应用启动最初的 / 这样的请求应该没问题,但当用户来回跳转并在 /users/123 刷新时,服务器就会收到来自 /users/123 的请求,这时你需要配置服务器能处理这个 URL 返回正确的 index.html。强烈推荐使用默认的 browserHistory

强烈推荐使用默认的 browserHistory.

使用 nginx

nginx 作为最流行的 web 容器之一,配置和使用相当简单,只要简单的配置就能拥有高性能和高可用。推荐使用 nginx 托管。示例配置如下:

  1. server {
  2. listen 80;
  3. # gzip config
  4. gzip on;
  5. gzip_min_length 1k;
  6. gzip_comp_level 9;
  7. gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  8. gzip_vary on;
  9. gzip_disable "MSIE [1-6]\.";
  10. root /usr/share/nginx/html;
  11. location / {
  12. # 用于配合 browserHistory使用
  13. try_files $uri $uri/ /index.html;
  14. # 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
  15. # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
  16. }
  17. location /api {
  18. proxy_pass https://preview.pro.ant.design;
  19. proxy_set_header X-Forwarded-Proto $scheme;
  20. proxy_set_header Host $http_host;
  21. proxy_set_header X-Real-IP $remote_addr;
  22. }
  23. }
  24. server {
  25. # 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
  26. listen 443 ssl http2 default_server;
  27. # 证书的公私钥
  28. ssl_certificate /path/to/public.crt;
  29. ssl_certificate_key /path/to/private.key;
  30. location / {
  31. # 用于配合 browserHistory使用
  32. try_files $uri $uri/ /index.html;
  33. }
  34. location /api {
  35. proxy_pass https://preview.pro.ant.design;
  36. proxy_set_header X-Forwarded-Proto $scheme;
  37. proxy_set_header Host $http_host;
  38. proxy_set_header X-Real-IP $remote_addr;
  39. }
  40. }

使用 spring boot

Spring Boot 是使用最多的 java 框架,只需要简单的几步就可以与 Ant Design Pro 进行整合。

首先运行 build

  1. $ npm run build

然后将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下。

重新启动项目,访问 http://localhost:8080/ 就可以看到效果。

为了方便做整合,最好使用 hash 路由。如果你想使用 browserHistory ,可以创建一个 controller ,并添加如下代码:

  1. @RequestMapping("/api/**")
  2. public ApiResult api(HttpServletRequest request, HttpServletResponse response){
  3. return apiProxy.proxy(request, reponse);
  4. }
  5. @RequestMapping(value="/**", method=HTTPMethod.GET)
  6. public String index(){
  7. return "index"
  8. }

注意 pro 并没有提供 java 的 api 接口实现,如果只是为了预览 demo,可以使用反向代理到 https://preview.pro.ant.design

使用 express

express 的例子

  1. app.use(express.static(path.join(__dirname, 'build')));
  2. app.get('/*', function (req, res) {
  3. res.sendFile(path.join(__dirname, 'build', 'index.html'));
  4. });

使用 egg

egg 的例子

  1. // controller
  2. exports.index = function* () {
  3. yield this.render('App.jsx', {
  4. context: {
  5. user: this.session.user,
  6. },
  7. });
  8. };
  9. // router
  10. app.get('home', '/*', 'home.index');

关于路由更多可以参看 Umi 的路由文档