nginx配置React靜態(tài)頁面的方法教程
前言
本文主要給大家介紹了關于nginx配置React靜態(tài)頁面的相關內容,文中給大家詳細介紹了關于nginx的安裝以及一些基本操作,然后給大家分享了React 靜態(tài)頁面 nginx 配置簡潔版的示例代碼,下面話不多說了,來一起看看詳細的介紹吧。
關于nginx的安裝啟動以及80端口被占用的解決方法,大家也可以參考這篇文章:http://www.fzitv.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、驚奇地發(fā)現歡迎頁面
第二步:基本操作
啟動
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 靜態(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的數量相等
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進程的最大并發(fā)鏈接數
worker_connections 1024;
# 并發(fā)總數是 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 值的設置跟物理內存大小有關
# 因為并發(fā)受IO約束,max_clients的值須小于系統(tǒng)可以打開的最大文件數
# 而系統(tǒng)可以打開的最大文件數和內存大小成正比,一般1GB內存的機器上可以打開的文件數大約是10萬左右
# 我們來看看360M內存的VPS可以打開的文件句柄數是多少:
# $ cat /proc/sys/fs/file-max
# 輸出 34336
# 32000 < 34336,即并發(fā)連接總數小于系統(tǒng)可以打開的文件句柄總數,這樣就在操作系統(tǒng)可以承受的范圍之內
# 所以,worker_connections 的值需根據 worker_processes 進程數目和系統(tǒng)可以打開的最大文件總數進行適當地進行設置
# 使得并發(fā)總數小于操作系統(tǒng)可以打開的最大文件數目
# 其實質也就是根據主機的物理CPU和內存進行配置
# 當然,理論上的并發(fā)總數可能會和實際有所偏差,因為主機還有其他的工作進程需要消耗系統(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 是否調用 sendfile 函數(zero copy 方式)來輸出文件,
#對于普通應用,必須設為 on,
#如果用來進行下載等應用磁盤IO重負載應用,可設置為 off,
#以平衡磁盤與網絡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;
#定義服務器的默認網站根目錄位置
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 腳本請求全部轉發(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;
}
}
}
附上我的圖片


總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
React-View-UI組件庫封裝Loading加載中源碼
這篇文章主要介紹了React-View-UI組件庫封裝Loading加載樣式,主要包括組件介紹,組件源碼及組件測試源碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
詳解使用create-react-app快速構建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用create-react-app快速構建React開發(fā)環(huán)境,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
React Native之ListView實現九宮格效果的示例
本篇文章主要介紹了React Native之ListView實現九宮格效果的示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08
詳解關于react-redux中的connect用法介紹及原理解析
本篇文章主要介紹了詳解關于react-redux中的connect用法介紹及原理解析,非常具有實用價值,需要的朋友可以參考下2017-09-09

