AxureRP制作靜態(tài)站點(diǎn)發(fā)布互聯(lián)網(wǎng)，內(nèi)網(wǎng)穿透實(shí)現(xiàn)公網(wǎng)訪問

前言

AxureRP對(duì)于產(chǎn)品經(jīng)理來說，是一款經(jīng)常使用的網(wǎng)站原型設(shè)計(jì)工具。它可以用來創(chuàng)建和設(shè)置圖表樣式，為圖表頁面和元素添加交互性和注釋，并能將正在設(shè)計(jì)中或設(shè)計(jì)完成的頁面隨時(shí)發(fā)布到HTML，使用Web瀏覽器查看。但除了在局域網(wǎng)中訪問，很多時(shí)候也會(huì)有出差在外，需要使用公網(wǎng)訪問的需求，這時(shí)候可以利用cpolar內(nèi)網(wǎng)穿透工具實(shí)現(xiàn)在公網(wǎng)訪問內(nèi)網(wǎng)的本地web展示站點(diǎn)，方便隨時(shí)查看并提出修改意見。

1.在AxureRP中生成HTML文件

簡(jiǎn)單設(shè)計(jì)好頁面后，點(diǎn)擊上方導(dǎo)航中的發(fā)布-生成HTML文件，如下圖所示，然后進(jìn)入下一步。

在彈出下方提示框后，點(diǎn)擊按鈕本地發(fā)布（可更改頁面發(fā)布路徑）

隨便選擇一個(gè)瀏覽器打開即可查看該頁面

頁面展示效果與頁面保存路徑如下圖：

2.配置IIS服務(wù)

目前只是利用AxureRP生成了一個(gè)靜態(tài)HTML頁面，但是想要在局域網(wǎng)內(nèi)其他用戶訪問該頁面，需要先在本地進(jìn)行IIS服務(wù)配置，搭建靜態(tài)web站點(diǎn)。

打開控制面板–程序和功能–打開或關(guān)閉windows功能，選中Internet信息服務(wù)中的IIS相關(guān)服務(wù)，點(diǎn)擊確定。

然后打開控制面板–管理工具–Internet信息服務(wù)（IIS）管理器–添加網(wǎng)址

在打開的界面中配置本地站點(diǎn)相關(guān)信息：包括網(wǎng)站名稱，物理路徑，端口等。

添加好網(wǎng)站后，可以看到我命名為arpce的本地站點(diǎn)已經(jīng)啟動(dòng)，此時(shí)在瀏覽器中輸入：http://localhost:8080 即可本地瀏覽該頁面。

3.添加防火墻安全策略

打開控制面板–windows防火墻，點(diǎn)擊高級(jí)設(shè)置，進(jìn)入設(shè)置界面。

點(diǎn)擊入站規(guī)則，右側(cè)新建規(guī)則，點(diǎn)擊端口，下一步，輸入特定本地端口，就是上邊IIS配置中你輸入的端口號(hào)，一直下一步，規(guī)則就建立了。

然后，運(yùn)行cmd進(jìn)入命令提示符，輸入ipconfig，即可獲取到本機(jī)IP地址。

此時(shí)，想要讓局域網(wǎng)內(nèi)其他用戶訪問到你用Axure生成的靜態(tài)站點(diǎn)，只需要發(fā)送給它這個(gè)地址，用瀏覽器打開即可：

http://你的IP地址:端口號(hào)（冒號(hào)要用英文）

4.使用cpolar內(nèi)網(wǎng)穿透實(shí)現(xiàn)公網(wǎng)訪問

但目前該站點(diǎn)只能在局域網(wǎng)內(nèi)被訪問到，其他公網(wǎng)用戶無法訪問。接下來我們使用cpolar內(nèi)網(wǎng)穿透將該站點(diǎn)發(fā)布到公網(wǎng)，實(shí)現(xiàn)公網(wǎng)用戶也可以正常訪問到。

4.1 登錄cpolar web ui管理界面

在瀏覽器上訪問127.0.0.1:9200，使用注冊(cè)的cpolar賬號(hào)密碼登錄cpolar web UI管理界面。（默認(rèn)為本地9200端口）

4.2 啟動(dòng)website隧道

由于我們的演示站點(diǎn)端口在8080端口下，所以我們可以直接使用website隧道。

登錄進(jìn)入cpolar web ui界面后，我們點(diǎn)擊左側(cè)儀表盤的隧道管理——隧道列表，找到website隧道，并點(diǎn)擊啟動(dòng)，顯示狀態(tài)為active。

或者，我們也可以重新創(chuàng)建一個(gè)新的隧道：點(diǎn)擊左側(cè)儀表盤的創(chuàng)建隧道：

• 隧道名稱：可自定義，注意不要重復(fù)
• 協(xié)議：選擇http
• 本地地址：填寫8080端口
• 域名類型：選擇隨機(jī)域名（可以免費(fèi)使用）
• 地區(qū)：可根據(jù)實(shí)際適用地區(qū)進(jìn)行選擇，支持CN、HK、US、TW、EUR

隧道信息填寫完成后，點(diǎn)擊創(chuàng)建即可

4.3 獲取公網(wǎng)URL地址

點(diǎn)擊左側(cè)儀表盤的狀態(tài)——在線隧道列表，可以在線隧道所生成的公網(wǎng)地址，可以看到website隧道的公網(wǎng)地址有兩個(gè)，一個(gè)是http協(xié)議，一個(gè)是https協(xié)議，將公網(wǎng)地址復(fù)制下來。

4.4. 公網(wǎng)遠(yuǎn)程訪問內(nèi)網(wǎng)web站點(diǎn)

在瀏覽器上訪問cpolar所生成的公網(wǎng)地址，本例為：https://64a3463b.r5.cpolar.top

成功將內(nèi)網(wǎng)web站點(diǎn)發(fā)布到公網(wǎng)可訪問。

4.5 配置固定二級(jí)子域名公網(wǎng)訪問內(nèi)網(wǎng)web站點(diǎn)

在上一步中，我們已經(jīng)能在公網(wǎng)訪問內(nèi)網(wǎng)web站點(diǎn)，不過此時(shí)的數(shù)據(jù)隧道處于臨時(shí)狀態(tài)（隨機(jī)域名，每24小時(shí)重置一次），大多用于測(cè)試場(chǎng)景。想要長(zhǎng)期穩(wěn)定的訪問利用Axure制作中的站點(diǎn)，隨時(shí)查看并提出修改意見。我們還需要進(jìn)一步的設(shè)置，將臨時(shí)數(shù)據(jù)隧道轉(zhuǎn)為固定隧道（需要成為cpolar的VIP會(huì)員）。現(xiàn)在，就讓我們開始吧。

4.5.1創(chuàng)建一條固定數(shù)據(jù)隧道

要?jiǎng)?chuàng)建一條固定數(shù)據(jù)隧道，我們需要從隧道的進(jìn)口端和出口端兩個(gè)方面，將漂移的端口固定下來。首先我們?cè)赾polar web ui界面（瀏覽器上訪問127.0.0.1:9200）點(diǎn)擊左下角的轉(zhuǎn)到cpolar官網(wǎng)

在cpolar官網(wǎng)登錄進(jìn)入儀表臺(tái)界面后，點(diǎn)擊左側(cè)的“預(yù)留”按鈕。

4.5.2 找到“保留二級(jí)子域名”欄位

在“預(yù)留”界面，我們找到“保留二級(jí)子域名”欄位。在這里設(shè)置的，就是數(shù)據(jù)隧道的公共互聯(lián)網(wǎng)入口端。與cpolar客戶端的設(shè)置類似，我們也要在這里進(jìn)行一些簡(jiǎn)單設(shè)置。首先是“地區(qū)”欄，只要按實(shí)際使用地區(qū)填寫即可（這里我們填入China VIP）；“名稱”則是我們對(duì)數(shù)據(jù)隧道的命名，不過與cpolar客戶端不同，這里的名稱會(huì)編入最終生成的URL中（這里我們選擇填入NAS）；而最后的“備注”，這是這條數(shù)據(jù)隧道的提示，這里我們填入test。

在各欄都填寫完畢后，就可以點(diǎn)擊右側(cè)的“保留”按鈕，將cpolar云端的數(shù)據(jù)隧道入口保留下來。

4.5.3 重新編輯之前建立的臨時(shí)數(shù)據(jù)隧道

接著我們轉(zhuǎn)回cpolar客戶端，在客戶端“隧道管理”項(xiàng)下的“隧道列表”頁面，重新編輯我們之前建立的臨時(shí)數(shù)據(jù)隧道（隧道名稱：website），將cpolar云端數(shù)據(jù)隧道的入口，與cpolar本地端數(shù)據(jù)隧道的出口關(guān)聯(lián)起來，這樣我們才能使用重定義的數(shù)據(jù)隧道，訪問位于內(nèi)網(wǎng)的Axure靜態(tài)站點(diǎn)。

點(diǎn)擊編輯按鈕

修改隧道信息，將二級(jí)子域名配置到隧道中：

• 域名類型：改為選擇二級(jí)子域名
• Sub Domain：填寫我們剛剛所保留的二級(jí)子域名（本例為Axuretest）

修改完成后，點(diǎn)擊更新

隧道更新成功后，點(diǎn)擊左側(cè)儀表盤的狀態(tài)——在線隧道列表，可以看到website隧道的公網(wǎng)地址，已經(jīng)更新為二級(jí)子域名了，將公網(wǎng)地址復(fù)制下來。

打開瀏覽器，我們來測(cè)試一下訪問配置成功的二級(jí)子域名。

測(cè)試成功，可以正常訪問。現(xiàn)在，我們?nèi)W(wǎng)唯一的私有二級(jí)子域名，就創(chuàng)建好了。

轉(zhuǎn)載自cpolar極點(diǎn)云文章：AxureRP制作靜態(tài)站點(diǎn)發(fā)布互聯(lián)網(wǎng)，內(nèi)網(wǎng)穿透實(shí)現(xiàn)公網(wǎng)訪問