使用nginx部署React项目

在package.json里添加 "homepage": "." ，如下

然后在添加 basename

完成这两步后者碧执行 yarn build 打包，生成build目录。

把build目录上传到服团态务器的某个塌嫌源目录，比如 /usr/local/var/www 目录下，

然后在nginx.conf里添加

执行 nginx -s reload 刷新，在页面打开 http://153.100.71.119/app ，即可访问页面。

最近要用nginx 发布react 项目，折腾了好久总算有了点门道。

对发布react 项目而言，最重要的nginx 配置模块是server，大概埋丛戚如下：

其中listen 指定了我们监听的是8080端口。root 给定了该sever下的根路径，之后要接上location后面的路径（这里不考虑location 的~*那些匹配规则了），然后再接上index 后面的文件路径。

这些路径，都是必须要真实存在于服务器上的。比如上面的例子，如果我想访问test.html，我的url 需要是 http://XXX.XXX.com/text/ ，同时我的服务器上必须要在D:/Release/nginx-1.21.6/html/test/ 文件夹下有一个叫test.html的文件：

也就是说，假如我发布一个react 项目，希望当用户输入 http://XXX.XXX.com/abc/ 的时候能够进入到该项目，那么在root指定的路径下面，就必须要创建一个abc folder。如果在abc文件夹和index.html之间还有层级，就要写在index 后面：

文件夹：

而这个时候，对于react 项目在打包时也需要弯陵做一些处理。因为react默认情况下是放在根目录的，static文件会直接写/static/js/main.XXX.js，是一定会404的。要让/static前面的郑空路径与location+index中的文件结构一致，才能找到对应的静态文件：

那么要怎么打包才能打包成这个样子呢？

方法是在react项目的package.json中加入 homepage项：

这样就可以啦~

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

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

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

---