將本地web服務映射到公網訪問

時間 2019-12-08

標籤本地 web 服務映射公網訪問欄目 HTML 简体版

原文原文鏈接

本文始發於個人我的博客，如需轉載請註明出處。
爲了更好的閱讀體驗，能夠直接進去個人我的博客看。php

項目部署

以前在學習前端的時候項目都只是在本地測試，永遠的都是相似html

http://localhost/xxx
http://localhost:port/xxx

這樣的形式來訪問。前端

若是你在開發的過程當中想把你的項目進度或者是成果展現給別人看，那麼就必需要把項目給部署到公網上，如今有不少成熟的方案。以下所示：git

租用虛擬主機

租用虛擬主機。若是是php環境的，能夠考慮虛擬主機，服務商會給你提供網頁上的操做面板，按照指示直接上傳代碼就行了，省時省力。web

租用服務器

若是是Node項目，而且還要使用到數據庫，相似Mongodb的，虛擬主機可能已經沒有足夠的權限讓你來操做，由於須要sudo權限安裝Mongodb。這時候你就須要本身去租用一個服務器，本身從零開始搭建Node和Mongodb運行環境，這個比較繁瑣，對我的的要求也是最高。數據庫

把本地服務器映射到公網上

還有第三種辦法，就是利用第三方工具，來將本地web服務映射到公網訪問，這也是本文將要探討的重點。npm

本地服務器映射

以前在用Node開發微信公衆號時，有一個很頭疼的問題是要綁定微信測試帳號的接口配置信息中的URL地址，必須是公網地址能夠訪問的，必須以https://或者http://開頭的，分別支持443和80端口。這樣就很麻煩，每測試一個功能點就須要上傳到服務器再運行測試，體驗很是差。windows

因而我經過搜索引擎發現，原來能夠將本地的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種方法均要下載不一樣的客戶端，千萬不要弄混淆。

通過個人屢次使用，發現第四種最爲穩定，推薦。

不過這些隧道代理工具，只是爲了方便咱們測試線上環境而已，並不適合永久運行，一旦你電腦的後臺程序關掉或者是電腦關機了，這些代理服務都會中斷。

等到真正須要部署到線上環境的時候，仍是須要購買虛擬主機或者本身搭建一臺服務器。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。