微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

nginx配置React静态页面的方法教程

前言

本文主要给大家介绍了关于Nginx配置React静态页面的相关内容,文中给大家详细介绍了关于Nginx的安装以及一些基本操作,然后给大家分享了React 静态页面 Nginx 配置简洁版的示例代码,下面话不多说了,来一起看看详细的介绍吧。

关于Nginx的安装启动以及80端口被占用的解决方法,大家也可以参考这篇文章

第一步:安装

1、http://Nginx.org/en/download.html 下载

2、tar -xf Nginx-1.2.0.tar.gz

.3、进入解压目录 chmod a+rwx *

4、 ./configure --without-http_rewrite_module

5、make && make install

6、sudo /usr/local/Nginx/sbin/Nginx

7、浏览器访问 localhost

8、惊奇地发现欢迎页面

第二步:基本操作

启动

rush:plain;"> cd /usr/local/Nginx/sbin ./Nginx

链接

启动那么麻烦,我想直接打Nginx启动!

rush:plain;"> ln -s /usr/local/Nginx/sbin/Nginx /usr/local/bin/Nginx

查看启动的配置文件

rush:plain;"> sudo Nginx -t

重启

rush:plain;"> sudo Nginx -s reload

关闭

rush:plain;"> ps -ef | grep Nginx kill -QUIT xxxx

第三步 React 静态页面 Nginx 配置 简洁版

rush:plain;"> worker_processes 1;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8080;
server_name localhost;

root /Users/jasonff/project/erp-web;

location / {
try_files $uri @fallback;
}

location @fallback {
rewrite .* /index.html break;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include servers/*;
}

若干解释:

第四步:多个站点布置

Nginx.conf 文件所在目录中,新建一个文件夹 vhost ,新建若干个文件,例如 example1.conf 、 example2.conf ……

rush:plain;"> server { listen 8030; server_name localhost; root /Users/jasonff/project/souban-website; location / { try_files $uri @fallback; } location @fallback { rewrite .* /index.html break; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }

然后重新配置Nginx.conf

rush:plain;"> worker_processes 1; events { worker_connections 1024; }

http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
include vhosts/;
//加入include vhosts/

}

附录:配置介绍(字典查询

rush:plain;"> #运行用户 user nobody; #启动进程,通常设置成和cpu数量相等 worker_processes 1;

全局错误日志及PID文件

error_log logs/error.log;

error_log logs/error.log notice;

error_log logs/error.log info;

pid logs/Nginx.pid;

工作模式及连接数上限

events {

epoll是多路复用IO(I/O Multiplexing)中的一种方式,#仅用于linux2.6以上内核,可以大大提高Nginx性能

use epoll;

单个后台worker process进程的最大并发链接

worker_connections 1024;

并发总数是 worker_processes 和 worker_connections 的乘积

即 max_clients = worker_processes * worker_connections

在设置了反向代理的情况下,max_clients = worker_processes * worker_connections / 4 为什么

为什么上面反向代理要除以4,应该说是一个经验值

根据以上条件,正常情况下的Nginx Server可以应付的最大连接数为:4 * 8000 = 32000

worker_connections 值的设置跟物理内存大小有关

因为并发受IO约束,max_clients的值须小于系统可以打开的最大文件

而系统可以打开的最大文件数和内存大小成正比,一般1GB内存的机器上可以打开的文件数大约是10万左右

我们来看看360M内存的VPS可以打开的文件句柄数是多少:

$ cat /proc/sys/fs/file-max

输出 34336

32000 < 34336,即并发连接总数小于系统可以打开的文件句柄总数,这样就在操作系统可以承受的范围之内

所以,worker_connections 的值需根据 worker_processes 进程数目和系统可以打开的最大文件总数进行适当地进行设置

使得并发总数小于操作系统可以打开的最大文件数目

其实质也就是根据主机的物理cpu和内存进行配置

当然,理论上的并发总数可能会和实际有所偏差,因为主机还有其他的工作进程需要消耗系统资源。

ulimit -SHn 65535

}

http {

设定mime类型,类型由mime.type文件定义

include mime.types;
default_type application/octet-stream;

设定日志格式

log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log logs/access.log main;

sendfile 指令指定 Nginx 是否调用 sendfile 函数(zero copy 方式)来输出文件

对于普通应用,必须设为 on,#如果用来进行下载等应用磁盘IO重负载应用,可设置为 off,

以平衡磁盘与网络I/O处理速度,降低系统的uptime.

sendfile on;

tcp_nopush on;

连接超时时间

keepalive_timeout 0;

keepalive_timeout 65;
tcp_nodelay on;

开启gzip压缩

gzip on;
gzip_disable "MSIE [1-6].";

设定请求缓冲

client_header_buffer_size 128k;
large_client_header_buffers 4 128k;

设定虚拟主机配置

server {

侦听80端口

listen 80;

定义使用 www.Nginx.cn访问

server_name www.Nginx.cn;

定义服务器的认网站根目录位置

root html;

设定本虚拟主机的访问日志

access_log logs/Nginx.access.log main;

认请求

location / {

定义首页索引文件名称

index index.PHP index.html index.htm;

}

定义错误提示页面

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}

静态文件Nginx自己处理

location ~ ^/(images|javascript|js|css|flash|media|static)/ {

过期30天,静态文件不怎么更新,过期可以设大一点,

如果频繁更新,则可以设置得小一点。

expires 30d;
}

PHP 脚本请求全部转发到 FastCGI处理. 使用FastCGI认配置.

location ~ .PHP$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.PHP;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}

禁止访问 .htxxx 文件

location ~ /.ht {
deny all;
}

}
}

附上我的图片

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐