前言
Nginx是一款輕量級(jí)的HTTP服務(wù)器，采用事件驅(qū)動(dòng)的異步非阻塞處理方式框架，這讓其具有極好的IO性能。我們?cè)谌粘ｉ_(kāi)發(fā)中使用到Nginx的主要有以下幾個(gè)場(chǎng)景：
- Nginx作為http服務(wù)器
- 跨域請(qǐng)求
- 負(fù)載均衡
- 網(wǎng)絡(luò)資源的動(dòng)靜分離
作為前端，我們主要是關(guān)注前兩個(gè)場(chǎng)景
一、下載安裝
點(diǎn)此下載 ，下載完成后解壓，解壓后文件如下:
解壓（雙擊nginx.exe,雙擊后一個(gè)黑色的彈窗一閃而過(guò)）
找到nginx解壓目錄下，鼠標(biāo)右鍵，找到git bash打開(kāi)，輸入命令start ./nginx.exe回車即啟動(dòng)了nginx服務(wù).
**檢查是否啟動(dòng)成功：**直接在瀏覽器地址欄輸入網(wǎng)址http://localhost，回車，出現(xiàn)以下頁(yè)面說(shuō)明啟動(dòng)成功
二、nginx配置
找到nginx下的conf/nginx.conf文件，設(shè)置代理相關(guān)信息，重點(diǎn)是server{}中的內(nèi)容
#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;
# 這里是你要代理的測(cè)試環(huán)境域名加上-local
# 比如你的項(xiàng)目測(cè)試環(huán)境為a.test.com,你本地此處可以設(shè)置為a-local.test.com,當(dāng)然你可以隨便設(shè)置
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是我們本地運(yùn)行項(xiàng)目的端口號(hào)，設(shè)置成跟你本地起的服務(wù)端口號(hào)一樣就行
proxy_pass http://127.0.0.1:8091/;
}
}
}
三、本機(jī)dns配置
**修改本地host文件配置，**找到目錄C:\Windows\System32\drivers\etc，打開(kāi)hosts文件，修改文件,加入127.0.0.1 a-local.test.com
四、運(yùn)行
先輸入./nginx.exe -t檢查nginx配置是否正確，正確如下圖：
繼續(xù)輸入nginx -s reload重啟(nginx配置文件修改后都要重啟nginx才會(huì)生效)
刷新dns: ipconfig /flushdns
在瀏覽器中輸入http://a-local.test.com, 你將會(huì)看到你本地運(yùn)行的代碼界面
五、常用的nginx命令
- 幫助命令：nginx -h
- 啟動(dòng)Nginx服務(wù)器 ：start nginx
- 配置文件路徑：/usr/local/nginx/conf/nginx.conf
- 檢查配置文件：nginx -t
- 停止服務(wù)：nginx -s stop
- 退出服務(wù)（處理完所有請(qǐng)求后再停止服務(wù)）：nginx -s quit
- 重新加載配置文件：nginx -s reload
- 顯示版本信息并退出 nginx -v
- 殺死所有nginx進(jìn)程 killall nginx
六、跨域請(qǐng)求
前后端分離的項(xiàng)目中由于前后端項(xiàng)目分別部署到不同的服務(wù)器上，我們首先遇到的問(wèn)題就是跨域，在這個(gè)場(chǎng)景我們下nginx可以幫助我們很好地解決這個(gè)問(wèn)題
#跨域請(qǐng)求server
server{
listen 9000;
server_name 127.0.0.1; # 或者設(shè)置為本機(jī)ip
root /app/crossDomain/;
index index.html;
location /douban/ { #添加訪問(wèn)目錄為/api的代理配置
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://a.test.com;
}
}
總結(jié)
到此這篇關(guān)于本地通過(guò)nginx配置反向代理的文章就介紹到這了,更多相關(guān)本地通過(guò)nginx配置反向代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
