【構建和部署】2.3-部署

Pro 默認提供了 mock 數據，但是在 build 之後 mock 數據將不再起作用。如果你仍想使用這些數據來搭建演示站點，你可以通過 umi-serve 來啓動一個 express 服務。這個服務與 mock 的數據是相同的。

如果你只是簡單的部署，你只需要將整個 dist 文件夾複製到你的 CDN 或靜態服務器。index.html 應該是你的服務器入口。

1. 前端路由與服務端的結合

如果你遇到 https://cdn.com/users/123 刷新後 404 的問題，你需要按照這個章節進行處理。

Ant Design Pro 使用的 Umi 支持兩種路由方式：browserHistory 和 hashHistory。

可以在 config/config.ts 中進行配置選擇用哪個方式：

export default {
  history: { type: 'hash' }, // 默認是 browser
};

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。

2. 部署到非根目錄

部署在非根目錄時一種常見的需求，比如部署在 GitHub pages 中。接下來我們假設我們要部署項目到 ${host}/admin 中。首先我們需要在 config/config.ts 中配置 base，base 是 react-router 的前綴。我們需要將 base 配置爲 admin，如果我們還需要將其部署到 /admin 目錄中，我們還需要設置 publicPath。設置完之後是這樣的：

export default {
  // ... some config
  base: '/admin/',
  publicPath: '/admin/',
};

接下來我們就可以在 ${host}/admin 中訪問我們的靜態文件了。值得注意的是，在 dev 模式下 url 路徑同樣也會被修改。

3. 部署到不同的平臺

3.1 使用 nginx

nginx 作爲最流行的 web 容器之一，配置和使用相當簡單，只要簡單的配置就能擁有高性能和高可用。推薦使用 nginx 託管。示例配置如下：

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;

    location / {
        # 用於配合 browserHistory使用
        try_files $uri $uri/ /index.html;

        # 如果有資源，建議使用 https + http2，配合按需加載可以獲得更好的體驗
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;

    }
    location /api {
        proxy_pass https://ant-design-pro.netlify.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

server {
  # 如果有資源，建議使用 https + http2，配合按需加載可以獲得更好的體驗
  listen 443 ssl http2 default_server;

  # 證書的公私鑰
  ssl_certificate /path/to/public.crt;
  ssl_certificate_key /path/to/private.key;

  location / {
        # 用於配合 browserHistory使用
        try_files $uri $uri/ /index.html;

  }
  location /api { 
      proxy_pass https://ant-design-pro.netlify.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }
}

3.2 使用 spring boot

Spring Boot 是使用最多的 java 框架，只需要簡單的幾步就可以與 Ant Design Pro 進行整合。

首先運行 build：

➜ npm run build

然後將編譯之後的文件複製到 spring boot 項目的 /src/main/resources/static 目錄下。

重新啓動項目，訪問 http://localhost:8080/ 就可以看到效果。

爲了方便做整合，最好使用 hash 路由。如果你想使用 browserHistory ，可以創建一個 controller ，並添加如下代碼：

@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){
    return apiProxy.proxy(request, response);
}

@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
    return "index"
}

注意：pro 並沒有提供 java 的 api 接口實現，如果只是爲了預覽 demo，可以使用反向代理到 https://preview.pro.ant.design。

3.3 使用 express

express 的例子

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

3.4 使用 egg

egg 的例子

// controller
exports.index = function* () {
  yield this.render('App.jsx', {
    context: {
      user: this.session.user,
    },
  });
};

// router
app.get('home', '/*', 'home.index');

關於路由更多可以參看 Umi 的路由文檔 。