上线React+Mobx+Antd + build + Nginx 经历

首先非常开心，自己找遍解决方案，终于来到终点：http://lsgood.top 我的第一个网页。
该网页由爬虫爬了一个二次元图片的网站，然后一个Typescript koa 后台提供数据，再由Reactjs 网页展现。

首先遇到的第一个大山：centos 装mongodb

先使用yum 安装mongodb，然后一直报”no package is avialable. nothing to do”, 我是mongodb 官网教程，建了一个.repo 来整的，然后又学会去redhat 的源找找看看。都在的，可以的呀。

然后找到$ getconf LONG_BIT终于得知我的是32位。那就说明yum 的那些源都是x86 ，查看一番：果然。屁颠屁颠去看了有哪些32位mongodb 的我可以用。

google 找到一个csdn 里面有个2.x 版本的，装上去果然可以启动，把我开心的呀。然后服务器用mongoose 2.x 版本及以下都不可用。一番寻找，找到
CSDN centos用yum安装mongodb及 32位linux（centos）下mongoDB的安装的文章。采用wget 下载相应的版本。前往官网工具下载区，一开始也不明白哪个我真的可以用，最后终于找到排到最后一个的3.0x 版本的真的真的是32bit。

快速放到服务器启动起来的时候，真的开心啊。

然而一心以为后面React 网页yarn build 应该很简单，没想到又是一番挫折。

既然数据好了，赶紧打包我的第一个React 应用。yarn build 很快！

然后配置一下Nginx，把build 出来的文件拖到/root/Work/web/girl 目录下,Nginx 如下配置

server {
    listen 80 default_server;
    server_name www.lsgood.top lsgood.top;

    location /girl/ {
        root /root/Work/web/;
        index index.html index.htm;
    }
}

首先出来一个问题：由于不是放在Nginx 根目录，是http://lsgood.top/girl 这样的目录，导致内部css 资源、static 资源找不到根路由，找的是http://lsgood.top/xxxstaticxxx 的目录资源，那就在package.json 加上一个field homepage: "." 。

这个解决之后出现一个花费我1.5 天寻找是React 内部问题，还是Nginx 没有配置好的问题：Nginx 配置路由(不同根目录)要么出现Uncaught SyntaxError: Unexpected token < ；要么整个页面就是空白，同时查看右键 - 检查 - Sources 将我的React 程序目录源代码全部展示出来了。

说明并没有启动我对应的index.html。我不明白为什么会出现这样，期间问了我以前同事，但还是没有答案（毕竟突然给他看，不明白里面所写，也忙，然后没有解出来）。

然后1天过去后，我让现在后台帮忙，放到可以运行的网页那边看看。一开始怕他们麻烦，推荐他说，直接放文件名后面，就不用建立子域名。然后还是失败！

这样我还是不知道是哪边的问题，我又又又google 找了下，有说不要放在http://host/girl/ 子目录，放到Nginx根目录。我赶紧让后台帮忙再试一波！

果然！成功，不过index 首页是OK，但是路由却进不去了。首页OK，路由有问题，说明React 应用没问题，Nginx 配置错误了，同时React 里面的路由也出错了。

我又双叒叕google，找到这篇关于react 在打包后：“找不到资源路径”的问题、部署到服务器二级目录 “打开为空白” 的问题这里说到一个很重点的信息：browserRouter/PUBLIC_URL/NGINX 这么几个重点词语。我还真用到了browserRouter，问题也确实是访问时页面空白，没有报错 这种情况。

那我就采用他的办法（花了一个下午加加班到晚上8点多）：

1. React 在build 时:
$ PUBLIC_URL=http://lsgood.top/ yarn build
2. 将build 的子文件全部放到 /var/www/ 下面
3. Nginx conf 配置：（参考 https://gkedge.gitbooks.io/react-router-in-the-real/content/nginx.html）
server {
    listen 80 default_server;
    server_name www.lsgood.top lsgood.top;

    root /var/www;
    index index.html index.htm;      
    # Any route that doesn't have a file extension (e.g. /devices)
    location ~ ^/favicon\.ico$ {
        root /var/www;
    }
    location / {
        try_files $uri $uri/ /index.html;
        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;
    }
    location /girlS/ {
        proxy_pass http://127.0.0.1:8000/girl.v1/;
    }

    location /popcircle/ {
        root /root/Work/game/;
    }
}

完美！

服务器也能运行、游戏也能运行、网页也成功运行了。

这三天的努力，愁的我都长了个痘痘，至少解决问题都是自己解决的，又get 到一个技能。

2018-11-9lesson

上线React+Mobx+Antd + build + Nginx 经历

上线React+Mobx+Antd + build + Nginx 经历