React创建build生产构建，使用Nginx服务器部署及报500错误的解决方法

今天尝试使用 Nginx 服务器跑 React build 生产构建，结果报错“500 Internal Server Error”。查了些资料，最后解决了，顺便记录一下。

Nginx 环境配置我就不写了，我之前整理过一篇文章，详细的介绍了 亚马逊AWS服务器CentOS/Linux系统Shell安装Nginx及配置自启动

添加网站

因为我服务器上之前有一个网站，需要再加一个，找到 Nginx 的配置文件 **/nginx/conf/nginx.conf （该文件和您的 Nginx 安装目录有关），在 http { . . . } 内添加下面一行代码：

server {
    listen  3000; // 端口号
    root	/root/build; // 网站目录
    index index.html index.htm; // 默认首页文件
    location / {
        try_files $uri $uri/ /index.html;
    }
}

这里要详细介绍一下：

try_files

找指定路径下文件，如果不存在，则转给哪个文件执行

语法：

try_files file1 [file2 ... filen] fallback

默认值：无  

作用域：location

当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。 

try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。 

显然，目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录。 

又找不到，就会 fall back 到 try_files 的最后一个选项 /index.php，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php  。

Nginx location的匹配规则

~      表示执行一个正则匹配，区分大小写

~*    表示执行一个正则匹配，不区分大小写

^~    表示普通字符匹配，如果该选项匹配，只匹配该选项，不匹配别的选项，一般用来匹配目录

=      进行普通字符精确匹配

@      定义一个命名的 location，使用在内部定向时，例如 error_page ,  try_files

location 匹配优先级

= 精确匹配会第一个被处理。如果发现精确匹配，nginx 停止搜索其他匹配。

普通字符匹配，正则表达式规则和长的块规则将被优先和查询匹配，也就是说如果该项匹配还需去看有没有正则表达式匹配和更长的匹配。

^~ 则只匹配该规则，nginx 停止搜索其他匹配，否则 nginx 会继续处理其他 location 指令。

最后匹配理带有"~"和"~*"的指令，如果找到相应的匹配，则 nginx 停止搜索其他匹配；当没有正则表达式或者没有正则表达式被匹配的情况下，那么匹配程度最高的逐字匹配指令会被使用。

示例：

location  = / {
  # 只匹配"/".
  [ configuration A ] 
}
location  / {
  # 匹配任何请求，因为所有请求都是以"/"开始
  # 但是更长字符匹配或者正则表达式匹配会优先匹配
  [ configuration B ] 
}
location ^~ /images/ {
  # 匹配任何以 /images/ 开始的请求，并停止匹配 其它location
  [ configuration C ] 
}
location ~* \.(gif|jpg|jpeg)$ {
  # 匹配以 gif, jpg, or jpeg结尾的请求. 
  # 但是所有 /images/ 目录的请求将由 [Configuration C]处理.   
  [ configuration D ] 
}

 Nginx 报错 500 Internal Server Error

一般报错 403 或 500 错误，大多是因为用户权限不一致。

修改 **/nginx/nginx.conf ，将原来的 user nobody 或者 user nginx 改为 root

# user nobody; // 默认
user root; // 改为 root
worker_processes auto;

至此，react build 生产构建就可以通过 nginx 部署成功了。