【學習筆記】在synology NAS上建立具SSL憑證的網頁，並自動轉址https【網頁前端】

Jul 12, 2021

前言

我並不是專業前端工程師出身，但最近正在頻繁的進行跨領域嘗試。學習路上幸好有網上各位前輩的解惑，即使東拼西湊最終也有一點結果！此文是我摸索在NAS上自架網站的學習筆記，把網上諸多四散的問答與教學統整在一起的小小心得。不盡專業，但對我有效。

也許路過此篇的您也是正好在synology NAS自架網站上遇到困難，那希望這篇文章有幫助到您。

文章主要內容在申請SSL憑證與轉址部分，並不包含網頁撰寫等等。

用NAS自架網站雖然是很輕鬆且快速的辦法，不過若非專業資工對於資安有一定了解，相當不建議用NAS自架網站。駭客防不勝防，除非身邊有人能提供相關協助，用隨隨便便的網路環境與IP架設網站很容易後患無窮。建議租用外部商業虛擬主機以提高安全性，練習用網頁則利用github空間即可。

申請網域不需要說太多應該都知道XD
簡單理解就是申請一個唯獨你可以使用的網址。如：test.com等等。註冊網域與購買網址的教學與服務非常的多，如最近廣告打滿兇的Godaddy就是其中提供網域註冊與購買的商家，大家可以挑看選看。注意註冊網域不等於購買網域，要購買並且持續繳費才有使用權喔。

如只是練習用，也有免費的網域資源（如：freenom.com）但就是有使用期限。

回到NAS的部分，在套件中心安裝Web Station。
（可以連Apache一併下載安裝）

新增虛擬主機。
主目錄那邊可先留空等等處理。

回到一般設定開啟「啟動個人網站」。

此時回到File Station會發現目錄上多了web資料夾（home資料夾下也會多了www，但那不重要）。這時將您的網站資料夾（就是整個包含index.html的專案資料夾）直接上傳至此。

這時候就可以取得您index.html所在空間的檔案路徑了，將此路徑填回方才虛擬主機的主目錄欄。（如：/web/TestProject）

也請記得可以在您的DNS託管網站上，設定使您的網域指回你的IP位址了。
（在剛申請好網域時就設也可以，看大家心情）

到這個步驟，恭喜您已經完成一半了！
此時應該已經可以在您設定的網址上看見您設計的網站。只是會遇到一個問題，網址開頭為不安全的http，進網頁時會看見瀏覽器跳出警告。

synology NAS可以免費申請SSL憑證，讓網址開頭變成https。

至：
控制台>安全性>憑證>新增>新增憑證>從Let’s Encrypt取得憑證，輸入如右下圖所示資料。主體別名據說是給有不同主機需求的domain用的，單一網站者可先不填。

下面這一步超重要，當時這裡卡超久＠＠
記得要將您的網域，在「設定」裡套用您新增的憑證。

至此已經可以用https進入您的網站了。

其實到這一步已經ＯＫ了，但有些人（如我）有可能因為因為在NAS上有建立類似系統的需求，網頁上有大量要運行的js或php語言，進進出出網頁時有極大的可能在瀏覽器跳成http影響網頁的運行與安全性。這時候就需要固定https的網址——自動轉址，將http自動導向https。

這就是為何我們虛擬主機伺服器要設定成Apache，因爲.htaccess檔案適用於Apache。

建立一個.htaccess檔案，輸入以下程式碼：

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

有心想研究.htaccess的人，網路上還有很多前輩的語法教學可以去了解。
完成以上檔案後上傳至NAS上/web的根資料夾，即可達成自動轉址！

大功告成可以享受安全的瀏覽環境並使用secure cookie啦><！

如有幫助到您！幫我拍手我會很開心！謝啦！！