一鍵前端代理，一行命令開啟nginx容器，代理前端頁面

我們在前端開發的過程中，在對接口時候，往往需要跨域請求，那么及其簡便的方法就是使用nginx反向代理，但是存在幾點缺點

1.在新的一個項目下，我們需要找到安裝nginx目錄的nginx.conf文件並且修改代理內容，重啟才能有效

2.如果修改錯誤，還會影響之前正確的代理端口

3.這個配置文件非常復雜，不利於新手編寫

於是有沒有更好的方式呢，答案是肯定的，前段時間學習了docker的內容，發現nginx容器可以實現非常多的代理，而且可以隨時關閉隨時開啟，但是命令行輸入還是顯得比較麻煩，於是我自己就封裝了一下，現在實現前端代理就只需要一行命令。如果想學docker，推薦阮大神的博客 docker入門

 

一.首先，你需要下載docker，關於docker實在是一個非常好用的東西，在我們這個教程你完全不需要了解它，只需要下載它

1.mac 下載地址 https://docs.docker.com/docker-for-mac/install/

2.windows       https://docs.docker.com/docker-for-windows/install/

下載好，運行下列命令，驗證是否安裝成功

docker version

 如果沒有啟動docker，使用下列命令啟動

# service 命令的用法
$ sudo service docker start

# systemctl 命令的用法
$ sudo systemctl start docker

 

二.下載鏡像

1.使用命令

docker image pull nginx

這就是下載了nginx鏡像，想了解具體ngxin鏡像怎么玩（完全可以不需要了解）推薦阮大神 nginx容器教程

 

三. 簡單配置代理，代理到你想要的地址

1.去往 https://github.com/jiangzhenfei/docker-nginx 將文件夾下的文件（一共兩個文件）拷貝到你需要代理的index.html目錄

其中：

　　add.conf   這個文件是你需要配置代理，配置非常簡單，我也在里面寫了幾個配置的例子，當然不配置也是可以的，但是就不能代理到你想要的地址了

　　

location /blog/ { #遇到/blob/開頭的ajax就代理到http://47.93.103.19:30010這個地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://47.93.103.19:30010/;
    proxy_redirect off;
}

 

　　nginx.js   這個文件是啟動文件，不需要任何修改

 

四. 啟動和關閉

1.node nginx.js 啟動，這個時候你只需要 打開http://localhost:8080/ 就能看見你的html頁面了，並且里面接口的轉發都是正確的

2.如果想關閉整個代理，只需要執行 node nginx.js stop 即可，再次訪問就訪問不到了