前面的話

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

安裝

【卸載nginx】

在介紹如何安裝nginx之前，先要介紹如何卸載nginx。因為nginx不正確的安裝，導致無法正常運行，所以需要卸載nginx。

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

【安裝nginx】

首先，更新包列表

sudo apt-get update

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

sudo apt-get install nginx

主機配置

【端口配置】

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

【主機名配置】

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

路徑配置

【location】

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

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

【根目錄設置】

location / { root /home/test/;}

【別名設置】

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;}

【首頁設置】

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

【重定向頁面設置】

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

【try_files 設置】

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

反向代理

代理分為正向和反向代理，正向代理代理的對象是客戶端，反向代理代理的對象是服務端。

反向代理(reserve proxy)方式是指用代理服務器來接受 Internet 上的連接請求，然后將請求轉發(fā)給內部網絡中的上游服務器，并將上游服務器上得到的結果返回給 Internet 上請求連接的客戶端，此時代理服務器對外的表現(xiàn)就是一個 Web 服務器。

【負載均衡設置】

upstream，定義一個上游服務器集群

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

【反向代理設置】

proxy_pass 將請求轉發(fā)到有處理能力的端上，默認不會轉發(fā)請求中的 Host 頭部

location /blog { prox_pass http://localhost:9000; ### 下面都是次要關注項 proxy_set_header Host $host; proxy_method POST; # 指定不轉發(fā)的頭部字段 proxy_hide_header Cache-Control; proxy_hide_header Other-Header; # 指定轉發(fā)的頭部字段 proxy_pass_header Server-IP; proxy_pass_header Server-Name; # 是否轉發(fā)包體 proxy_pass_request_body on | off; # 是否轉發(fā)頭部 proxy_pass_request_headers on | off; # 顯形/隱形 URI，上游發(fā)生重定向時，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服務非常簡單，只需要在端口443后面添加http2即可。

server{ listen 443 http2;...}

gzip配置

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

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

## # 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;

緩存配置

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

location / { expires 7d; ... }

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

CSP配置

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

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

目前，CSP有如下指令

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

指令值可以由下面這些內容組成：

指令值 指令示例 說明img-src 允許任何內容。'none' img-src 'none' 不允許任何內容。'self' img-src 'self' 允許來自相同來源的內容(相同的協(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' 允許加載動態(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;";

隱藏信息

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

server_tokens off;

配置流程

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

注意：一般以域名-端口號來命名配置文件

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來測試配置文件是否格式正確

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

接著，重啟nginx服務

sudo nginx -s reload

后端項目

下面來部署后端的nodejs項目，在/etc/nginx/conf.d目錄下新建文件，該項目占用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; }}

后臺項目

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

1、前端路由

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

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

2、反向代理

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

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;";

下面是詳細的配置文件

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; }}

前臺項目

前臺項目起名為www-xiaohuochai-cc-3002.conf。項目采用vue構建。該項目與后臺項目類似，但稍有些不同。不同之處在于，使用主域名xiaohuochai.cc或二級域名www.xiaohuochai.cc都需要跳轉。

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

詳細配置如下

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項目

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

詳細配置如下

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; }}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。