前言

本文主要給大家介紹了關(guān)于nginx配置React靜態(tài)頁面的相關(guān)內(nèi)容，文中給大家詳細介紹了關(guān)于nginx的安裝以及一些基本操作，然后給大家分享了React 靜態(tài)頁面 nginx 配置簡潔版的示例代碼，下面話不多說了，來一起看看詳細的介紹吧。

關(guān)于nginx的安裝啟動以及80端口被占用的解決方法，大家也可以參考這篇文章：//www.gxlcms.com/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、驚奇地發(fā)現(xiàn)歡迎頁面

第二步：基本操作

啟動

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

關(guān)閉

ps -ef | grep nginx
kill -QUIT xxxx

第三步 React 靜態(tài)頁面 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的數(shù)量相等
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;

#工作模式及連接數(shù)上限
events {
 #epoll是多路復用IO(I/O Multiplexing)中的一種方式,
 #僅用于linux2.6以上內(nèi)核,可以大大提高nginx的性能
 use epoll; 

 #單個后臺worker process進程的最大并發(fā)鏈接數(shù) 
 worker_connections 1024;

 # 并發(fā)總數(shù)是 worker_processes 和 worker_connections 的乘積
 # 即 max_clients = worker_processes * worker_connections
 # 在設置了反向代理的情況下，max_clients = worker_processes * worker_connections / 4 為什么
 # 為什么上面反向代理要除以4，應該說是一個經(jīng)驗值
 # 根據(jù)以上條件，正常情況下的Nginx Server可以應付的最大連接數(shù)為：4 * 8000 = 32000
 # worker_connections 值的設置跟物理內(nèi)存大小有關(guān)
 # 因為并發(fā)受IO約束，max_clients的值須小于系統(tǒng)可以打開的最大文件數(shù)
 # 而系統(tǒng)可以打開的最大文件數(shù)和內(nèi)存大小成正比，一般1GB內(nèi)存的機器上可以打開的文件數(shù)大約是10萬左右
 # 我們來看看360M內(nèi)存的VPS可以打開的文件句柄數(shù)是多少：
 # $ cat /proc/sys/fs/file-max
 # 

輸出 34336 # 32000 < 34336，即并發(fā)連接總數(shù)小于系統(tǒng)可以打開的文件句柄總數(shù)，這樣就在操作系統(tǒng)可以承受的范圍之內(nèi) # 所以，worker_connections 的值需根據(jù) worker_processes 進程數(shù)目和系統(tǒng)可以打開的最大文件總數(shù)進行適當?shù)剡M行設置 # 使得并發(fā)總數(shù)小于操作系統(tǒng)可以打開的最大文件數(shù)目 # 其實質(zhì)也就是根據(jù)主機的物理CPU和內(nèi)存進行配置 # 當然，理論上的并發(fā)總數(shù)可能會和實際有所偏差，因為主機還有其他的工作進程需要消耗系統(tǒng)資源。 # 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 是否調(diào)用 sendfile 函數(shù)（zero copy 方式）來輸出文件， #對于普通應用，必須設為 on, #如果用來進行下載等應用磁盤IO重負載應用，可設置為 off， #以平衡磁盤與網(wǎng)絡I/O處理速度，降低系統(tǒng)的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; #定義服務器的默認網(wǎng)站根目錄位置 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 { } #靜態(tài)文件，nginx自己處理 location ~ ^/(images|javascript|js|css|flash|media|static)/ { #過期30天，靜態(tài)文件不怎么更新，過期可以設大一點， #如果頻繁更新，則可以設置得小一點。 expires 30d; } #PHP 腳本請求全部轉(zhuǎn)發(fā)到 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; } } }

附上我的圖片

總結(jié)