code-prettify

2014年9月7日 星期日

Visual Studio 2013 IIS Express remote access (遠端存取)

在使用 Visual Studio 開發 Web 專案時,因為客戶使用 iPad Mini 為操作界面,
雖然 Chrome 擁有 Device Mode & Mobile Emulation 功能,可以滿足大部份的視覺模擬。
但是在一些細微的視覺差異以及在硬體上,還是只能在實體機上面呈現。

然而,預設 Visual Studio Web 專案啟動時,使用的 IIS Express 是只能本地存取的 (localhost access only),所以我們只能一再的將修正後的程式部署到開發環境中的 IIS Server,在 iPad 上確認是否符合預期,如果不是則再重覆上面的動作,實在是很累人。

所以,決定上網尋找一下,能不能讓 Visual Studio 2013 IIS Express 支援遠端存取 (Remote Access),答案是可以!下面是修改步驟。

專案 > 屬性 > Web 頁面中,有個 專案 URL,原本是 localhost:54926 (54926 是隨機 port 號),改為 127.0.0.123:54926 ( 127.0.0.123 是電腦的 IP,或是 domain 也行)。

如果改完之後直接啟動,會出現

Bad Request - Invalid Hostname / HTTP Error 400. The request hostname is invalid.

這是正常的,還需要修改 IIS Express  設定,開啟這個檔案

%USERPROFILE%\My Documents\IISExpress\config\applicationhost.config

找到像這樣的設定:

<site name="WebSiteTest" id="1" serverAutoStart="true">
    <application path="/">
        <virtualDirectory path="/" physicalPath="E:\Project\WebSiteTest" />
    </application>
    <bindings>
        <binding protocol="http" bindingInformation="*:54926:localhost" />
    </bindings>
</site>

將上述中的 bindingInformation="*:54926:localhost" 改為 bindingInformation="*:54926:127.0.0.123"

重新啟動後,就可以看到網站,這時候就可以遠端存取了!

Reference
Connecting to Visual Studio debugging IIS Express server over the lan

Using Custom Domains With IIS Express

Allowing remote access to your IIS Express service