教學 筆記 機器學習 程式設計 服務架設
在 Plesk 上利用 Docker 架設 Remark42 留言板
更新於3個月前
本篇教學將教你如何在 Plesk 上利用 Docker 架設開源留言系統「Remark42」。
Remark42 是什麼?
Remark42 是一個由 umputun 開發,可用於自架留言板的開源、輕量且簡單的留言板服務,且保證不會對用戶進行監控。設定完後更可以直接嵌入網站直接使用。 Remark42 支援多種登入方式,其中包含 Google、Twitter、Facebook、Microsoft、Github……等社交網站。也可以開啟匿名留言模式,讓用戶直接設定暱稱來留言。 其實市面上有許多自架留言板的軟體,較為著名的有 Commento、Isso、Cactus Comments……以及本文介紹的 Remark42,但絕對不包含 WordPress 內建的留言板。 而最終,我決定使用 Remark42 來作為架設本站留言版。因為在比較之下,我認為 Remark42 的功能最為齊全,且更新頻率很高,截至本文撰寫時,Remark42 的 Github master branches 才在 5天前更新,相較於功能類似的 Commento 最後一次更新已經是在去年初了。不過如果你對 Commento 有興趣的話也可以參考他的社群維護版本 Commento++。
先準備好
在開始本篇教學前,你要先確保你的 Plesk 已經設定完成,且因為之後要安裝 Docker 插件及登入 ssh 進行 nginx 代理設定,你必須擁有系統的管理權限,或是可以請求管理者協助設定。另外,關於 Plesk 的部分改天再做個詳細的介紹。
先把環境設定好
幫 Plesk 安裝 Docker 插件
首先,要在 Plesk 中安裝 Docker 的插件,當然,如果你不嫌麻煩且已經對 Docker 有基礎的知識的話,可以直接在系統中安裝 Docker,不過,既然都已經用 Plesk 了何必這樣虐待自己呢? 進入 Plesk 控制面板 > Extensions 搜尋「Docker」,直接點擊安裝 (Get It Free),待安裝完成後,左邊的選單就會多一個 Docker 的標籤。
下載 Remark42 映像
點進 Docker 標籤後,你會看到什麼都沒有,不要慌,在搜尋欄右邊有一個箭頭,點開來後在 Name 欄位輸入「Remark42」後按「Search」,第一個「umpuntun/remark42」,點擊「Run」即可。
建立 Remark42 的 Container
等待下載完成後,會進入新建 Docker Container 的頁面。
Container name 隨喜,Automatic port mapping 先勾著,他會幫你產生一個不與系統其他服務相衝突的PORT。 再來 Volume mapping 中,Container 的部分輸入 /srv/var,Host的部分我這裡輸入 /home/remark42,這裡是將 Container 的 /srv/var 和 Host 的 /home/remark42 掛載在一起,這是 Remark42 的一些檔案,包含 avatars、backup、pictures和資料庫檔案。 接下來是 Environment variables 的部分,其中 REMARK_URL 和 SECRET 是必填選項,REMARK_URL 是你要用於部屬 Remark42 的網址,SECRET 則是 Remark42 的密鑰,隨便填,越長越好,越複雜越好。其他選項像是 AUTH_ANON 是允許用戶使用匿名登入的方式登入,在留言時可以直接輸入暱稱即可留言,如果不想要開啟這個功能可以直接把這行刪掉。AUTH_GITHUB_CID 和 AUTH_GITHUB_CSEC 是 Github 的 OAuth application,這部分要去Github的Developer頁面新增一個。
建立 Github OAuth application
Homepage URL 是你部屬 Remark42 的 URL,Authorization callback URL 輸入你的網址加上 /auth/github/callback,之後按 Register application。 關於其他登入方式的設定方法,可以參考官方文件的 Authorization 頁面。 之後進入設定頁面,點擊 Generate a new client secret 之後會獲得一個新的 Client secret,把這個 Client Secret 和上面的 Client ID 填入 Docker Environment variables 的 AUTH_GITHUB_CSEC 和 AUTH_GITHUB_CID 中。 接下來點 OK 讓 Docker 建立 Container。
建立 Remark42 Container 完成
看到這個畫面就代表建立成功,接下來再回到設定。
這時你會發現他自動設定了一些 Environment variables,如果想要進一步設定其他選項,可以參考官方文件的 CLI parameters 頁面。 然後把 Automatic start after system reboot 勾起來,Automatic port mapping 取消勾選,你會看到多出一行 Manual mapping 8080 to external 32805,這是把 Container 中的 PORT 8080 對應到主機的 PORT 32805,把這個 PORT 記下來,等一下會用到。也別忘了按 OK 讓他重新啟動 Container。
設定 Nginx 代理
可以不用進 ssh 設定,請跳至本段最後
2022-12-30 更新
前面把 Remark42 的 Docker Container 設定完之後,當然就已經可以直接使用了,但是如果你的網址是 https://comments.example.com:32805 的話,多少有點不太美觀,也會擔心一些安全性的問題,而且還要針對 PORT 32805 做相關防火牆設定,所以不如直接讓 Plesk 幫你省去這些莫名其妙的麻煩。 最快的做法是直接建立一個新的網域,網域設定為你的 Remark42 網址。關於新增網域的過程這裡我就不細說了。
修改 Nginx 虛擬主機設定檔
接下來直接登入 SSH。 輸入:
# vim /var/www/vhosts/system/你的網域/conf/last_nginx.conf
修改 nginx 設定檔 在 PORT 443 的區塊中找到以下欄位註解掉 (或刪掉)
# location / {
#         proxy_pass https://10.0.0.231:7081;
#         proxy_hide_header upgrade;
#         proxy_set_header Host             $host;
#         proxy_set_header X-Real-IP        $remote_addr;
#         proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
#         proxy_set_header X-Accel-Internal /internal-nginx-static-location;
#         access_log off;
# 
# }
# 
# location /internal-nginx-static-location/ {
#         alias /var/www/vhosts/comments.sakkyoi.tech/httpdocs/;
#         internal;
# }
# 
# location ~ ^/(plesk-stat|awstats-icon|webstat|webstat-ssl|ftpstat|anon_ftpstat) {
#         proxy_pass https://10.0.0.231:7081;
#         proxy_hide_header upgrade;
#         proxy_set_header Host             $host;
#         proxy_set_header X-Real-IP        $remote_addr;
#         proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
#         proxy_set_header X-Accel-Internal /internal-nginx-static-location;
#         access_log off;
# 
# }
PORT 443 的區塊開頭會是這樣:
server {
        listen 10.0.0.231:443 ssl http2;
然後在註解掉的設定後面加上
location ~ /\.git {
     deny all;
}

location /index.html {
     proxy_redirect          off;
     proxy_set_header        X-Real-IP $remote_addr;
     proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header        Host $http_host;
     proxy_pass              http://你的網域:剛剛Container的PORT/web/index.html;
}

location / {
     proxy_redirect          off;
     proxy_set_header        X-Real-IP $remote_addr;
     proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header        Host $http_host;
     proxy_pass              http://你的網域:剛剛Container的PORT/;
}
其中的「http://你的網域:剛剛Container的PORT」用剛剛建立的 Container 來講,就是「http://comments.example.com:32805」 修改完後,存檔退出,然後輸入
# nginx -s reload
注意,如果你不是用 root 身分登入 ssh 的,通常都會遇到權限問題,可以在指令前加上 sudo 或是在開始操作前使用 sudo su 用 root 身分登入。
# sudo vim /var/www/vhosts/system/你的網域/conf/last_nginx.conf
# sudo nginx -s reload
大功告成
接下來用瀏覽器訪問「https://comments.example.com/web」,如果看到這個畫面,就代表設定成功了。
你可以在這個頁面中試玩一下看看功能正不正常,如果不正常,那就代表設定過程中有錯誤。
更新-無須修改 nginx 設定檔的代理方法
後來發現,Plesk Docker Extension 有提供 Docker 代理設定的功能,無須進入 ssh 修改 nginx 設定檔
2022-12-30 更新
直接在 Websites & Domains 頁面中,可以看到有一個選項「Docker Proxy Rules」,直接點進去。
點擊「Add Rule」後,會進入這個頁面,你可以在 URL 那邊設定你想要代理到網址的哪個路徑下,例如我想要代理到 https://comments.sakkyoi.tech/remark42 上,直接輸入 remark42 即可;當然你也可以直接留白代理到根目錄上。最後按下 OK 就設定好代理了。
原本我並沒有發現 Docker Extension 有提供這個功能,比起在那邊打一堆代理規則,這樣快多了。如果你是用其他 Control Panel 的話,就還是要用前面的方法自己修改代理規則了。
將 Remark42 留言板加入網站
Remark42 架設完之後,就可以將留言板放進網站中使用。 先在你想要放留言板的位置建立一個 div 給 Remark42 寫入留言板的介面。
<div id="remark42"></div>
然後再新增一段 script
<script>
  var remark_config = {
    host: '<留言板的網址(https://comments.example.com)>',
    site_id: '<剛剛在Container設定的SITE_ID(remark_instance)>',
    components: ['embed'],
    theme: '<留言板主題(dark或是light)>',
    page_title: '<頁面的標題>',
    locale: '<留言板語言(zh-tw、en...)>'
  }
</script>
把該替換掉的選項替換掉,其中 page_title 的部分不用太擔心,Remark42 是用頁面的網址來區分不同留言板的,這個只是方便我們辨別而已。 然後再插入一段 Remark42 的 script
<script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);</script>
都新增完後,進入頁面。
試著登入和發送留言,如果都正常,就代表全部都設定完成囉! 另外,登入後你可以點擊你的名字,會看到一串 ID:github_xxxxxxxxxxxxxxxxxxxx
可以進入 Container 設定 Environment variables,新增一行 ADMIN_SHARED_ID,值為這個 ID,你就會看到像我一樣的畫面,包含一些設定及管理員操作,點擊 ID 旁邊的灰色勾勾還可以把帳號變成藍勾勾。
總結
Remark42 整體而言功能齊全,畫面也好看,但由於是用 Golang 開發的,沒辦法直接部屬到虛擬主機上,如果今天你是用一般的網頁虛擬主機商的話,這部分就無解了,設定上也比較沒有那麼的方便。但對於我來說這些缺點都比不過他的優點。 最後也恭喜各位成功的完成了最後一步,希望你會喜歡這套留言板系統。
秉持著我都會遇事別人怎麼不會的精神分享解決事情的經過。
sakkyoi © 2024
Roses are Red, Violets are Blue Unexpected '{' on line 32.
本站使用 Tocas-UI 進行設計
問題回報
如果您在本站的使用過程中遇到任何困難或是錯誤,歡迎透過 email 向我們回報。如果是關於文章內容的相關討論,敬請使用留言板直接進行討論,這將幫助其他使用者了解您遇到的問題。
使用者分析
我們使用自己的分析伺服器收集並分析您在本站的行為,這樣能確保您的相關資料不受其他第三方伺服器濫用。您可以選擇將本功能關閉以保護您的隱私。但這會阻止我們透過您的行為來改善您和其他使用者的體驗。