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

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

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

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

1、登陸雲服務器

 

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

 

登陸服務器:

 

2、安裝nginx (源碼編譯安裝)

一、安裝nginx 的相關依賴

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

 

2. 下載nginx包

wget http://nginx.org/download/nginx-1.15.8.tar.gz

 

解壓：

tar -zxvf nginx-1.15.8.tar.gz

 

 

3.編譯安裝

3.一、 配置nginx安裝選項

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

 

3.二、編譯安裝

make && make install

 

 

3.三、啓動、查看進程

/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 實現一些功能了。====

3、使用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/document_detail/28548.html?spm=a2c4g.11186623.6.556.31ae62aaoYIZQr 是阿里雲的免費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 服務功能。

 

歡迎品閱和指正!