本地通過nginx配置反向代理的全過程記錄
前言
Nginx是一款輕量級的HTTP服務器,采用事件驅動的異步非阻塞處理方式框架,這讓其具有極好的IO性能。我們在日常開發中使用到Nginx的主要有以下幾個場景:
- Nginx作為http服務器
- 跨域請求
- 負載均衡
- 網絡資源的動靜分離
作為前端,我們主要是關註前兩個場景
一、下載安裝
點此下載 ,下載完成後解壓,解壓後文件如下:
解壓(雙擊nginx.exe,雙擊後一個黑色的彈窗一閃而過)
找到nginx解壓目錄下,鼠標右鍵,找到git bash打開,輸入命令start ./nginx.exe回車即啟動瞭nginx服務.
**檢查是否啟動成功:**直接在瀏覽器地址欄輸入網址http://localhost,回車,出現以下頁面說明啟動成功
二、nginx配置
找到nginx下的conf/nginx.conf文件,設置代理相關信息,重點是server{}中的內容
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { 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 on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server_names_hash_bucket_size 128; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } server { listen 80; server_name test-local.juejin.com; # 這裡是你要代理的測試環境域名加上-local # 比如你的項目測試環境為a.test.com,你本地此處可以設置為a-local.test.com,當然你可以隨便設置 location /{ add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; # 此處8091是我們本地運行項目的端口號,設置成跟你本地起的服務端口號一樣就行 proxy_pass http://127.0.0.1:8091/; } } }
三、本機dns配置
**修改本地host文件配置,**找到目錄C:\Windows\System32\drivers\etc,打開hosts文件,修改文件,加入127.0.0.1 a-local.test.com
四、運行
先輸入./nginx.exe -t檢查nginx配置是否正確,正確如下圖:
繼續輸入nginx -s reload重啟(nginx配置文件修改後都要重啟nginx才會生效)
刷新dns: ipconfig /flushdns
在瀏覽器中輸入http://a-local.test.com, 你將會看到你本地運行的代碼界面
五、常用的nginx命令
- 幫助命令:nginx -h
- 啟動Nginx服務器 :start nginx
- 配置文件路徑:/usr/local/nginx/conf/nginx.conf
- 檢查配置文件:nginx -t
- 停止服務:nginx -s stop
- 退出服務(處理完所有請求後再停止服務):nginx -s quit
- 重新加載配置文件:nginx -s reload
- 顯示版本信息並退出 nginx -v
- 殺死所有nginx進程 killall nginx
六、跨域請求
前後端分離的項目中由於前後端項目分別部署到不同的服務器上,我們首先遇到的問題就是跨域,在這個場景我們下nginx可以幫助我們很好地解決這個問題
#跨域請求server server{ listen 9000; server_name 127.0.0.1; # 或者設置為本機ip root /app/crossDomain/; index index.html; location /douban/ { #添加訪問目錄為/api的代理配置 rewrite ^/api/(.*)$ /$1 break; proxy_pass http://a.test.com; } }
總結
到此這篇關於本地通過nginx配置反向代理的文章就介紹到這瞭,更多相關本地通過nginx配置反向代理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 蘋果M1芯片安裝nginx 並且部署vue項目步驟詳解
- nginx配置多個前端項目實現步驟
- 記錄一次nginx啟動失敗的解決過程
- Nginx配置SSL和WSS步驟介紹
- 前端必備的一些nginx知識點匯總