什么是nginx ?
其實就是一個輕量級的服務器，可以很好的處理反向代理和負載均衡；可以很好的處理靜態資源；所以很適合我們前端使用，也很簡單。
我們主要用來做接口轉發（以及一些其他事情）。
nginx 命令行
-
啟動
sudo nginx -
測試配置文件（也可以用來查看配置文件的路徑）
sudo nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful -
重新加載配置文件
sudo nginx -s reload -
其他（停止，退出，重啟）
sudo nginx -s (stop|quit|reopen)
nginx.config
nginx的關鍵在于配置文件的設置，里面參數很多，可以參見文檔。
這里只介紹我們可能會用到的。
vim /etc/nginx/nginx.conf
# 設置用戶組
#user nobody;
# 占用內核數，一般設置為服務器最高內核
worker_processes 1;
# error log 存放位置
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
# 每一個worker進程能并發處理的最大連接數
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壓縮
gzip on;
# gzip默認不壓縮javascript、圖片等靜態資源文件
gzip_types text/plain application/x-javascript text/css text/javascript;
#nginx上傳限制,默認為1M;
client_max_body_size 6m;
# 引入其他配置文件
include /etc/nginx/conf.d/*.conf;
#### 重點在這個里面 ####
server {
listen 80;
# 訪問的Domain
server_name 10.142.78.40;
# 根目錄
root E:\work;
# 文件夾索引，生產環境要關閉
autoindex on;
# 匹配到/的時候默認加載index.html 然后在找index.htm
index index.html index.htm;
# 這2行需要加進來，不然頁面的中文可能會出現亂碼
default_type ‘text/html’;
charset utf-8;
# header 允許_字符
underscores_in_headers on;
location ~(/usrcenter){
# 匹配到usrcenter， 轉發到http://10.142.78.40:8787/usrcenter
proxy_pass http://10.142.78.40:8787;
}
location /o2blog_wx/ {
# 當訪問xxxx/o2blog_wx的時候轉發到服務器上的http://127.0.0.1:3000
# 通過rewrite字段重寫，將o2blog_wx進行正則匹配替換
# 也就是xxxx/o2blog_wx/hello =》 http://127.0.0.1:3000/hello
proxy_pass http://127.0.0.1:3000;
rewrite ^/o2blog_wx/(.*) /$1 break;
}
# 不讓dist的東西去匹配/ 里面的內容
location ~(/dist){
# 關閉靜態資源緩存，方便dbeug；生產環境不要用
expires off;
# expires 365d;
}
# 將/下面的URL 都重寫到/index.html
location / {
rewrite ^ /index.html break;
index index.html index.htm;
}
## 設置302 跳轉
location /o2blog_wx/ {
# 當匹配到http://aotu.jd.com/o2blog_wx/的時候會跳轉到http://aotu.jd.com/wxblog
return 302 http://aotu.jd.com/wxblog
}
error_log /var/log/nginx/html_error.log;
# 將404 和50X 重定向到 對應的報錯頁面
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
}
}
nginx 前端的其他用途
https
環境切換
在nginx里面拿cookie；根據cookie跳轉到不同的環境接口；很方便的測試接口
set $env_id "1.1.1.1";
if ( $http_cookie~* "host_id=(\S+)(;.*|$)") {
set $env_id $1;
}
location / {
proxy_set_header Host $host;
proxy_pass http://$env_id:80;
}
- 內容劫持
nginx_http_footer_filter 是淘寶開發的一個nginx模塊；可以在文件的底部添加文字;比如往html里面添加小廣告等等呵呵~
- CDN combo
利用nginx_http_concat，將請求合并，通過這樣的方式http://example.com/??style1.css,style2.css,foo/style3.css訪問合并后的資源。（也是阿里系的常用做法）
- 適配PC與移動web
通過判斷UA，做302跳轉到 pc的路徑和H5的路徑
ps:查看端口是否被占用：
sudo lsof -i :8090