本篇教學將教你如何在Plesk上利用Docker架設開源留言系統「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的標籤。
點進Docker標籤後,你會看到什麼都沒有,不要慌,在搜尋欄右邊有一個箭頭,點開來後在Name欄位輸入「Remark42」後按「Search」,第一個「umpuntun/remark42」,點擊「Run」即可。
等待下載完成後,會進入新建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。
看到這個畫面就代表建立成功,接下來再回到設定。
這時你會發現他自動設定了一些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架設完之後,就可以將留言板放進網站中使用。
先在你想要放留言板的位置建立一個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開發的,沒辦法直接部屬到虛擬主機上,如果今天你是用一般的網頁虛擬主機商的話,這部分就無解了,設定上也比較沒有那麼的方便。但對於我來說這些缺點都比不過他的優點。
最後也恭喜各位成功的完成了最後一步,希望你會喜歡這套留言板系統。
秉持著我都會遇事別人怎麼不會的精神分享解決事情的經過。