nginx,做爲前端的你會多少？

--如今閱讀的你，若是是個FE，相信你不是個純切圖仔。反之，若是是，該進階了，老鐵！

前端的咱們，已經不單單是作頁面，寫樣式了，咱們還須要會作相關的服務器部署。廢話很少說，下面就從前端的角度來說如下nginx的相關使用。

• 給咱們的靜態資源啓一個web 服務
• 給咱們的nodejs 的項目設置反向代理，80端口訪問
• 給咱們的接口作轉發
• 設置跨域請求
• 配置https服務的請求接口

登陸雲服務器

首先你得有一臺linux服務器（用你電腦起個本地服務也OK，這裏不作這個介紹，咱們用的是雲服務器），若是沒有，你能夠上相關的雲服務實驗室開 一、2個小時的服務器玩玩也行，這裏推薦 阿里雲的 https://edu.aliyun.com/lab/ ，和騰訊雲的 https://cloud.tencent.com/dev... 。下面是取阿里雲開放實驗室的服務器演示：

登陸

安裝nginx (源碼編譯安裝)

安裝nginx 的相關依賴

yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel

下載nginx包

wget http://nginx.org/download/ngi...

解壓：

tar -zxvf nginx-1.15.8.tar.gz

編譯安裝

配置nginx安裝選項

./configure --prefix=/usr/local/nginx

編譯安裝

make && make install

啓動、查看進程

/usr/local/nginx/sbin/nginx

ps -ef | grep nginx

查看網頁，nginx 啓動成功。

補充命令：

/usr/local/nginx/sbin/nginx -t

// 查看nginx 配置文件是否語法正確

/usr/local/nginx/sbin/nginx -s reload
// 從新加載nginx 配置

/usr/local/nginx/sbin/nginx -s stop

// 中止nginx

咱們要修改nginx 的基本配置， 作如下步驟：

cd /usr/local/nginx

mkdir vhosts

cd vhosts

vim active.conf

按 esc

再按 :wq 保存並退出

修改nginx.conf

vim /usr/local/nginx/nginx.conf

在倒數第二行添加

include vhosts/*.conf

⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️

（以上nginx 的安裝路徑，能夠本身自由選擇）
注意：下面具體的演示案例，是我我的的服務器，使用的是域名訪問, 上面的實驗服務器的時長限制，沒辦法作不少的業務操做。

到這裏基本上配置好nginx 的使用和擴展，下面就是咱們要利用 nginx 實現一些功能了。

使用nginx

一、給咱們的靜態資源啓一個web 服務

vim /usr/local/nginx/vhosts/active.conf

將server 模塊寫進去，

server {

listen 8008;
      server_name localhost;
      root /usr/myfile/dist;
      index index.html;

}

訪問：

二、接口轉發， 跨域請求

server {

server_name vue.wtodd.wang;
      charset utf-8;
      location /nodejsapi/ {
          proxy_pass http://localhost:5000/;
      }

}

實際請求 http://localhost:5000/ 的接口，被代理到請求該域名de /nodejsapi/ 下
訪問：

三、給咱們其餘端口啓動的nodejs 項目設置反向代理到80端口訪問

server {

listen 80;
  server_name csa.scampus.cn;
  location / {
      proxy_pass http://127.0.0.1:8000;
  }

}

頁面訪問：

實際項目訪問地址：

四、配置https服務的請求接口

這裏涉及到了https 證書的配置，這裏不牽涉這個話題，這裏
https://help.aliyun.com/docum...
是阿里雲的免費https 證書，可參照該步驟。
有人說，前端爲何還要https 的服務？ 微信小程序的服務接口，須要走https 的哇！咱們作demo，不要本身會配置一下嗎，免得找後臺哇😂

server {
            listen       80;
            server_name  api.scampus.cn;
            rewrite ^ https://$http_host$request_uri? permanent;
    }
    server {
            listen 443;
            ssl_certificate /etc/nginx/ssl/alyca.pem;
            ssl_certificate_key /etc/nginx/ssl/alyca.key;
            server_name api.scampus.cn;
            ssl on;
            ssl_session_timeout 5m;
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
            ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
            ssl_prefer_server_ciphers on;
            location / {
                    proxy_pass http://localhost:4000/;
            }
    }

訪問：原先真實請求地址

配置 https 訪問的地址：

總結：

這裏nginx 在前端的使用只是不多的一部分，好比作請求攔截、api版本控制等，但這一些應用也是受到前端處理範圍的侷限，使得咱們運用的也很少，相信之後隨着「大前端「的發展,咱們會更多的使用nginx功能或類nginx 服務功能。

歡迎評閱和指正！我是貳伶邇