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

Near_Li 發布于2019-04-24 19:39 / 1688人閱讀

摘要：作為前端的你會多少現在閱讀的你，如果是個，相信你不是個純切圖仔。反之，如果是，該進階了，老鐵前端的我們，已經不僅僅是做頁面，寫樣式了，我們還需要會做相關的服務器部署。廢話不多說，下面就從前端的角度來講以下的相關使用。

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

下載nginx包

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，不要自己會配置一下嗎，省得找后臺哇
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 服務功能。
原文地址https://www.cnblogs.com/adouwt/p/10596496.html

云服務器 GPU云服務器部署前端到云服務器nginx 你會發現租用云服務器你會選擇什么配置前端工程師月薪多少

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/3338.html

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

摘要：下面是取阿里云開放實驗室的服務器演示登錄安裝源碼編譯安裝安裝的相關依賴下載包解壓編譯安裝配置安裝選項編譯安裝啟動查看進程查看網頁，啟動成功。 --現在閱讀的你，如果是個FE，相信你不是個純切圖仔。反之，如果是，該進階了，老鐵！前端的我們，已經不僅僅是做頁面，寫樣式了，我們還需要會做相關的服務器部署。廢話不多說，下面就從前端的角度來講以下nginx的相關使用。給我們的靜態資源啟一個...

inapt 2019-07-25 14:42 評論0 收藏0
nginx,作為前端的你會多少？

摘要：反之，如果是，該進階了，老鐵前端的我們，已經不僅僅是做頁面，寫樣式了，我們還需要會做相關的服務器部署。廢話不多說，下面就從前端的角度來講以下的相關使用。--現在閱讀的你，如果是個FE，相信你不是個純切圖仔。反之，如果是，該進階了，老鐵！前端的我們，已經不僅僅是做頁面，寫樣式了，我們還需要會做相關的服務器部署。廢話不多說，下面就從前端的角度來講以下nginx的相關使用。給我們的靜態資源啟...

Coding01 2019-04-24 19:39 評論0 收藏0
26自學轉行前端（寫給和1年前一樣迷茫的我的你）

摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。轉行前端有哪些疑慮？在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

番茄西紅柿 2019-08-30 15:54 評論0 收藏2637
26自學轉行前端（寫給和1年前一樣迷茫的我的你）

摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。轉行前端有哪些疑慮？在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

番茄西紅柿 2019-08-22 18:26 評論0 收藏2577
26自學轉行前端（寫給和1年前一樣迷茫的我的你）

摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。轉行前端有哪些疑慮？在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

番茄西紅柿 2019-08-02 10:48 評論0 收藏0