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

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

前言

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

关于nginx的安装启动以及80端口被占用的解决方法，大家也可以参考这篇文章：//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;

#定义使用 nginx.cn访问

server_name 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自己处理

lochttp://ation ~ ^/(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;

}

}

}

附上我的图片

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。