nginx 上部署react项目

部署

1、npm run build

构建成功之后，会生成一个dist文件夹，这个文件夹里的静态文件，就是我们的项目访问文件了。

2、nginx.conf

server {
        listen 8080;
        # server_name your.domain.com;
 
        root /home/root/react-demo/dist;
        index index.html index.htm;
 
        location / {
                try_files $uri $uri/ /index.html;
        }
        location ^~ /assets/ {
                gzip_static on;
                expires max;
                add_header Cache-Control public;
        }
        error_page 500 502 503 504 /500.html;
        client_max_body_size 20M;
        keepalive_timeout 10;
}

3、nginx -s reload

4、browserHistory模式

location / {
        try_files $uri $uri/ /index.html;
}

原理，因为我们的项目只有一个根入口，当输入类似/home的url时，找不到这个页面，这时nginx会尝试加载index.html，加载index.html之后，react-router就能起作用并匹配我们输入的/home路由，从而显示正确的home页面。

nginx配置

1、nginx进程数，一般设置为和cpu核数一样 

#总核数=物理cpu个数 x 每颗物理cpu的核数

#总逻辑cpu数=总核数 x 超线程数

（1）查看物理cpu个数

cat /proc/cpuinfo| grep "physical id"| sort| uniq| wc -l

（2）查看每个物理cpu中core的个数（即核数）

cat /proc/cpuinfo| grep "cpu cores"| uniq

（3）查看逻辑CPU的个数

cat /proc/cpuinfo| grep "processor"| wc -l

worker_processes 2;

2、错误日志存放的目录

error_log /data1/logs/error.log

3、进程pid存放位置

pid /path

4、工作模式及连接上限

events 
{
  use epoll;       #epoll是多路复用IO(I/O Multiplexing)中的一种方式,但是仅用于linux2.6以上内核,可以大大提高nginx的性能
  worker_connections 1024;  #;单个后台worker process进程的最大并发链接数
}

5、开启高效传输模式

sendfile on;

6、连接超时时间，单位是秒

keepalive_timeout 60;

7.开启gzip压缩功能

gzip on；

8、负载 upstream

upstream tomcatserver1 {  
    server 192.168.72.49:8080 weight=3;  
    server 192.168.72.49:8081;  
    }   
  
 server {  
        listen       80;  
        server_name  8080.max.com;  
        #charset koi8-r;  
        #access_log  logs/host.access.log  main;  
        location / {  
            proxy_pass   http://tomcatserver1;  
            index  index.html index.htm;  
        }  
     }

（1）down

表示当前的server暂是不参与负载

（2）weight

默认为1，越大权重越大

（3）max_fails

允许请求失败的次数，默认是1，超过最大次数时，返回proxy_next_upstream模块定义的错误。

（4）fail_timeout

max_fails次失败后，暂停的时间

（5）backup

其它所有的非backup机器down或者忙的时候，请求backup机器，所以这台机器压力会最轻。

如果不指负载方式，默认是轮询。

使用weight后，是权重方式。

upstream bakend {  
ip_hash;  
server 192.168.0.14:88;  
server 192.168.0.15:80;  
} 

另外还是fair和url_hash。

 

nginx设置html目录

在nginx.conf文件中server中的root一项就是指定的根目录，设置成我们指定的目录即可。