nginx配置React靜態(tài)頁(yè)面的方法教程
前言
本文主要給大家介紹了關(guān)于nginx配置React靜態(tài)頁(yè)面的相關(guān)內(nèi)容,文中給大家詳細(xì)介紹了關(guān)于nginx的安裝以及一些基本操作,然后給大家分享了React 靜態(tài)頁(yè)面 nginx 配置簡(jiǎn)潔版的示例代碼,下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧。
關(guān)于nginx的安裝啟動(dòng)以及80端口被占用的解決方法,大家也可以參考這篇文章:http://chabaoo.cn/article/110291.htm
第一步:安裝
1、http://nginx.org/en/download.html 下載
2、tar -xf nginx-1.2.0.tar.gz
.3、進(jìn)入解壓目錄 chmod a+rwx *
4、 ./configure --without-http_rewrite_module
5、make && make install
6、sudo /usr/local/nginx/sbin/nginx
7、瀏覽器訪問(wèn) localhost
8、驚奇地發(fā)現(xiàn)歡迎頁(yè)面
第二步:基本操作
啟動(dòng)
cd /usr/local/nginx/sbin ./nginx
軟鏈接
啟動(dòng)那么麻煩,我想直接打nginx啟動(dòng)!
ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx
查看啟動(dòng)的配置文件
sudo nginx -t
重啟
sudo nginx -s reload
關(guān)閉
ps -ef | grep nginx kill -QUIT xxxx
第三步 React 靜態(tài)頁(yè)面 nginx 配置 簡(jiǎn)潔版
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/*; }
若干解釋?zhuān)?/strong>
- 我的配置文件在哪里?
- 想知道自己的配置文件在哪里,查看第二步中的查看啟動(dòng)配置文件,然后將需要的配置寫(xiě)在這個(gè)文件里面。
第四步:多個(gè)站點(diǎn)布置
在nginx.conf 文件所在目錄中,新建一個(gè)文件夾 vhost ,新建若干個(gè)文件,例如 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/* }
附錄:配置介紹(字典查詢)
#運(yùn)行用戶 user nobody; #啟動(dòng)進(jìn)程,通常設(shè)置成和cpu的數(shù)量相等 worker_processes 1; #全局錯(cuò)誤日志及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是多路復(fù)用IO(I/O Multiplexing)中的一種方式, #僅用于linux2.6以上內(nèi)核,可以大大提高nginx的性能 use epoll; #單個(gè)后臺(tái)worker process進(jìn)程的最大并發(fā)鏈接數(shù) worker_connections 1024; # 并發(fā)總數(shù)是 worker_processes 和 worker_connections 的乘積 # 即 max_clients = worker_processes * worker_connections # 在設(shè)置了反向代理的情況下,max_clients = worker_processes * worker_connections / 4 為什么 # 為什么上面反向代理要除以4,應(yīng)該說(shuō)是一個(gè)經(jīng)驗(yàn)值 # 根據(jù)以上條件,正常情況下的Nginx Server可以應(yīng)付的最大連接數(shù)為:4 * 8000 = 32000 # worker_connections 值的設(shè)置跟物理內(nèi)存大小有關(guān) # 因?yàn)椴l(fā)受IO約束,max_clients的值須小于系統(tǒng)可以打開(kāi)的最大文件數(shù) # 而系統(tǒng)可以打開(kāi)的最大文件數(shù)和內(nèi)存大小成正比,一般1GB內(nèi)存的機(jī)器上可以打開(kāi)的文件數(shù)大約是10萬(wàn)左右 # 我們來(lái)看看360M內(nèi)存的VPS可以打開(kāi)的文件句柄數(shù)是多少: # $ cat /proc/sys/fs/file-max # 輸出 34336 # 32000 < 34336,即并發(fā)連接總數(shù)小于系統(tǒng)可以打開(kāi)的文件句柄總數(shù),這樣就在操作系統(tǒng)可以承受的范圍之內(nèi) # 所以,worker_connections 的值需根據(jù) worker_processes 進(jìn)程數(shù)目和系統(tǒng)可以打開(kāi)的最大文件總數(shù)進(jìn)行適當(dāng)?shù)剡M(jìn)行設(shè)置 # 使得并發(fā)總數(shù)小于操作系統(tǒng)可以打開(kāi)的最大文件數(shù)目 # 其實(shí)質(zhì)也就是根據(jù)主機(jī)的物理CPU和內(nèi)存進(jìn)行配置 # 當(dāng)然,理論上的并發(fā)總數(shù)可能會(huì)和實(shí)際有所偏差,因?yàn)橹鳈C(jī)還有其他的工作進(jìn)程需要消耗系統(tǒng)資源。 # ulimit -SHn 65535 } http { #設(shè)定mime類(lèi)型,類(lèi)型由mime.type文件定義 include mime.types; default_type application/octet-stream; #設(shè)定日志格式 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 方式)來(lái)輸出文件, #對(duì)于普通應(yīng)用,必須設(shè)為 on, #如果用來(lái)進(jìn)行下載等應(yīng)用磁盤(pán)IO重負(fù)載應(yīng)用,可設(shè)置為 off, #以平衡磁盤(pán)與網(wǎng)絡(luò)I/O處理速度,降低系統(tǒng)的uptime. sendfile on; #tcp_nopush on; #連接超時(shí)時(shí)間 #keepalive_timeout 0; keepalive_timeout 65; tcp_nodelay on; #開(kāi)啟gzip壓縮 gzip on; gzip_disable "MSIE [1-6]."; #設(shè)定請(qǐng)求緩沖 client_header_buffer_size 128k; large_client_header_buffers 4 128k; #設(shè)定虛擬主機(jī)配置 server { #偵聽(tīng)80端口 listen 80; #定義使用 www.nginx.cn訪問(wèn) server_name www.nginx.cn; #定義服務(wù)器的默認(rèn)網(wǎng)站根目錄位置 root html; #設(shè)定本虛擬主機(jī)的訪問(wèn)日志 access_log logs/nginx.access.log main; #默認(rèn)請(qǐng)求 location / { #定義首頁(yè)索引文件的名稱(chēng) index index.php index.html index.htm; } # 定義錯(cuò)誤提示頁(yè)面 error_page 500 502 503 504 /50x.html; location = /50x.html { } #靜態(tài)文件,nginx自己處理 location ~ ^/(images|javascript|js|css|flash|media|static)/ { #過(guò)期30天,靜態(tài)文件不怎么更新,過(guò)期可以設(shè)大一點(diǎn), #如果頻繁更新,則可以設(shè)置得小一點(diǎn)。 expires 30d; } #PHP 腳本請(qǐng)求全部轉(zhuǎn)發(fā)到 FastCGI處理. 使用FastCGI默認(rèn)配置. 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; } #禁止訪問(wèn) .htxxx 文件 location ~ /.ht { deny all; } } }
附上我的圖片
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
React使用高階組件與Hooks實(shí)現(xiàn)權(quán)限攔截教程詳細(xì)分析
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件(功能增強(qiáng)的組件)的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù),并不是組件,這一點(diǎn)一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧2023-01-01React-vscode使用jsx語(yǔ)法的問(wèn)題及解決方法
很多朋友在安裝插件ES7 React/Redux/GraphQL/React-Native snippets還是不能完全支持jsx語(yǔ)法,糾結(jié)是什么原因呢,該如何處理呢,下面小編給大家分享本文幫助大家解決React-vscode使用jsx語(yǔ)法問(wèn)題,感興趣的朋友一起看看吧2021-06-06react-native 封裝選擇彈出框示例(試用ios&android)
本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android),具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問(wèn)題
這篇文章主要介紹了解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07React星星評(píng)分組件的實(shí)現(xiàn)
評(píng)分插件在購(gòu)物的應(yīng)用中經(jīng)??梢钥吹玫?,但是用著別人的總是沒(méi)有自己寫(xiě)的順手,本文就使用React實(shí)現(xiàn)星星評(píng)分組件,感興趣的可以了解一下2021-06-06React實(shí)現(xiàn)點(diǎn)擊切換組件效果
這篇文章主要為大家詳細(xì)介紹了如何基于React實(shí)現(xiàn)點(diǎn)擊切換組件效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以學(xué)習(xí)一下2023-08-08React調(diào)度系統(tǒng)Scheduler工作原理詳解
這篇文章主要為大家介紹了React調(diào)度系統(tǒng)Scheduler工作原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03