從零開始摸爬滾打搭建自己的網(wǎng)站（一）

這是一個只會前端的后臺小白日常雜記蝶防，工作閑時的自學(xué)經(jīng)歷，如有錯誤歡迎指正：
目標(biāo)是3個Demo（Angular谅阿，Vue，React）酬滤，用到的技術(shù)應(yīng)該有：
后臺：Nginx签餐，Node，Express盯串，PM2氯檐；（對后臺沒啥了解，用到再補(bǔ)充吧）
前端：Vue体捏，VueX及一些相關(guān)技術(shù)冠摄；
萬事開頭難 首先第一件事是買臺云服務(wù)器 因為以前用現(xiàn)有的服務(wù)器搭建了一個博客，怕弄亂了几缭，這次趁著百度云優(yōu)惠就又買了一臺河泳。
廢話不多說，現(xiàn)在就開始吧年栓。
前置要求：1H1G服務(wù)器一臺（跑個小網(wǎng)站綽綽有余） 域名一個 滿世界的特惠域名 隨便買了一個練手

第一步：閱讀大神寫的nginx文檔 http://www.nginx.cn/install 由于一時沒找到官方寫的nginx文檔拆挥，沒辦法先用民間的吧，看評論都是說好的某抓，作為小白沒辦法就硬著頭皮上吧纸兔。（以下步驟多為參考該網(wǎng)站，侵刪）否副。

第二步：看完了大神的文檔 我們就開始操作吧汉矿！
首先在終端連接我們的服務(wù)器 ssh root@xxx.xxx.xx.xx@后面的是我們的服務(wù)器外網(wǎng)地址。
連接成功后開始安裝nginx

# 安裝依賴
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
# 下載nginx安裝包
wget http://nginx.org/download/nginx-1.12.2.tar.gz
# 解壓縮
tar -zxvf linux-nginx-1.12.2.tar.gz
cd nginx-1.12.2/
# 執(zhí)行配置
./configure
# 編譯安裝(默認(rèn)安裝在/usr/local/nginx)
make
make install

防火墻配置
nginx默認(rèn)監(jiān)聽80端口备禀，如果未關(guān)閉防火墻需要配置iptables規(guī)則開放80端口(以centos6為例)洲拇。
編輯配置文件：vim /etc/sysconfig/iptables
在文件中間添加iptables規(guī)則
-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT
重啟防火墻：service iptables restart
或者關(guān)閉iptables規(guī)則：iptables -F && iptables -t nat -F

Nginx驗證
nginx主配置文件：/usr/local/nginx/conf/nginx.conf
nginx日志文件：/usr/local/nginx/logs/access.log
啟動Nginx：sudo /usr/local/nginx/sbin/nginx

Nginx常用命令
測試配置文件：${Nginx}/sbin/nginx -t
啟動命令：${Nginx}/sbin/nginx
停止命令：${Nginx}/sbin/nginx -s stop/quit
重啟命令：${Nginx}/sbin/nginx -s reload
查看進(jìn)程命令：ps -ef | grep nginx
平滑重啟：kill -HUP [Nginx主進(jìn)程號(即ps命令查到的PID)]

也可建立軟連接
ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/
nginx -t

訪問網(wǎng)址/直接訪問IP地址

好了奈揍，現(xiàn)在我們的nginx安裝好了！
這時想到公司的不同網(wǎng)站都是在同一個主域名下赋续，通過子域名進(jìn)行區(qū)分打月，該如何配置呢？
經(jīng)過度娘的百般折磨后 我找到了配置的方法蚕捉。
首先我們來到nginx的配置目錄下

image.png

我們可以看到目錄下有這些文件
用vi編輯器打開配置文件 vi nginx.conf 以下是添加注釋后的文件

# 運(yùn)行用戶
#user  nobody; 
#啟動進(jìn)程,通常設(shè)置成和cpu的數(shù)量相等
worker_processes  1;

#全局錯誤日志及PID文件
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

#工作模式及連接數(shù)上限
events {
    #單個后臺worker process進(jìn)程的最大并發(fā)鏈接數(shù)
    worker_connections  1024;
    # 根據(jù)大神的說法
    # 并發(fā)總數(shù)是 worker_processes 和 worker_connections 的乘積
    # 即 max_clients = worker_processes * worker_connections
    # 在設(shè)置了反向代理的情況下奏篙，max_clients = worker_processes * worker_connections / 4  為什么
    # 為什么上面反向代理要除以4，應(yīng)該說是一個經(jīng)驗值
    # 根據(jù)以上條件迫淹，正常情況下的Nginx Server可以應(yīng)付的最大連接數(shù)為：4 * 8000 = 32000
    # worker_connections 值的設(shè)置跟物理內(nèi)存大小有關(guān)
    # 因為并發(fā)受IO約束秘通，max_clients的值須小于系統(tǒng)可以打開的最大文件數(shù)
    # 而系統(tǒng)可以打開的最大文件數(shù)和內(nèi)存大小成正比，一般1GB內(nèi)存的機(jī)器上可以打開的文件數(shù)大約是10萬左右
    # 我們來看看360M內(nèi)存的VPS可以打開的文件句柄數(shù)是多少：
    # $ cat /proc/sys/fs/file-max
    # 輸出 34336
    # 32000 < 34336敛熬，即并發(fā)連接總數(shù)小于系統(tǒng)可以打開的文件句柄總數(shù)肺稀，這樣就在操作系統(tǒng)可以承受的范圍之內(nèi)
    # 所以，worker_connections 的值需根據(jù) worker_processes 進(jìn)程數(shù)目和系統(tǒng)可以打開的最大文件總數(shù)進(jìn)行適當(dāng)?shù)剡M(jìn)行設(shè)置
    # 使得并發(fā)總數(shù)小于操作系統(tǒng)可以打開的最大文件數(shù)目
    # 其實(shí)質(zhì)也就是根據(jù)主機(jī)的物理CPU和內(nèi)存進(jìn)行配置
    # 當(dāng)然应民，理論上的并發(fā)總數(shù)可能會和實(shí)際有所偏差话原，因為主機(jī)還有其他的工作進(jìn)程需要消耗系統(tǒng)資源。
    # ulimit -SHn 65535
}


http {
    #設(shè)定mime類型,類型由mime.type文件定義
    include       mime.types;
    default_type  application/octet-stream;

    #設(shè)定日志格式
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    #sendfile 指令指定 nginx 是否調(diào)用 sendfile 函數(shù)（zero copy 方式）來輸出文件诲锹，
    #對于普通應(yīng)用繁仁，必須設(shè)為 on,
    #如果用來進(jìn)行下載等應(yīng)用磁盤IO重負(fù)載應(yīng)用，可設(shè)置為 off归园，
    #以平衡磁盤與網(wǎng)絡(luò)I/O處理速度黄虱，降低系統(tǒng)的uptime.
    sendfile        on;
    #tcp_nopush     on;

    #連接超時時間
    #keepalive_timeout  0;
    keepalive_timeout  65;

    #開啟gzip壓縮
    gzip  on;
    # gzip_disable "MSIE [1-6].";

    #設(shè)定虛擬主機(jī)配置
    server {
        #偵聽80端口
        listen       80;
        #定義使用 www.dev.xxxxxxxx.cn訪問
        server_name  www.dev.xxxxxxxx.cn;
        
        #默認(rèn)請求
        location / {
            #根路徑配置
            root  html;
            #定義首頁索引文件的名稱
            index  dev.html  dev.htm;
        }
        # 定義錯誤提示頁面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}
    server {
        listen       80;
        server_name  www.test.xxxxxxx.cn;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        root  /www;

        location /test {
           index index.html index.htm;
        }
        location  / {
            index  index.html index.htm;
         }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
         location /page {
            root   html;
            index  index.html index.htm;
        }#
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

}

要想實(shí)現(xiàn)同一網(wǎng)址指向不同頁面 有3種方案
方案1：監(jiān)聽不同的端口

 server {
        #偵聽80端口
        listen       80;
        #定義使用 www.dev.xxxxxxxx.cn訪問
        server_name  www.dev.xxxxxxxx.cn;
        
        #默認(rèn)請求
        location / {
            #根路徑配置
            root  html;
            #定義首頁索引文件的名稱
            index  dev.html  dev.htm;
        }
        # 定義錯誤提示頁面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}
 server {
        #偵聽80端口
        listen       8888;
        #定義使用 www.dev.xxxxxxxx.cn訪問
        server_name  www.dev.xxxxxxxx.cn;
        
        #默認(rèn)請求
        location / {
            #根路徑配置
            root  html;
            #定義首頁索引文件的名稱
            index  dev.html  dev.htm;
        }
        # 定義錯誤提示頁面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}

方案2：使用不同的子域名

 server {
        #偵聽80端口
        listen       80;
        #定義使用 www.dev.xxxxxxxx.cn訪問
        server_name  www.dev.xxxxxxxx.cn;
        
        #默認(rèn)請求
        location / {
            #根路徑配置
            root  html;
            #定義首頁索引文件的名稱
            index  dev.html  dev.htm;
        }
        # 定義錯誤提示頁面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}
 server {
        #偵聽80端口
        listen       80;
        #定義使用 www.dev.xxxxxxxx.cn訪問
        server_name  www.test.xxxxxxxx.cn;
        
        #默認(rèn)請求
        location / {
            #根路徑配置
            root  html;
            #定義首頁索引文件的名稱
            index  dev.html  dev.htm;
        }
        # 定義錯誤提示頁面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}

方法3 配置location 見配置文件詳解

location這就有點(diǎn)復(fù)雜了

nginx location指令詳解

Nginx的HTTP配置主要包括三個區(qū)塊，結(jié)構(gòu)如下：
http { //這個是協(xié)議級別
　　include mime.types;
　　default_type application/octet-stream;
　　keepalive_timeout 65;
　　gzip on;
　　　　server { //這個是服務(wù)器級別
　　　　　　listen 80;
　　　　　　server_name localhost;
　　　　　　　　location / { //這個是請求級別
　　　　　　　　　　root html;
　　　　　　　　　　index index.html index.htm;
　　　　　　　　}
　　　　　　}
}

location區(qū)段

通過指定模式來與客戶端請求的URI相匹配庸诱，基本語法如下：location [=||*|^~|@] pattern{……}

1捻浦、沒有修飾符 表示：必須以指定模式開始，如：

server {
　　server_name baidu.com;
　　location /abc {
　　　　……
　　}
}

那么桥爽，如下是對的：
http://baidu.com/abc
http://baidu.com/abc?p1
http://baidu.com/abc/
http://baidu.com/abcde

2朱灿、=表示：必須與指定的模式精確匹配

server {
server_name sish
　　location = /abc {
　　　　……
　　}
}
那么，如下是對的：
http://baidu.com/abc
http://baidu.com/abc?p1
如下是錯的：
http://baidu.com/abc/
http://baidu.com/abcde

3钠四、~ 表示：指定的正則表達(dá)式要區(qū)分大小寫

server {
server_name baidu.com;
　　location ~ ^/abc$ {
　　　　……
　　}
}
那么盗扒，如下是對的：
http://baidu.com/abc
http://baidu.com/abc?p1=11&p2=22
如下是錯的：
http://baidu.com/ABC
http://baidu.com/abc/
http://baidu.com/abcde

4、~* 表示：指定的正則表達(dá)式不區(qū)分大小寫

server {
server_name baidu.com;
location ~* ^/abc$ {
　　　　……
　　}
}
那么形导，如下是對的：
http://baidu.com/abc
http://baidu..com/ABC
http://baidu..com/abc?p1=11&p2=22
如下是錯的：
http://baidu..com/abc/
http://baidu..com/abcde

5环疼、^~ 類似于無修飾符的行為，也是以指定模式開始朵耕，不同的是，如果模式匹配淋叶，
那么就停止搜索其他模式了阎曹。
6、@ ：定義命名location區(qū)段，這些區(qū)段客戶段不能訪問处嫌，只可以由內(nèi)部產(chǎn)生的請
求來訪問栅贴，如try_files或error_page等

查找順序和優(yōu)先級

1：帶有“=“的精確匹配優(yōu)先

2：沒有修飾符的精確匹配

3：正則表達(dá)式按照他們在配置文件中定義的順序

4：帶有“^~”修飾符的，開頭匹配

5：帶有“~” 或“~*” 修飾符的熏迹，如果正則表達(dá)式與URI匹配

6：沒有修飾符的檐薯，如果指定字符串與URI開頭匹配

Location區(qū)段匹配示例

location = / {
　　# 只匹配 / 的查詢.
　　[ configuration A ]
}
location / {
　　# 匹配任何以 / 開始的查詢，但是正則表達(dá)式與一些較長的字符串將被首先匹配注暗。
　　[ configuration B ]
}
location ^~ /images/ {
　　# 匹配任何以 /images/ 開始的查詢并且停止搜索坛缕，不檢查正則表達(dá)式。
　　[ configuration C ]
}
location ~* \.(gif|jpg|jpeg)$ {
　　# 匹配任何以gif, jpg, or jpeg結(jié)尾的文件捆昏，但是所有 /images/ 目錄的請求將在Configuration C中處
　　理赚楚。
　　[ configuration D ]
} 各
請求的處理如下例：
■/ → configuration A
■/documents/document.html → configuration B
■/images/1.gif → configuration C
■/documents/1.jpg → configuration D

root 、alias指令區(qū)別

location /img/ {
    alias /var/www/image/;
}
#若按照上述配置的話骗卜，則訪問/img/目錄里面的文件時宠页，ningx會自動去/var/www/image/目錄找文件

location /img/ {
    root /var/www/image;
}
#若按照這種配置的話，則訪問/img/目錄下的文件時寇仓，nginx會去/var/www/image/img/目錄下找文件举户。

\color{red}{alias是一個目錄別名的定義，root則是最上層目錄的定義遍烦。}
\color{red}{還有一個重要的區(qū)別是alias后面必須要用“/”結(jié)束敛摘，否則會找不到文件的。乳愉。兄淫。而root則可有可無~~}

proxy_pass

proxy_pass——反向代理配置，用于代理請求蔓姚，適用于前后端負(fù)載分離或多臺機(jī)器捕虽、服務(wù)器負(fù)載分離的場景，在匹配到location配置的URL路徑后坡脐，轉(zhuǎn)發(fā)請求到proxy_pass配置額URL泄私，是否會附加location配置路徑與proxy_pass配置的路徑后是否有"/"有關(guān)，有"/"則不附加备闲，如：

location   /test/  {
        proxy_pass    http://127.0.0.1:8080/;
}

請求/test/1.jpg晌端，將會被nginx轉(zhuǎn)發(fā)請求到http://127.0.0.1:8080/1.jpg（未附加/test/路徑）

--以上部分內(nèi)容轉(zhuǎn)載自 http://www.nginx.cn/install

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市恬砂，隨后出現(xiàn)的幾起案子咧纠，更是在濱河造成了極大的恐慌，老刑警劉巖泻骤，帶你破解...
    沈念sama閱讀 206,968評論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件漆羔，死亡現(xiàn)場離奇詭異梧奢，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)演痒，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門亲轨，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人鸟顺，你說我怎么就攤上這事惦蚊。” “怎么了讯嫂？”我有些...
    開封第一講書人閱讀 153,220評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蹦锋，是天一觀的道長。 經(jīng)常有香客問我端姚，道長晕粪，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,416評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任渐裸，我火速辦了婚禮巫湘，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘昏鹃。我一直安慰自己尚氛，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布洞渤。 她就那樣靜靜地躺著阅嘶，像睡著了一般。 火紅的嫁衣襯著肌膚如雪载迄。 梳的紋絲不亂的頭發(fā)上讯柔，一...
    開封第一講書人閱讀 49,144評論 1贊 285
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音护昧，去河邊找鬼魂迄。 笑死，一個胖子當(dāng)著我的面吹牛惋耙，可吹牛的內(nèi)容都是我干的捣炬。 我是一名探鬼主播，決...
    沈念sama閱讀 38,432評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼绽榛，長吁一口氣：“原來是場噩夢啊……” “哼湿酸！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起灭美，我...
    開封第一講書人閱讀 37,088評論 0贊 261
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤推溃，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后冲粤，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體美莫，經(jīng)...
    沈念sama閱讀 43,586評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡页眯，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年梯捕，在試婚紗的時候發(fā)現(xiàn)自己被綠了厢呵。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡傀顾，死狀恐怖襟铭，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情短曾，我是刑警寧澤寒砖，帶...
    沈念sama閱讀 33,783評論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站嫉拐，受9級特大地震影響哩都，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜婉徘，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一漠嵌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧盖呼，春花似錦儒鹿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0贊 19
  • 一樁弒父案约炎，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蟹瘾，卻和暖如春圾浅，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背憾朴。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工狸捕， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人伊脓。 一個月前我還...
    沈念sama閱讀 45,595評論 2贊 355
  • 代替公主和親
    正文 我出身青樓府寒，卻偏偏與公主長得像，于是被迫代替她去往敵國和親报腔。 傳聞我的和親對象是個殘疾皇子株搔，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2贊 345