摘要:作為前端的你會(huì)多少現(xiàn)在閱讀的你,如果是個(gè),相信你不是個(gè)純切圖仔。反之,如果是,該進(jìn)階了,老鐵前端的我們,已經(jīng)不僅僅是做頁面,寫樣式了,我們還需要會(huì)做相關(guān)的服務(wù)器部署。廢話不多說,下面就從前端的角度來講以下的相關(guān)使用。
nginx,作為前端的你會(huì)多少?
--現(xiàn)在閱讀的你,如果是個(gè)FE,相信你不是個(gè)純切圖仔。反之,如果是,該進(jìn)階了,老鐵!
前端的我們,已經(jīng)不僅僅是做頁面,寫樣式了,我們還需要會(huì)做相關(guān)的服務(wù)器部署。廢話不多說,下面就從前端的角度來講以下nginx的相關(guān)使用。
給我們的靜態(tài)資源啟一個(gè)web 服務(wù)
給我們的nodejs 的項(xiàng)目設(shè)置反向代理,80端口訪問
給我們的接口做轉(zhuǎn)發(fā)
設(shè)置跨域請(qǐng)求
配置https服務(wù)的請(qǐng)求接口
一、登錄云服務(wù)器
首先你得有一臺(tái)linux服務(wù)器(用你電腦起個(gè)本地服務(wù)也OK,這里不做這個(gè)介紹,我們用的是云服務(wù)器),如果沒有,你可以上相關(guān)的云服務(wù)實(shí)驗(yàn)室開 1、2個(gè)小時(shí)的服務(wù)器玩玩也行,這里推薦 阿里云的 https://edu.aliyun.com/lab/
下面是取阿里云開放實(shí)驗(yàn)室的服務(wù)器演示:
登錄服務(wù)器:
二、安裝nginx (源碼編譯安裝)
1、安裝nginx 的相關(guān)依賴
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安裝選項(xiàng)
./configure --prefix=/usr/local/nginx
3.2、編譯安裝
make && make install
3.3、啟動(dòng)、查看進(jìn)程
/usr/local/nginx/sbin/nginx
ps -ef | grep nginx
查看網(wǎng)頁,nginx 啟動(dòng)成功。
補(bǔ)充命令:
/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
在倒數(shù)第二行添加 include vhosts/*.conf
(以上nginx 的安裝路徑,可以自己自由選擇),
??????????????????????????????
注意:下面具體的演示案例,是我個(gè)人的服務(wù)器,使用的是域名訪問, 上面的實(shí)驗(yàn)服務(wù)器的時(shí)長限制,沒辦法做很多的業(yè)務(wù)操作。
====到這里基本上配置好nginx 的使用和擴(kuò)展,下面就是我們要利用 nginx 實(shí)現(xiàn)一些功能了。====
三、使用nginx
1、給我們的靜態(tài)資源啟一個(gè)web 服務(wù)
vim /usr/local/nginx/vhosts/active.conf ,將server 模塊寫進(jìn)去,
server {
listen 8008; server_name localhost; root /usr/myfile/dist; index index.html;
}
訪問:
2、接口轉(zhuǎn)發(fā), 跨域請(qǐng)求
server {
server_name vue.wtodd.wang; charset utf-8; location /nodejsapi/ { proxy_pass http://localhost:5000/; }
}
實(shí)際請(qǐng)求 http://localhost:5000/ 的接口,被代理到請(qǐng)求該域名de /nodejsapi/ 下
訪問:
3、給我們其他端口啟動(dòng)的nodejs 項(xiàng)目設(shè)置反向代理到80端口訪問
server {
listen 80; server_name csa.scampus.cn; location / { proxy_pass http://127.0.0.1:8000; }
}
頁面訪問:
實(shí)際項(xiàng)目訪問地址:
4、配置https服務(wù)的請(qǐng)求接口
這里涉及到了https 證書的配置,這里不牽涉這個(gè)話題,這里https://help.aliyun.com/document_detail/28548.html?spm=a2c4g.11186623.6.556.31ae62aaoYIZQr 是阿里云的免費(fèi)https 證書,可參照該步驟。
有人說,前端為什么還要https 的服務(wù)? 微信小程序的服務(wù)接口,需要走h(yuǎn)ttps 的哇!我們做demo,不要自己會(huì)配置一下嗎,省得找后臺(tái)哇
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/; }
}
訪問:原先真實(shí)請(qǐng)求地址
配置 https 訪問的地址:
總結(jié):
這里nginx 在前端的使用只是很少的一部分,比如做請(qǐng)求攔截、api版本控制等,但這一些應(yīng)用也是受到前端處理范圍的局限,使得我們運(yùn)用的也不多,相信以后隨著“大前端“的發(fā)展,我們會(huì)更多的使用nginx功能或類nginx 服務(wù)功能。
原文地址https://www.cnblogs.com/adouwt/p/10596496.html
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/3338.html
摘要:下面是取阿里云開放實(shí)驗(yàn)室的服務(wù)器演示登錄安裝源碼編譯安裝安裝的相關(guān)依賴下載包解壓編譯安裝配置安裝選項(xiàng)編譯安裝啟動(dòng)查看進(jìn)程查看網(wǎng)頁,啟動(dòng)成功。 --現(xiàn)在閱讀的你,如果是個(gè)FE,相信你不是個(gè)純切圖仔。反之,如果是,該進(jìn)階了,老鐵! 前端的我們,已經(jīng)不僅僅是做頁面,寫樣式了,我們還需要會(huì)做相關(guān)的服務(wù)器部署。廢話不多說,下面就從前端的角度來講以下nginx的相關(guān)使用。 給我們的靜態(tài)資源啟一個(gè)...
摘要:反之,如果是,該進(jìn)階了,老鐵前端的我們,已經(jīng)不僅僅是做頁面,寫樣式了,我們還需要會(huì)做相關(guān)的服務(wù)器部署。廢話不多說,下面就從前端的角度來講以下的相關(guān)使用。--現(xiàn)在閱讀的你,如果是個(gè)FE,相信你不是個(gè)純切圖仔。反之,如果是,該進(jìn)階了,老鐵! 前端的我們,已經(jīng)不僅僅是做頁面,寫樣式了,我們還需要會(huì)做相關(guān)的服務(wù)器部署。廢話不多說,下面就從前端的角度來講以下nginx的相關(guān)使用。 給我們的靜態(tài)資源啟...
摘要:轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處,尋求一些別人的經(jīng)驗(yàn)和總結(jié),無可厚非,但是決定了就一定要堅(jiān)定的走下去,謹(jǐn)慎是為了更好的堅(jiān)持,而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮? 在人生的抉擇處,尋求一些別人的經(jīng)驗(yàn)和總結(jié),無可厚非,但是決定了就一定要堅(jiān)定的走下去,謹(jǐn)慎是為了更好的堅(jiān)持,而不是放棄的理由。寫在前面:這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要:轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處,尋求一些別人的經(jīng)驗(yàn)和總結(jié),無可厚非,但是決定了就一定要堅(jiān)定的走下去,謹(jǐn)慎是為了更好的堅(jiān)持,而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮? 在人生的抉擇處,尋求一些別人的經(jīng)驗(yàn)和總結(jié),無可厚非,但是決定了就一定要堅(jiān)定的走下去,謹(jǐn)慎是為了更好的堅(jiān)持,而不是放棄的理由。寫在前面:這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要:轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處,尋求一些別人的經(jīng)驗(yàn)和總結(jié),無可厚非,但是決定了就一定要堅(jiān)定的走下去,謹(jǐn)慎是為了更好的堅(jiān)持,而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮? 在人生的抉擇處,尋求一些別人的經(jīng)驗(yàn)和總結(jié),無可厚非,但是決定了就一定要堅(jiān)定的走下去,謹(jǐn)慎是為了更好的堅(jiān)持,而不是放棄的理由。寫在前面:這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
閱讀 3444·2021-09-08 10:46
閱讀 1180·2019-08-30 13:17
閱讀 2358·2019-08-30 13:05
閱讀 1200·2019-08-29 15:29
閱讀 2882·2019-08-29 11:31
閱讀 533·2019-08-26 12:13
閱讀 1532·2019-08-26 11:42
閱讀 1817·2019-08-23 18:37