前面的話

如果服務(wù)器只需要放置一個(gè)網(wǎng)站程序，解析網(wǎng)站到服務(wù)器的網(wǎng)站，網(wǎng)站程序監(jiān)聽80端口就可以了。如果服務(wù)器有很多應(yīng)用，借助nginx不僅可以實(shí)現(xiàn)端口的代理，還可以實(shí)現(xiàn)負(fù)載均衡。本文將詳細(xì)介紹前端及nodeJS項(xiàng)目在服務(wù)器配置時(shí)需要用到的nginx配置。

安裝

【卸載nginx】

在介紹如何安裝nginx之前，先要介紹如何卸載nginx。因?yàn)閚ginx不正確的安裝，導(dǎo)致無法正常運(yùn)行，所以需要卸載nginx。

sudo apt-get remove nginx nginx-common # 卸載刪除除了配置文件以外的所有文件sudo apt-get purge nginx nginx-common # 卸載所有東東，包括刪除配置文件sudo apt-get autoremove # 在上面命令結(jié)束后執(zhí)行，主要是卸載刪除Nginx的不再被使用的依賴包sudo apt-get remove nginx-full nginx-common #卸載刪除兩個(gè)主要的包

【安裝nginx】

首先，更新包列表

sudo apt-get update

然后，一定要在sudo下安裝nginx

sudo apt-get install nginx

主機(jī)配置

【端口配置】

listen 127.0.0.1:8000;listen *:8000;listen localhost:8000;# IPV6listen [::]:8000;# other paramslisten 443 default_serer ssl;listen 127.0.0.1 default_server accept_filter=dataready backlog=1024

【主機(jī)名配置】

server_name www.xiaohuochai.com xiaohuochai.comserver_name *.xiaohuochai.comserver_name ~^.xiaohuochai.com$

路徑配置

【location】

nginx使用location指令來實(shí)現(xiàn)URI匹配

location = / { # 完全匹配 = # 大小寫敏感 ~ # 忽略大小寫 ~*}location ^~ /images/ { # 前半部分匹配 ^~ # 可以使用正則，如： # location ~* .(gif|jpg|png)$ { }}location / { # 如果以上都未匹配，會(huì)進(jìn)入這里}

【根目錄設(shè)置】

location / { root /home/test/;}

【別名設(shè)置】

location /blog { alias /home/www/blog/;}location ~ ^/blog/(d+)/([w-]+)$ { # /blog/20180402/article-name # -> /blog/20180402-article-name.md alias /home/www/blog/$1-$2.md;}

【首頁設(shè)置】

index /html/index.html /php/index.php;

【重定向頁面設(shè)置】

error_page 404 /404.html;error_page 502 503 /50x.html;error_page 404 =200 /1x1.gif;location / { error_page 404 @fallback;}location @fallback { # 將請(qǐng)求反向代理到上游服務(wù)器處理 proxy_pass http://localhost:9000;}

【try_files 設(shè)置】

try_files $uri $uri.html $uri/index.html @other;location @other { # 嘗試尋找匹配 uri 的文件，失敗了就會(huì)轉(zhuǎn)到上游處理 proxy_pass http://localhost:9000;}location / { # 嘗試尋找匹配 uri 的文件，沒找到直接返回 502 try_files $uri $uri.html =502;}

反向代理

代理分為正向和反向代理，正向代理代理的對(duì)象是客戶端，反向代理代理的對(duì)象是服務(wù)端。

反向代理(reserve proxy)方式是指用代理服務(wù)器來接受 Internet 上的連接請(qǐng)求，然后將請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)中的上游服務(wù)器，并將上游服務(wù)器上得到的結(jié)果返回給 Internet 上請(qǐng)求連接的客戶端，此時(shí)代理服務(wù)器對(duì)外的表現(xiàn)就是一個(gè) Web 服務(wù)器。

【負(fù)載均衡設(shè)置】

upstream，定義一個(gè)上游服務(wù)器集群

upstream backend { # ip_hash; server s1.barretlee.com; server s2.barretlee.com;}server { location / { proxy_pass http://backend; }}

【反向代理設(shè)置】

proxy_pass 將請(qǐng)求轉(zhuǎn)發(fā)到有處理能力的端上，默認(rèn)不會(huì)轉(zhuǎn)發(fā)請(qǐng)求中的 Host 頭部

location /blog { prox_pass http://localhost:9000; ### 下面都是次要關(guān)注項(xiàng) proxy_set_header Host $host; proxy_method POST; # 指定不轉(zhuǎn)發(fā)的頭部字段 proxy_hide_header Cache-Control; proxy_hide_header Other-Header; # 指定轉(zhuǎn)發(fā)的頭部字段 proxy_pass_header Server-IP; proxy_pass_header Server-Name; # 是否轉(zhuǎn)發(fā)包體 proxy_pass_request_body on | off; # 是否轉(zhuǎn)發(fā)頭部 proxy_pass_request_headers on | off; # 顯形/隱形 URI，上游發(fā)生重定向時(shí)，Nginx 是否同步更改 uri proxy_redirect on | off;}

HTTPS配置

server{ listen 80; server_name api.xiaohuochai.cc; return 301 https://api.xiaohuochai.cc$request_uri;}server{ listen 443; server_name api.xiaohuochai.cc; ssl on; ssl_certificate /home/www/blog/crt/api.xiaohuochai.cc.crt; ssl_certificate_key /home/www/blog/crt/api.xiaohuochai.cc.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; if ($ssl_protocol = "") { rewrite ^(.*)https://$host$1 permanent; }}

【HTTP2】

開啟HTTP2服務(wù)非常簡(jiǎn)單，只需要在端口443后面添加http2即可。

server{ listen 443 http2;...}

gzip配置

開啟網(wǎng)站的 gzip 壓縮功能，通常可以高達(dá)70%，也就是說，如果網(wǎng)頁有30K，壓縮之后就變成9K， 對(duì)于大部分網(wǎng)站，顯然可以明顯提高瀏覽速度。

gzip配置在nginx.conf文件中已經(jīng)存在，只不過默認(rèn)是注釋的狀態(tài)，只需將注釋符號(hào)去掉即可

## # Gzip Settings ## gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

緩存配置

如果服務(wù)器中存在靜態(tài)資源，可設(shè)置本地強(qiáng)緩存。expires 7d表示在本地緩存7天

location / { expires 7d; ... }

設(shè)置完成后，瀏覽器會(huì)自動(dòng)添加expires和cache-control字段，而對(duì)于協(xié)商緩存Etag和Last-Modified，nginx默認(rèn)開啟，無需配置。

CSP配置

跨域腳本攻擊 XSS 是最常見、危害最大的網(wǎng)頁安全漏洞。為了防止它們，要采取很多編程措施，非常麻煩。很多人提出，能不能根本上解決問題，瀏覽器自動(dòng)禁止外部注入惡意腳本？這就是"網(wǎng)頁安全政策"(Content Security Policy，縮寫 CSP)的來歷。

CSP 的實(shí)質(zhì)就是白名單制度，開發(fā)者明確告訴客戶端，哪些外部資源可以加載和執(zhí)行，等同于提供白名單。它的實(shí)現(xiàn)和執(zhí)行全部由瀏覽器完成，開發(fā)者只需提供配置

目前，CSP有如下指令

指令 指令值示例 說明default-src 'self' cnd.a.com 定義針對(duì)所有類型(js、image、css、web font，ajax 請(qǐng)求，iframe，多媒體等)資源的默認(rèn)加載策略，某類型資源如果沒有單獨(dú)定義策略，就使用默認(rèn)的。script-src 'self' js.a.com 定義針對(duì) JavaScript 的加載策略。style-src 'self' css.a.com 定義針對(duì)樣式的加載策略。img-src 'self' img.a.com 定義針對(duì)圖片的加載策略。connect-src 'self' 針對(duì) Ajax、WebSocket 等請(qǐng)求的加載策略。不允許的情況下，瀏覽器會(huì)模擬一個(gè)狀態(tài)為 400 的響應(yīng)。font-src font.a.com 針對(duì) WebFont 的加載策略。object-src 'self' 針對(duì) 、 或 等標(biāo)簽引入的 flash 等插件的加載策略。media-src media.a.com 針對(duì) 或

指令值可以由下面這些內(nèi)容組成：

指令值 指令示例 說明img-src 允許任何內(nèi)容。'none' img-src 'none' 不允許任何內(nèi)容。'self' img-src 'self' 允許來自相同來源的內(nèi)容(相同的協(xié)議、域名和端口)。data: img-src data: 允許 data: 協(xié)議(如 base64 編碼的圖片)。www.a.com img-src img.a.com 允許加載指定域名的資源。.a.com img-src .a.com 允許加載 a.com 任何子域的資源。https://img.com img-src https://img.com 允許加載 img.com 的 https 資源(協(xié)議需匹配)。https: img-src https: 允許加載 https 資源。'unsafe-inline' script-src 'unsafe-inline' 允許加載 inline 資源(例如常見的 style 屬性，onclick，inline js 和 inline css 等等)。'unsafe-eval' script-src 'unsafe-eval' 允許加載動(dòng)態(tài) js 代碼，例如 eval()。

admin.xiaohuochai.cc中的CSP配置如下

add_header Content-Security-Policy "default-src 'self';script-src 'self' 'unsafe-inline' 'unsafe-eval';img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site;style-src 'self' 'unsafe-inline';frame-src https://demo.xiaohuochai.site https://xiaohuochai.site;";

隱藏信息

在請(qǐng)求響應(yīng)頭中，有這么一行 server: nginx，說明用的是 Nginx 服務(wù)器，但并沒有具體的版本號(hào)。由于某些 Nginx 漏洞只存在于特定的版本，隱藏版本號(hào)可以提高安全性。這只需要在配置里加上這個(gè)就可以了：

server_tokens off;

配置流程

下面在/etc/nginx/conf.d下新建一個(gè)配置文件，命名為test-8081.conf，內(nèi)容如下

注意：一般以域名-端口號(hào)來命名配置文件

upstream xiaohuochai { server 127.0.0.1:8081;}server{ listen 80; server_name 1.2.3.4; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forward-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Nginx-Proxy true; proxy_pass http://test; proxy_redirect off; }}

下面使用sudo nginx -t來測(cè)試配置文件是否格式正確

如果不想讓報(bào)文顯示server的詳細(xì)信息，需要將/etc/nginx/nginx.conf主配置文件中的server_tockens off前面的注釋取消即可

接著，重啟nginx服務(wù)

sudo nginx -s reload

后端項(xiàng)目

下面來部署后端的nodejs項(xiàng)目，在/etc/nginx/conf.d目錄下新建文件，該項(xiàng)目占用3000端口，則起名為api-xiaohuochai-cc-3000.conf

upstream api { server 127.0.0.1:3000;}server{ listen 80; server_name api.xiaohuochai.cc; return 301 https://api.xiaohuochai.cc$request_uri;}server{ listen 443 http2; server_name api.xiaohuochai.cc; ssl on; ssl_certificate /home/www/blog/crt/api.xiaohuochai.cc.crt; ssl_certificate_key /home/www/blog/crt/api.xiaohuochai.cc.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; if ($ssl_protocol = "") { rewrite ^(.*)https://$host$1 permanent; } location / { 　　　　proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forward-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Nginx-Proxy true; proxy_pass http://api; proxy_redirect off; }}

后臺(tái)項(xiàng)目

后臺(tái)項(xiàng)目起名為admin-xiaohuochai-cc-3001.conf。由于項(xiàng)目采用react構(gòu)建，與普通的靜態(tài)網(wǎng)站有些不同

1、前端路由

由于使用前端路由，項(xiàng)目只有一個(gè)根入口。當(dāng)輸入類似/posts的url時(shí)，找不到這個(gè)頁面，這是，nginx會(huì)嘗試加載index.html，加載index.html之后，react-router就能起作用并匹配我們輸入的/posts路由，從而顯示正確的posts頁面。

try_files $uri $uri/ /index.html = 404;

2、反向代理

由于該項(xiàng)目需要向后端api.xiaohuochai.cc獲取數(shù)據(jù)，但是后臺(tái)占用的是3000端口，相當(dāng)于跨域訪問，這時(shí)就需要進(jìn)行反向代理。

location /api/ { proxy_pass http://api/; }

注意：一定要在api后面添加/，否則不生效

3、配置緩存及CSP

expires 7d;add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline'; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site;";

下面是詳細(xì)的配置文件

upstream admin { server 127.0.0.1:3001;}server{ listen 80; server_name admin.xiaohuochai.cc; return 301 https://admin.xiaohuochai.cc$request_uri; root /home/www/blog/admin/build; index index.html;}server{ listen 443 http2; server_name admin.xiaohuochai.cc; ssl on; ssl_certificate /home/www/blog/crt/admin.xiaohuochai.cc.crt; ssl_certificate_key /home/www/blog/crt/admin.xiaohuochai.cc.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; if ($ssl_protocol = "") { rewrite ^(.*)https://$host$1 permanent; } location /api/ { proxy_pass http://api/; } location / { index index.html; root /home/www/blog/admin/build; expires 7d; add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline'; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site;"; try_files $uri $uri/ /index.html = 404; }}

前臺(tái)項(xiàng)目

前臺(tái)項(xiàng)目起名為www-xiaohuochai-cc-3002.conf。項(xiàng)目采用vue構(gòu)建。該項(xiàng)目與后臺(tái)項(xiàng)目類似，但稍有些不同。不同之處在于，使用主域名xiaohuochai.cc或二級(jí)域名www.xiaohuochai.cc都需要跳轉(zhuǎn)。

server{ listen 443 http2; server_name www.xiaohuochai.cc xiaohuochai.cc;...

詳細(xì)配置如下

upstream client { server 127.0.0.1:3002;}server{ listen 80; server_name www.xiaohuochai.cc xiaohuochai.cc; return 301 https://www.xiaohuochai.cc$request_uri; root /home/www/blog/client/dist; index index.html;}server{ listen 443 http2; server_name www.xiaohuochai.cc xiaohuochai.cc; ssl on; ssl_certificate /home/www/blog/client/crt/www.xiaohuochai.cc.crt; ssl_certificate_key /home/www/blog/client/crt/www.xiaohuochai.cc.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; if ($ssl_protocol = "") { rewrite ^(.*)https://$host$1 permanent; } location /api/ { proxy_pass http://api/; } location / { index index.html; root /home/www/blog/client/source/dist; expires 7d; add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://static.xiaohuochai.site ; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline' https://static.xiaohuochai.site; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site https://www.xiaohuochai.site;"; try_files $uri $uri/ /index.html = 404; }}

SSR項(xiàng)目

如果前端項(xiàng)目是服務(wù)器端渲染的SSR項(xiàng)目，則與普通的前端項(xiàng)目有很大不同，它不僅需要守護(hù)后端程序，還有前端靜態(tài)資源的處理，如果是首頁，還需要處理www

詳細(xì)配置如下

upstream client { server 127.0.0.1:3002;}server{ listen 80; server_name www.xiaohuochai.cc xiaohuochai.cc; return 301 https://www.xiaohuochai.cc$request_uri;}server{ listen 443 http2; server_name www.xiaohuochai.cc xiaohuochai.cc; ssl on; ssl_certificate /home/blog/client/crt/www.xiaohuochai.cc.crt; ssl_certificate_key /home/blog/client/crt/www.xiaohuochai.cc.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; if ($host = 'xiaohuochai.cc'){ rewrite ^/(.*)$ http://www.xiaohuochai.cc/$1 permanent; } location / { expires 7d; add_header Content-Security-Policy "default-src 'self' https://static.xiaohuochai.site; connect-src https://api.xiaohuochai.cc; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://static.xiaohuochai.site ; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline' https://static.xiaohuochai.site; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site https://www.xiaohuochai.site;"; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forward-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Nginx-Proxy true; proxy_pass http://client; proxy_redirect off; }}

總結(jié)

以上是生活随笔為你收集整理的nginx转发图片请求变成html/text_教你使用nginx部署网站教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。