場景
Nginx入門教程-簡介、安裝、反向代理、負載均衡、動靜分離使用實例:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103101304
前端是用Vue做的項目,后端是SpringBoot,怎樣將前后端項目部署在Windows服務器上並使用Nginx進行代理。
Nginx下載地址
http://nginx.org/en/download.html
這里點擊相應版本的Windows版本
下載之后是一個壓縮包,將其解壓到服務器上的某個目錄
Nginx代理配置
進入到上面解壓的conf目錄下,編輯Nginx的配置文件nginx.conf
找到server節點
首先這里的listen下的端口就是代理前的接口,要與前面前端項目的vue.config.js中的端口一致。
server { listen 70; server_name 10.229.36.158;
然后下面的server_name是你服務器的ip,這里即使是使用的本地也建議不要用localhost,避免修改hosts文件導致的問題。
所以這里就直接設置你要部署項目的服務器的ip。
然后下面的location /下面配置的就是代理前前端靜態資源的路徑等。
root 對應的就是在服務器上前端資源的dist目錄的全路徑,即代表根路徑。
下面的兩個配置保持默認不要更改,配置的是防止404和入口頁面。
location / { root D:/www/kaoqin/dist/; try_files $uri $uri/ /index.html; index index.html index.htm; }
然后再下面的location /prod-api/ 就是配置的代理后的地址。
location /prod-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8080/; }
這里的 /prod-api/就是跟前面前端項目設置代理的路徑重寫一致。
下面的一些是設置請求頭等,防止出現跨域問題。
然后最下面的proxy_pass就是設置的代理后的地址,即你的服務器上后台接口的url。
通過上面兩個配置就能實現在服務器上所有的請求
只要是通過
http://10.229.36.158/70/dev-api/
發送過來的請求全部會被代理到
下。這樣就能實現前后端項目的請求代理。
完整conf代碼
#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 { listen 70; server_name 10.229.36.158; #charset koi8-r; #access_log logs/host.access.log main; location / { root D:/www/kaoqin/dist/; try_files $uri $uri/ /index.html; index index.html index.htm; } location /prod-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8080/; } # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
啟動Nginx
來到上面Nginx解壓之后的目錄下(服務器上)即含有nginx.exe的目錄下,在此處打開命令行
start nginx.exe
啟動nginx
如果對nginx的配置文件進行修改的話
nginx -s reload
如果沒配置環境變量或者提示不行的話前面使用nginx.exe的全路徑。
正常停止或關閉Nginx:
nginx -s quit
啟動Nginx成功后打開瀏覽器驗證,輸入
如果能出現頁面,即對應的前端靜態資源的index.html的頁面,並且能顯示驗證碼,驗證碼是通過代理后的
后台接口獲取。那么就是代理成功,記住不要關閉此nginx的命令行。
如果訪問服務器上的地址不成功后檢查70端口是否開放
控制面板-防火牆-高級設置
入站規則-新建規則-端口,添加70
點擊下一步
選擇允許連接
配置連接域點擊下一步
設置名稱點擊保存。