摘要：前端平時接觸到的機會并不多，但是懂點對于前端來說還是有益無害的，起碼還是要了解一下最基本的部署知識。特別注意的是，國內注冊的域名要實名備案，否則無法域名解析。

前端平時接觸到linux的機會并不多，但是懂點linux對于前端來說還是有益無害的，起碼還是要了解一下最基本的部署知識。

博客地址

要部署項目，首先我們需要一臺服務器。平時開發，項目是跑在我們本地電腦上的，現在我們想要讓所有人都能訪問這個項目，就需要部署到一臺能被外網訪問的服務器。現在市面上有虛擬主機，VPS，ECS（云服務器）。虛擬主機我就不考慮了，因為虛擬主機基本不支持ssh登錄，而我們希望學習linux知識，所以只考慮VPS和ECS。而ECS價格比較高，考慮到我只是為了學習用，對于服務器的性能和配置要求不高，最后決定購買VPS。

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

安裝成功過，在vultr控制臺可以看到如下信息:

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

打開終端，輸入

ssh -p 你的端口號 你的用戶名@登錄地址

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

輸入完密碼后，即可進入服務器

passwd

vultr默認密碼太復雜，所以自定義密碼方便記憶。

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

apt-get update

apt-get install openssl libssl-dev nginx wget git

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

我現在希望訪問http://149.28.17.111/test 可以展示一個靜態頁面，這時就該Nginx上場了！

mkdir -p static/test

在當前目錄下，新建一個static文件夾，static里面又新建了一個test目錄，在里面存放一個靜態文件index.html

vi static/test/index.html

按下i進入insert模式，輸入如下代碼:

    
    


    
無路賽

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

:wq!

保存退出

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

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

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

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

修改nginx用戶組(不然會報403)

vi /etc/nginx/nginx.conf

www-data修改為root

user root;

于是訪問http://149.28.17.111/test Nginx就會去找/root/static/test目錄下的index.html

前面我們使用vi編輯器新建了兩個文件(mytest.conf index.html)，你可能覺得寫起代碼來一點都不方便。其實我們也可以在本地寫好這兩個文件，然后使用ftp工具將這兩個文件上傳到服務器。

ftp工具有很多，比如flashfxp。以xshell自帶的xftp為例，打開ftp，連接到服務器

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

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

前端開發經常要使用npm安裝各種包，因此需要搭建node環境
使用nvm進行版本控制

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

安裝完成后，新打開一個終端登入服務器

nvm install 8.11.1

安裝完成后，輸入

node -v

如果出現版本，說明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無路賽");                              
})).listen(8081);                                            
                                                             
console.log("server start at 8081");                         

保存退出

啟動app.js

node app.js

在瀏覽器訪問 http://149.28.17.11:8081 就可以看見頁面

使用命令node app.js啟動項目有個致命的問題，如果把當前終端關了，項目也就默認關閉了。

因此我們需要使用pm2管理項目

npm install pm2 -g

pm2 start app.js

使用pm2啟動項目后，即使當前終端關閉了，node進程仍然在后臺運行著！

我們希望訪問項目時，不需要帶上8081端口。可以使用Nginx的反向代理功能：

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

修改配置

upstream mytest {
    server 127.0.0.1:8081;
}
server {
    listen 80;
    server_name 149.28.17.111(填寫你的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

原理就是：訪問http://149.28.17.111時， nginx反向代理到http://149.28.17.111:8081， 并把本地node服務器返回的內容展示出來

目前我們訪問網站需要直接輸入ip地址，這樣十分不方便。為此，我們需要買一個域名來解析到網站。

域名提供商有很多，比如萬網，godaddy等等。特別注意的是，國內注冊的域名要實名備案，否則無法域名解析。

以萬網舉例：添加兩個解析，其中記錄值填的就是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(填寫你的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(填寫你的域名);
    location / {
        proxy_pass http://mytest;
        proxy_redirect off;
    }
}

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

重啟nginx

nginx -s reload

訪問 http://www.urusai.site 或者 http://urusai.site 就可以看到頁面了！