本文主要给大家介绍了关于nginx配置react静态页面的相关内容，文中给大家详细介绍了关于nginx的安装以及一些基本操作，然后给大家分享了react 静态页面 nginx 配置简洁版的示例代码，下面话不多说了，来一起看看详细的介绍吧。
关于nginx的安装启动以及80端口被占用的解决方法，大家也可以参考这篇文章：http://www.jb51.net/article/110291.htm
第一步：安装
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、惊奇地发现欢迎页面
第二步：基本操作
启动
cd /usr/local/nginx/sbin
./nginx
软链接
启动那么麻烦，我想直接打nginx启动！
ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx
查看启动的配置文件
sudo nginx -t
重启
sudo nginx -s reload
关闭
ps -ef | grep nginx
kill -quit xxxx
第三步 react 静态页面 nginx 配置 简洁版
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 ……
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
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/*
}
附录：配置介绍（字典查询）
#运行用户
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;
}
}
}
附上我的图片
相关推荐：
实例详解vscode 配置react native开发环境
详解react、ajax、java实现上传图片并预览功能
js实现静态页面搜索并高亮显示
以上就是nginx配置react静态页面实例教程的详细内容。