🍆

Issoサーバを構築して静的Webサイトにコメント欄を追加する（Disqus代替セルフホスト）

2025/05/03に公開

概要

静的Wegサイトにコメントフォームを追加したいと思ったことはあるでしょうか。
そういった場合によく使用されるサービスとして「Disqus」というものがあるようです。Disqus用のJavascriptをサイトに埋め込むことで、静的コンテンツにコメント欄を作成することができるサービスとなっています。
ただし、コメントを書き込むためにはログインが必要であったり、無料プランだと広告が表示されたりとあまり積極的に採用したいものではありません。

Issoというオープンソースのソフトウェアを利用すると、Disqusの代替サービスをセルフホストできるようになります。
今回はいろいろと試行錯誤しながらIssoをインストールしてみたので、備忘録として構築手順をまとめています。
https://github.com/isso-comments/isso
https://isso-comments.de/docs/

構築手順

公式のインストールガイドは以下となります。

amazon linux2023の最新のクイックスタートAMI(2025/05/02)で検証しています。

Pythonの現状バージョンと利用可能なバージョンを調べます。
python3 --versionで見るとデフォルトが3.9.21、dnf searchで調べると3.12が利用可能となっていました。

sudo -s
dnf update -y
python3 --version
dnf search python3
dnf install python3.12 python3.12-devel python3-virtualenv sqlite
dnf groupinstall "Development Tools"

Issoをpipでインストールします。
isso --versionで確認すると、今回はisso 0.13.0がインストールされていました。
ちなみにpipでインストール可能な最新バージョンは以下から確認できます。
https://pypi.org/project/isso/#history

cd /opt
python3.12 -m venv isso
source isso/bin/activate
pip install --upgrade pip setuptools wheel
pip install isso
ln -s /opt/isso/bin/isso /usr/local/bin/isso
isso --version

Issoの設定ファイル等を/etc/issoに配置します。
isso.cfgの中身は以下リンクを参考に設定しています。
https://isso-comments.de/docs/reference/server-config/

mkdir /etc/isso
cd /etc/isso
vi isso.cfg

[general]
dbpath = /etc/isso/comments.db
host = http://xxx.xxx.xxx.xxx/ ;サーバ自身のホスト名 or IP
max-age = 15m
log-file = /etc/isso/isso.log

[server]
listen = http://localhost:8080
public-endpoint = http://xxx.xxx.xxx.xxx ;サーバ自身のホスト名 or IP

[admin]
enabled = true ;http://xxx.xxx.xxx.xxx/adminでGUIの管理画面を提供
password = 任意のパスワード

[guard]
require-author = true
direct-reply = 10
reply-to-self = true
ratelimit = 5

次にWebサーバをインストールします。apacheを利用します。
isso.confの中身は以下です(xxx.xxx.xxx.xxxはサーバ自身のホスト名 or IP)。
ついでにテスト用ページを81番ポートで用意しています。

dnf install httpd
vi /etc/httpd/conf.d/isso.conf

#ISSO
<VirtualHost *:80>
        ServerName "xxx.xxx.xxx.xxx"
        ProxyPass / http://localhost:8080/
        ProxyPassReverse / http://localhost:8080/
        ProxyRequests Off

        #コメント欄を設置する先のページをCORSに追加する(今回はテスト用ページ)。
        Header set Access-Control-Allow-Origin "http://xxx.xxx.xxx.xxx:81"
</VirtualHost>

#テスト用
Listen 81
<VirtualHost *:81>
        ServerName any
        DocumentRoot "/var/www/html"
</VirtualHost>

設定が完了したら、apacheの起動とissoの起動を行います。

systemctl start httpd
systemctl enable httpd

isso -c /etc/isso/isso.cfg run

http://xxx.xxx.xxx.xxx/adminに接続してログイン画面にソーナノがいればOKです。

/etc/isso/isso.cfgで設定したパスワードでログインが可能です。
テスト用ページで動作確認を行います。
以下のクライアント用設定をもとに、/var/www/html/index.htmlを作成します。
https://isso-comments.de/docs/reference/client-config/
sectionタグ内の"data-isso-id"に一意のIDを付与することで、各ページごとにコメント欄を設置することが可能です。
（IDが同じだと別ページでも同じコメント欄が表示されます）

<p>
    ISSO TEST PAGE
</p>
<script data-isso="//xxx.xxx.xxx.xxx/"
        src="//xxx.xxx.xxx.xxx/js/embed.min.js"
        data-isso-lang="en"
        data-isso-max-comments-top="10"
        data-isso-avatar="true">
</script>
<section id="isso-thread" data-isso-id="test-id" data-title="test-page" >
    <noscript>Javascript needs to be activated to view comments.</noscript>
</section>

ついでにIssoをsystemdでサービス化します。

vi /etc/systemd/system/isso.service

[Unit]
Description=Service isso.service

[Service]
Type=simple
ExecStart=isso -c /etc/isso/isso.cfg run
Restart = always

[Install]
WantedBy=default.target

systemctl daemon-reload
systemctl start isso
systemctl enable isso
systemctl reload httpd

http://xxx.xxx.xxx.xxx:81に接続すると、コメント欄が表示されます。

コメントをした後でadmin画面に接続すると、コメントの削除等ができるようになっています。

なお、コメント欄のCSSはデフォルトで/opt/isso/lib/python3.12/site-packages/isso/css/isso.cssのものが適用されているようです。

CORSについて

余談ですが、apacheのvirtualhostの設定でCORS(クロスオリジンリソース共有)の設定を入れています。

#コメント欄を設置する先のページをCORSに追加する(今回はテスト用ページ)。
Header set Access-Control-Allow-Origin "http://xxx.xxx.xxx.xxx:81"

これを入れなかった場合、ブラウザ側でCORSポリシー違反となり、コメント欄が表示されなくなります。
IssoはJavascriptを埋め込むだけでコメント欄の設置が可能なので、赤の他人がブラウザからソースを確認し、data-isso-idだけ書き換えて勝手にコメント欄を設置しようとしてもこの仕組みでブロックされるようになっています。

Access to XMLHttpRequest at 'ｈttp://xxx.xxx.xxx.xxx/config' from origin 'ｈttp://xxx.xxx.xxx.xxx:81' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'ｈttp://xxx.xxx.xxx.xx' that is not equal to the supplied origin.

ただし、CORSが無効のブラウザではブロックがされません。
杞憂だとは思いますが、以下の二つの条件を満たした場合、Issoにただ乗りされて赤の他人のサイトに無断でコメント欄を作成される可能性があるということは念のため把握しておいたほうが良いかもしれません。

ブラウザのソースからIsso用のコードをコピペされる
明示的に--disable-web-securityオプションでEdgeを利用したり、CORSに対応していない古いブラウザからアクセスしたりする

(↑Access-Control-Allow-Originを未設定でもCORS無効のブラウザからはコメント欄が表示される)

ソーナノ

なぜかアイコンとしてポケモンのソーナノが利用されていますが、これはソーナノがドイツ語でIssoという表記だからだそうです(Ist so => Isso)。

また、Issoという名前の由来は公式のFAQでも説明がありますが、正直いまいちピンとはこないですね。

What does “Isso” mean?

Isso is an informal, german abbreviation for “Ich schrei sonst!”, which can roughly be translated to “I’m yelling otherwise”. It usually ends the discussion without any further arguments.
In germany, Isso is also pokémon N° 360.

概要

構築手順

CORSについて

ソーナノ

Discussion