摘要：前端平時(shí)接觸到的機(jī)會(huì)并不多，但是懂點(diǎn)對(duì)于前端來(lái)說(shuō)還是有益無(wú)害的，起碼還是要了解一下最基本的部署知識(shí)。特別注意的是，國(guó)內(nèi)注冊(cè)的域名要實(shí)名備案，否則無(wú)法域名解析。

前端平時(shí)接觸到linux的機(jī)會(huì)并不多，但是懂點(diǎn)linux對(duì)于前端來(lái)說(shuō)還是有益無(wú)害的，起碼還是要了解一下最基本的部署知識(shí)。

博客地址

要部署項(xiàng)目，首先我們需要一臺(tái)服務(wù)器。平時(shí)開(kāi)發(fā)，項(xiàng)目是跑在我們本地電腦上的，現(xiàn)在我們想要讓所有人都能訪問(wèn)這個(gè)項(xiàng)目，就需要部署到一臺(tái)能被外網(wǎng)訪問(wèn)的服務(wù)器?，F(xiàn)在市面上有虛擬主機(jī)，VPS，ECS（云服務(wù)器）。虛擬主機(jī)我就不考慮了，因?yàn)樘摂M主機(jī)基本不支持ssh登錄，而我們希望學(xué)習(xí)linux知識(shí)，所以只考慮VPS和ECS。而ECS價(jià)格比較高，考慮到我只是為了學(xué)習(xí)用，對(duì)于服務(wù)器的性能和配置要求不高，最后決定購(gòu)買(mǎi)VPS。

VPS的購(gòu)買(mǎi)渠道有很多，比如搬瓦工,vultr，我這里購(gòu)買(mǎi)的是vultr的VPS($5/mo的套餐)，安裝的操作系統(tǒng)是Ubuntu 14.04 x64

安裝成功過(guò)，在vultr控制臺(tái)可以看到如下信息:

我們想在本地電腦登入到服務(wù)器，這就需要一個(gè)支持SSH登錄的終端工具。windows上比如Xshell，cmder，Mac上比如iterm2。

打開(kāi)終端，輸入

ssh -p 你的端口號(hào) 你的用戶名@登錄地址

# 比如登錄入到vultr的vps(默認(rèn)端口是22，所以可以不指定)
 ssh root@172.11.11.111

輸入完密碼后，即可進(jìn)入服務(wù)器

passwd

vultr默認(rèn)密碼太復(fù)雜，所以自定義密碼方便記憶。

apt-get命令可以很方便的下載我們需要的包

apt-get update

apt-get install openssl libssl-dev nginx wget git

Nginx安裝完成后，在瀏覽器訪問(wèn)你服務(wù)器的IP地址(例如：http://149.28.17.111/ )， 應(yīng)該可以看到Nginx的歡迎界面！

我現(xiàn)在希望訪問(wèn)http://149.28.17.111/test 可以展示一個(gè)靜態(tài)頁(yè)面，這時(shí)就該Nginx上場(chǎng)了！

mkdir -p static/test

在當(dāng)前目錄下，新建一個(gè)static文件夾，static里面又新建了一個(gè)test目錄，在里面存放一個(gè)靜態(tài)文件index.html

vi static/test/index.html

按下i進(jìn)入insert模式，輸入如下代碼:

    
    


    
無(wú)路賽

按下ESC退出insert模式，輸入(注意有冒號(hào)！)

:wq!

保存退出

vi /etc/nginx/conf.d/mytest.conf

新建一個(gè)nginx配置文件，輸入如下代碼

server {
    listen 80;
    server_name 149.28.17.111(填寫(xiě)你的ip地址);

    location /test {
        root   /root/static;
        index  index.html;
    }
}

修改nginx用戶組(不然會(huì)報(bào)403)

vi /etc/nginx/nginx.conf

www-data修改為root

user root;

于是訪問(wèn)http://149.28.17.111/test Nginx就會(huì)去找/root/static/test目錄下的index.html

前面我們使用vi編輯器新建了兩個(gè)文件(mytest.conf index.html)，你可能覺(jué)得寫(xiě)起代碼來(lái)一點(diǎn)都不方便。其實(shí)我們也可以在本地寫(xiě)好這兩個(gè)文件，然后使用ftp工具將這兩個(gè)文件上傳到服務(wù)器。

ftp工具有很多，比如flashfxp。以xshell自帶的xftp為例，打開(kāi)ftp，連接到服務(wù)器

ftp界面，左邊是我們本地目錄，右邊是服務(wù)器目錄

右邊可視化界面，能很方便的查看服務(wù)器的各個(gè)文件夾，同時(shí)也可以把本地的文件上傳到服務(wù)器(只需把文件拖拽到右邊窗口即可)

前端開(kāi)發(fā)經(jīng)常要使用npm安裝各種包，因此需要搭建node環(huán)境
使用nvm進(jìn)行版本控制

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安裝完成后，新打開(kāi)一個(gè)終端登入服務(wù)器

nvm install 8.11.1

安裝完成后，輸入

node -v

如果出現(xiàn)版本，說(shuō)明node安裝成功！

新建app.js

vi app.js

const http = require("http");                                
                                                             
http.createServer((function(req, res) {                      
        res.writeHead(200, {"Content-Type": "text/plain"});   
        res.end("八嘎Hentai無(wú)路賽");                              
})).listen(8081);                                            
                                                             
console.log("server start at 8081");                         

保存退出

啟動(dòng)app.js

node app.js

在瀏覽器訪問(wèn) http://149.28.17.11:8081 就可以看見(jiàn)頁(yè)面

使用命令node app.js啟動(dòng)項(xiàng)目有個(gè)致命的問(wèn)題，如果把當(dāng)前終端關(guān)了，項(xiàng)目也就默認(rèn)關(guān)閉了。

因此我們需要使用pm2管理項(xiàng)目

npm install pm2 -g

pm2 start app.js

使用pm2啟動(dòng)項(xiàng)目后，即使當(dāng)前終端關(guān)閉了，node進(jìn)程仍然在后臺(tái)運(yùn)行著！

我們希望訪問(wèn)項(xiàng)目時(shí)，不需要帶上8081端口?？梢允褂肗ginx的反向代理功能：

vi /etc/nginx/conf.d/mytest.conf

修改配置

upstream mytest {
    server 127.0.0.1:8081;
}
server {
    listen 80;
    server_name 149.28.17.111(填寫(xiě)你的ip地址);
    
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Nginx-Proxy true;

        proxy_pass http://mytest;
        proxy_redirect off;
    }

    location /test {
        root   /root/static;
        index  index.html;
    }
}

保存退出，重啟nginx

nginx -s reload

原理就是：訪問(wèn)http://149.28.17.111時(shí)， nginx反向代理到http://149.28.17.111:8081， 并把本地node服務(wù)器返回的內(nèi)容展示出來(lái)

目前我們?cè)L問(wèn)網(wǎng)站需要直接輸入ip地址，這樣十分不方便。為此，我們需要買(mǎi)一個(gè)域名來(lái)解析到網(wǎng)站。

域名提供商有很多，比如萬(wàn)網(wǎng)，godaddy等等。特別注意的是，國(guó)內(nèi)注冊(cè)的域名要實(shí)名備案，否則無(wú)法域名解析。

以萬(wàn)網(wǎng)舉例：添加兩個(gè)解析，其中記錄值填的就是vps的ip地址

修改ngnix配置

vi /etc/nginx/conf.d/mytest.conf

upstream mytest {
    server 127.0.0.1:8081;
}
server {
    listen 80;
    server_name 149.28.17.111(填寫(xiě)你的ip地址);
    
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Nginx-Proxy true;

        proxy_pass http://mytest;
        proxy_redirect off;
    }

    location /test {
        root   /root/static;
        index  index.html;
    }
}

server {
    listen 80;
    server_name www.urusai.site(填寫(xiě)你的域名);
    location / {
        proxy_pass http://mytest;
        proxy_redirect off;
    }
}

server {
    listen 80;
    server_name urusai.site(填寫(xiě)你的域名);
    location / {
        proxy_pass http://mytest;
        proxy_redirect off;
    }
}

重啟nginx

nginx -s reload

訪問(wèn) http://www.urusai.site 或者 http://urusai.site 就可以看到頁(yè)面了！