部署
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一项就是指定的根目录,设置成我们指定的目录即可。