记第一次配置nginx并部署自己的react小玩意

    作为一个入行一年的小菜鸡前端，一直以来对前端项目怎么部署到nginx的颇有兴趣，恰好最近某云的服务器比较便宜，就买了一年来配置玩，下面记录一下这次配置的过程和踩到的坑。

1、nginx的配置是在/usr/local/nginx/conf下的nginxconf进行配置，我一开始搞错了地方，一直在/usr/local/nginx/sbin/nginx-1120/conf下的nginxconf配置，导致一直没有生效。

2、全部配置完成后，出现了一个问题，当通过url来访问页面前端路由的时候，会报404；但是通过页面内按钮进行路由跳转的时候是没有问题的，经过查找相关问题发现需要在nginxconf中location中加上图中这两个（具体原因需要进一步查阅）：

以xammp为例

需要配置

1：本地C:\Windows\System32\drivers\etc下host文件，增加下图红线中内容，127001为固定本地ip

2：xampp的目录下我这里是E:\xampp\apache\conf\extra的>添加"homepage" :" >

仍是SPA

需要用到 react-router-config 这个库，它可以根据 route 匹配到对应的组件，拿到当前route对应的组件是实现路由同步的关键，再通过组件的静态API方法获取接口数据

主要是在服务端通过组件的静态API方法获取接口数据后创建store，再通过 window store = store 传递给前端

主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中

服务端渲染的应用场景：一般只是对重要的页面，如首页才会做，可以提高首屏加载速度，利于SEO。其他页面实际上仍是CSR

预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。

1、SPA变为MPA
2、必须使用 History 路由，而不能使用 Hash 路由，所以对于没有做预渲染的页面往往需要服务器配置路由，如nginx 配置如下：

3、对于动态路由，如 /detail/:id ，是不支持的，不过可以换成 query 路由，如 /detailid=
4、应用场景比较有限，能想到的就是骨架屏应用，比如首页，为了速度，我们会用一些骨架屏组件，如果不做预渲染，则骨架屏组件会等整个js文件加载完毕才开始渲染，体验不好。如果做了预渲染，则当html文件加载完毕时就会开始渲染了

---