---
order: 2
title: 部署
type: 構建和部署
---
Pro 默認提供了 mock 數據，但是在 build 之后 mock 數據將不再起作用。如果你仍想使用這些數據來搭建演示站點，你可以通過 [umi-serve](https://www.npmjs.com/package/umi-serve) 來啟動一個 express 服務。這個服務與 mock 的數據是相同的。
## 部署
如果你只是簡單的部署，你只需要將整個 dist 文件夾復制到你的 CDN 和靜態服務器。index.html 應該是你的服務器入口。
## 前端路由與服務端的結合
> 如果你遇到 `https://cdn.com/users/123` 刷新后 404 的問題，你需要按照這個章節進行處理。
Ant Design Pro 使用的 Umi 支持兩種路由方式：`browserHistory` 和 `hashHistory`。
可以在 `config/config.ts` 中進行配置選擇用哪個方式：
```javascript
export default {
history: '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`。
## 部署到非根目錄
部署在非根目錄時一種常見的需求，比如部署在 gitHub pages 中。接下來我們假設我們要部署項目到 `${host}/admin` 中。首先我們需要在 `config/config.ts` 中配置 [base](https://umijs.org/zh/config/#base),`base` 是 react-router 的前綴。我們需要將 base 配置為 `admin`, 如果我們還需要將其部署到 `/admin` 目錄中，我們還需要設置 [`publicPath`](https://umijs.org/zh/config/#publicpath)。設置完之后是這樣的：
```javascript
export default {
// ... some config
base: "/admin/",
publicPath: "/admin/",
};
```
接下來我們就可以在 `${host}/admin` 中訪問我們的靜態文件了。值得注意的是，在 dev 模式下 url 路徑同樣也會被修改。
## 部署到不同的平臺
### 使用 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;
}
}
```
### 使用 spring boot
Spring Boot 是使用最多的 java 框架，只需要簡單的幾步就可以與 Ant Design Pro 進行整合。
首先運行 build
```
$ npm run build
```
然后將編譯之后的文件復制到 spring boot 項目的 `/src/main/resources/static` 目錄下。
重新啟動項目，訪問 `http://localhost:8080/` 就可以看到效果。
為了方便做整合，最好使用 hash 路由。如果你想使用 browserHistory ，可以創建一個 controller ，并添加如下代碼：
```java
@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){
return apiProxy.proxy(request, reponse);
}
@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
return "index"
}
```
> 注意 pro 并沒有提供 java 的 api 接口實現，如果只是為了預覽 demo，可以使用反向代理到 `https://preview.pro.ant.design`。
### 使用 express
[express](http://expressjs.com/) 的例子
```
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
```
### 使用 egg
[egg](https://eggjs.org/) 的例子
```
// controller
exports.index = function* () {
yield this.render('App.jsx', {
context: {
user: this.session.user,
},
});
};
// router
app.get('home', '/*', 'home.index');
```
關于路由更多可以參看 [Umi 的路由文檔](https://umijs.org/zh/guide/router.html) 。
