本文始發於我的個人博客，如需轉載請注明出處。
為了更好的閱讀體驗，可以直接進去我的個人博客看。
項目部署
之前在學習前端的時候項目都只是在本地測試，永遠的都是類似
http://localhost/xxx
http://localhost:port/xxx
這樣的形式來訪問。
如果你在開發的過程中想把你的項目進度或者是成果展示給別人看，那么就必須要把項目給部署到公網上，現在有很多成熟的方案。如下所示：
租用虛擬主機
租用虛擬主機。如果是php環境的，可以考慮虛擬主機，服務商會給你提供網頁上的操作面板，按照指示直接上傳代碼就好了，省時省力。
租用服務器
如果是Node項目，並且還要使用到數據庫，類似Mongodb的，虛擬主機可能已經沒有足夠的權限讓你來操作，因為需要sudo權限安裝Mongodb。這時候你就需要自己去租用一個服務器，自己從零開始搭建Node和Mongodb運行環境，這個比較繁瑣，對個人的要求也是最高。
把本地服務器映射到公網上
還有第三種辦法，就是利用第三方工具，來將本地web服務映射到公網訪問，這也是本文將要探討的重點。
本地服務器映射
之前在用Node開發微信公眾號時，有一個很頭疼的問題是要綁定微信測試賬號的接口配置信息中的URL地址，必須是公網地址可以訪問的，必須以https://或者http://開頭的，分別支持443和80端口。這樣就很麻煩，每測試一個功能點就需要上傳到服務器再運行測試，體驗非常差。
於是我通過搜索引擎發現，原來可以將本地的web服務通過第三方工具來暴露到公網上面訪問的，就是以本地服務器作為公網服務器，然后別人就可以通過公網網址來訪問了。
以下將介紹我所收集到的辦法，但是在實踐之前，首先要運行本地web服務，並監聽一個端口，Apache + php環境的80端口也可以。
這里使用Node來創建http服務來作為例子：
var http = require('http');
var app = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
var html = '<!DOCTYPE html>\n' +
'<html lang="en">\n' +
'<head>\n' +
' <meta charset="UTF-8">\n' +
' <title>你好世界</title>\n' +
' <style>\n' +
' body {\n' +
' background: #333;\n' +
' text-align: center;\n' +
' color: #fff;\n' +
' padding: 2em;\n' +
' }\n' +
' </style>\n' +
'</head>\n' +
'<body>\n' +
' <h1>Hello World - From local Service.</h1>\n' +
'</body>\n' +
'</html>';
res.end(html);
});
app.listen(8081, function() {
console.log('Server is running at http://localhost:8081/');
});
以上代碼為ES5語法，可在Node環境下復制運行。
運行效果為：
下面具體說一下映射到公網上的辦法。
使用命令行Localtunnel工具
Localtunnel是一個可以讓內網服務器暴露到公網上的開源項目，它可以通過NPM來全局安裝：
$ npm install localtunnel -g
如果安裝很慢，可以指定安裝源：
$ npm install localtunnel -g --registry=https://registry.npm.taobao.org
安裝完成后，調用以下命令來開啟隧道服務：
$ lt --port 8081
tunnel server offline: connect ETIMEDOUT 138.197.63.247:80, retry 1s
tunnel server offline: connect ETIMEDOUT 138.197.63.247:80, retry 1s
tunnel server offline: connect ETIMEDOUT 138.197.63.247:80, retry 1s
tunnel server offline: connect ETIMEDOUT 138.197.63.247:80, retry 1s
your url is: https://gzpmrvqixf.localtunnel.me
--port是指定本地web服務監聽的端口，我這里是8081。
你可能會遇上我上面的情況，就是隧道服務開啟失敗，此時別着急，等到它自動重新連接就好了。
這時候我們就可以通過https://gzpmrvqixf.localtunnel.me公網的形式來訪問本地的項目了。
使用ngrok.com網站的客戶端工具
首先登錄ngrok.com的客戶端下載連接來下載你操作系統對應的版本，文件很小，不用有所顧慮。
它可以有兩種監聽端口的方式，一種是隨機域名，一種是自定義域名。
首先介紹最簡單的，隨機域名。
ngrok.com隨機域名
下載客戶端成功后，對文件進行解壓，然后命令行切換到目錄中，然后使用./ngrok.exe http port來開啟服務。如下所示：
$ cd dir # ngrok客戶端的目錄
# git
$ ./ngrok.exe http 8081
# 如果是windows自帶的cmd環境中，要換成
ngrok.exe http 8081
運行結果如下：
這時候我們就可以通過http://71e36e17.ngrok.io來訪問我們本地的項目了，這個也支持https協議。
ngrok.com自定義域名
使用指定域名的好處就是以后每次開啟隧道服務的時候，它生成的域名是固定的，也省得我們總是去復制。
要想使用ngrok.com官網使用的固定域名，首先要注冊賬號，登錄，升級服務才行。沒錯，升級服務就是要交錢。一些操作步驟如下：
注冊成功后：
升級服務：
選擇付費類型：
但是結果跟我預料的一樣，沒有免費的可以選。這時候，有需要的確實可以購買付費的，但是下面我就沒有操作下去了，有需要的自行搜索。
sunny ngrok自定義域名
遇到付費的服務就要另找出路了，幸好還有一個國產的Sunny ngrok服務可以用，它是中文面板，方便操作多了，而且有免費服務。
要想使用Sunny ngrok指定域名的服務，步驟如下：
首先要下載客戶端 - ngrok.cc下載鏈接
記住，這個客戶端跟上面的ngrok.com官網的客戶端不一樣。
然后要在sunny ngrok 的官網上注冊一個賬號 - sunny ngrok.cc 注冊，注冊好之后登錄進去，找到我的隧道->開通隧道->選擇Ngrok香港免費服務器->點擊購買即可。
然后填寫基本信息，填寫你要綁定的端口，比如127.0.0.1:8081。具體如下：
這里值得注意的是，自定義域名是獨一無二的，不能跟別人的重復，所以要加上自己的特殊標識。
開通成功后，找到隧道管理->找到自己所需監聽的端口號的隧道id，然后復制，如下：
切換到剛剛下載sunny ngrok客戶端的目錄里面，執行：
$ cd dir # sunny ngrok的客戶端目錄
# git
$ ./sunny.exe clientid xxxxxx # 后面的xxxxxx換成你剛剛復制的隧道id
# windows cmd
sunny.exe clientid xxxxxx
運行結果如下：
圖中的端口1888是我之前微信公眾號測試過的端口，之后我們就可以通過里面的域名http://maskwechat.free.ngrok.cc來訪問我們的項目啦。
關於sunny-ngrok的更多用法，請查看它的幫助文檔，里面很詳細。
natapp免費隧道
最后這個網站natapp，是我極力推薦的，也是我現在常用的。它跟sunny-ngrok的用法差不多，都需要：
注冊賬號 -> 購買隧道[免費型] -> 填寫隧道信息 -> 下載客戶端 -> 本地命令行運行 -> 生成url
一些操作步驟如下：
進入natapp官網，注冊登錄后，選擇購買隧道：
然后進入隧道管理，復制剛才開啟的隧道的token值：
進入下載鏈接，下載客戶端：
最后，解壓文件后，切換到natapp文件夾里面，執行以下命令：
$ cd dir # natapp的客戶端目錄
# git
$ ./natapp.exe -authtoken=xxxxx # 后面的xxxxxx換成你剛剛復制的隧道token
# windows cmd
natapp.exe -authtoken=xxxxx
結果如下：
最后我們就可以通過http://s4hgd8.natappfree.cc來訪問啦。
總結
以上總共介紹了4種方法來讓我們本地的web服務暴露到公網上。
方法分別是：
- localtunnel - 隨機域名
- ngrok.com - 免費客戶端 - 隨機域名
- ngrok.cc - 免費客戶端 - 自定義域名
- natapp.cn - 免費客戶端 - 穩定的隨機域名
注意，以上的第2,3,4種方法均要下載不同的客戶端，千萬不要弄混淆。
經過我的多次使用，發現第四種最為穩定，推薦。
不過這些隧道代理工具，只是為了方便我們測試線上環境而已，並不適合永久運行，一旦你電腦的后台程序關掉或者是電腦關機了，這些代理服務都會中斷。
等到真正需要部署到線上環境的時候，還是需要購買虛擬主機或者自己搭建一台服務器。