xiubug / react-antd

基于react + redux + immutable + less + ES6/7 + webpack2.0 + fetch + react-router + antd实现的SPA后台管理系统模板

Home Page:http://antd.sosout.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

hi ,求教 部署到服务器后 是如何访问的。

winnerliu opened this issue · comments

我执行了yarn run dist 后,将antd下的文件拷贝到tomcat服务器后,该怎么访问呢 ,我这样http://localhost:8080/antd/index.html 不行 空白了,thx.

@winnerliu 单页面应用应该放到nginx或者apache、tomcat等web代理服务器中,同时要根据 自己服务器的项目路径 更改react的路由地址。
如果说项目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'。
如果说项目是直接跟在域名后面的一个子目录中的,比如:http://www.sosout.com/children ,根路由就是 '/children ',不能直接访问index.html。

以配置Nginx为例,配置过程大致如下:
(假设:
1、项目文件目录: /mnt/html/reactAntd(reactAntd目录下的文件就是执行了yarn run dist 后生成的antd目录下的文件)
2、访问域名:antd.sosout.com
进入nginx.conf新增如下配置:
`server {
listen 80;
server_name antd.sosout.com;
root /mnt/html/reactAntd;
index index.html;
location ~ ^/favicon.ico$ {
root /mnt/html/reactAntd;
}

location / {
    try_files $uri $uri/ /index.html;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto  $scheme;
}
access_log  /mnt/logs/nginx/access.log  main;

}
注意事项: 1、配置域名的话,需要80端口,成功后,只要访问域名即可访问的项目 2、如果你使用了react-router的browserHistory 模式,在nginx配置还需要重写路由:server {
listen 80;
server_name antd.sosout.com;
root /mnt/html/reactAntd;
index index.html;
location ~ ^/favicon.ico$ {
root /mnt/html/reactAntd;
}

location / {
    try_files $uri $uri/ @fallback;
    index index.html;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto  $scheme;
}
location @fallback {
    rewrite ^.*$ /index.html break;
}
access_log  /mnt/logs/nginx/access.log  main;

}`
为什么要重写路由?因为我们的项目只有一个根入口,当输入类似/home的url时,如果找不到对应的页面,nginx会尝试加载index.html,这是通过react-router就能正确的匹配我们输入的/home路由,从而显示正确的home页面,如果browserHistory模式的项目没有配置上述内容,会出现404的情况。

@sosout 明白了 谢谢。

@winnerliu 明白就好,不懂得地方欢迎*扰。