從無到有把公司網站架起來

25 May 2018

前前後後耗了三個禮拜終於趕在公司發表活動前把官網架起來了

做為公司僅存的網頁工程師，除了遇到問題沒人可以救我之外，東西架好了也沒人交接呢。所以我決定簡單記錄一下這陣子到底做過哪些事情，以免以後又要浪費時間重新估狗一次

0. 簡介

公司是微軟愛用者，所以用了整套的 Windows Solution 全餐……

Windows Server 2016
IIS 7
MS SQL
.NET Framework

本篇不會談到 SQL Server 的部分，那是我唯一有同事幫忙處理的東西，在此默默感謝同時身兼 PM 跟 DBA 的妹子同事，雖然她應該看不到這篇文章。

1. 硬體

主要是要記得開防火牆跟設定 Router 映射，就不浪費篇幅討論怎麼安裝 Windows Server 跟 IIS 了，~~其實主機從前公司幹來的拿到的時候已經裝好了~~

防火牆

http 走 80 port，而 https 走 443，這兩個 port 要開，我想會來看這篇的人這個應該是基本常識。

Router 映射

映射指的是當你打外部 IP 跟 port 號的時候，由 Router 幫你轉到內部 IP 的某個 port，例如

XXX.XXX.XXX.XXX:80  -> 192.168.0.YY:80
XXX.XXX.XXX.XXX:443 -> 192.168.0.YY:443

這個部分要在你的路由器上面設定。
所以，除了你的公司要用固定 IP 之外，你拿來架站的伺服器內部也是要配靜態 IP，不要傻呼呼的用 DHCP 自動配發，不然他哪天就消失在網路上了。

2. 程式

開發

身為一個網頁工程師，把 UI Designer 設計的畫面變成一個.NET 專案應該是沒啥好紀錄的。總之就是先在外面用熟悉的前端開發工具(VSCode?)，把 html css js 檔寫完，然後通通扔到專案裡面就好了呢。

部署

有 Gitlab CI，上版輕輕鬆鬆毫無煩惱

前情提要：C#.NET 專案使用 Gitlab CI 部署至 IIS

3. 連上網路

域名

公司域名託管在Hinet上，反正就登進去把域名指向公司固定 IP 就好。

SSL 憑證

現在的網站要是沒有走 HTTPS，不僅會被 Chrome 標上大大的不安全、搜尋引擎會調降你的排名之外，最重要的是公司的工程師會被認為技術力很廢很沒用，這個我不能忍，所以就自己默默把憑證搞好了。

網站不安全我可以忍，但質疑我就不行

申請憑證

此部分使用簡單易用的SSL For Free服務，幫你搞定 Let’s Encrypt 的大小事情。

於網站上輸入公司域名(多個域名用空格隔開)
選擇手動認證，但在那之前需要先處理.well-known\acme-challenge問題:
- windows 無法使用.字頭的資料夾，此部分可使用 IIS 內的虛擬目錄的功能，將其指向伺服器上的其他目錄，同時還可以迴避因為 CI 重新建置導致資料夾被刪除的問題。
- IIS 還須設定MIME/Type將.對應到text/plain才能正確使用。
將網站上要你下載的檔案們放到.well-known\acme-challenge底下並且確定可以被公開讀取，他會透過讀取此檔案來確認網站是你架的

HINT:注意實體資料夾的權限問題
以上皆沒出錯的話，網站會告訴你成功驗證，並且會要你下載憑證，就乖乖把憑證下載下來吧，裡面應該包含三個檔案:
- private.key
- ca_bundle.crt
- certificate.crt
於同一個畫面輸入 email，他會在憑證快要過期的時候通知你，十分貼心

到此憑證申請完成，但是還不能用…
由於我們親愛的 IIS 只吃附檔名為.pfx的憑證，所以還需要轉換一下。

憑證轉檔

準備工具 OpenSSL
使用以下指令轉換

openssl pkcs12 -export -out YOUR\FOLDER\certificate.pfx -inkey YOUR\FOLDER\private.key -in YOUR\FOLDER\certificate.crt -certfile YOUR\FOLDER\ca_bundle.crt

產出過程會要你輸入密碼，照做就對了

憑證安裝

於 IIS 最高層的那個設定畫面的Server Certificate設定把剛剛生成的.pfx檔餵進去
回到站點層的設定，將 https 跟 443 埠號 binding 起來，並在那個設定畫面選擇你剛剛匯入的憑證。

至此大致完成，但要注意一個地雷:
站點層的設定有一個是SSL Setting，那個其實根本次設定完全無關，請記得維持Ignore的設定，不然瀏覽網頁時，使用者會被要求提供憑證

強制導向

辛辛苦苦設定好安全連線，但使用者還是可能會傻呼呼的使用 HTTP 通道連線，然後再跑來問你為啥估狗說你家的網站不安全？於是我們需要強制轉址。

此功能仰賴 IIS 的 Rewrite 功能完成實作，步驟如下；

安裝 Rewrite

下載網站：URL Rewrite
在全站的Web.config中，找到<system.webServer>區塊
區塊內新增以下程式碼:

   <rewrite>
    <rules>
      <rule name="HTTP/S to HTTPS Redirect" enabled="true" stopProcessing="true">
         <match url="(.*)" />
         <conditions logicalGrouping="MatchAny">
            <add input="{SERVER_PORT_SECURE}" pattern="^0$" />
         </conditions>
         <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" />
      </rule>
     <rules>
   </rewrite>

以上，就會自動生效了。

以上轉址的部分參考自:此網站

4. 上線之後

如果是客戶的專案，網站上線之後任務就結束了，但現在是自家公司的東西，所以還有一些事情可以做得更好：

成效追蹤

一切仰賴估狗大神的Google Analytics，網站寫得夠清楚了，進去一步一步照著把程式碼貼一貼，就初步搞定了。

或許也可以裝個 Facebook Pixel

搜尋引擎優化(SEO)

此部分主要是去Search Console註冊你們家的網站，用來確認估狗的搜尋引擎可以正確爬你們家的網站

網站性能優化

又是估狗的工具: PageSpeed Insights
來這邊跑一遍，他會給你很多優化建議，例如快取啦，靜態檔案壓縮之類的，他甚至會幫你壓好所有優化過的檔案讓你下載，值得一試的網站

靜態檔案快取
如果你的檔案有放在同一個資料夾，可以在 IIS 左側樹狀欄位選到該資料夾之後從右側選擇Http Response Header設定，進去後右上角有個Set Common Headers可以直接指定 Cache 過期時間

壓縮
iis 可以安裝dynamic compression組件幫你完成這個任務

分享偵錯

社群界的霸主提供的工具:分享偵錯工具
該工具用來預覽你的網站貼到 FB 之後縮圖會長什麼樣子，由於這套規範(Open Graph)就是由 FB 主導定義的，所以用 FB 的工具來測試自然就是最準的啦。

5. 後記

其實有很大一個重點沒有提到，就是為啥架個靜態網站會需要有人幫我弄 SQL Server……
真正的原因是公司網站同時也提供 API 供合作廠商介接，但總覺得這部分再寫下去會寫不完，所以就整個跳過好了，以後用空再另外些一篇文章來聊這塊。

當一個從頭架到尾的真．全端工程師真的很幹，但是其實搞定之後的成就感也是挺不錯的，看來離可以自己接案又更進一步了呢 (ﾟ ∀。)

Intertidal