nginx,作為前端的你會多少？

nginx,作為前端的你會多少？

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

前端的我們，已經不僅僅是做頁面，寫樣式了，我們還需要會做相關的伺服器部署。廢話不多說，下面就從前端的角度來講以下nginx的相關使用。

給我們的靜态資源啟一個web 服務

給我們的nodejs 的項目設定反向代理，80端口通路

給我們的接口做轉發

設定跨域請求

配置https服務的請求接口

一、登入雲伺服器

首先你得有一台linux伺服器（用你電腦起個本地服務也OK，這裡不做這個介紹，我們用的是雲伺服器），如果沒有，你可以上相關的雲服務實驗室開 1、2個小時的伺服器玩玩也行，這裡推薦 阿裡雲的

https://edu.aliyun.com/lab/

下面是取阿裡雲開放實驗室的伺服器示範：

登入伺服器:

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

1、安裝nginx 的相關依賴

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

1. 下載下傳nginx包
2. http://nginx.org/download/nginx-1.15.8.tar.gz

解壓：

tar -zxvf nginx-1.15.8.tar.gz

3.編譯安裝

3.1、 配置nginx安裝選項

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

3.2、編譯安裝

make && make install

3.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 實作一些功能了。====

三、使用nginx

1、給我們的靜态資源啟一個web 服務

vim /usr/local/nginx/vhosts/active.conf ，将server 子產品寫進去，

server {

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

}

通路：

2、接口轉發， 跨域請求

server {

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

實際請求

http://localhost:5000/

的接口，被代理到請求該域名de /nodejsapi/ 下

3、給我們其他端口啟動的nodejs 項目設定反向代理到80端口通路

server {

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

頁面通路：

實際項目通路位址：

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

這裡涉及到了https 證書的配置，這裡不牽涉這個話題，這裡

https://help.aliyun.com/document_detail/28548.html?spm=a2c4g.11186623.6.556.31ae62aaoYIZQr

是阿裡雲的免費https 證書，可參照該步驟。

有人說，前端為什麼還要https 的服務？ 微信小程式的服務接口，需要走https 的哇！我們做demo，不要自己會配置一下嗎，省得找背景哇

listen       80;
    server_name  api.scampus.cn;
    rewrite ^ https://$http_host$request_uri? permanent;           

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 服務功能。

原文位址

https://www.cnblogs.com/adouwt/p/10596496.html