2 日間かかりましたが、ついに Artalk をデプロイすることができました。これは、バックエンドを備えたデータ自己ホスティングのコメントプログラムで、私には非常に適しています。この記事では、私のデプロイプロセスと、デプロイ中に遭遇したいくつかの問題について説明し、後で研究するためにそれを記録しておきます。また、Nuxt.js を使用してブログを構築している人々にいくつかの参考価値を提供します。
Artalk の URL: https://artalk.js.org/
この記事は 3 つのパートに分かれています。バックエンドのデプロイ、フロントエンドのデプロイ、問題の研究です。
1. バックエンドのデプロイ#
公式には 2 つのバージョンがありますので、注意してください。php と go の 2 つの異なるリポジトリに対応しています。現在、公式ドキュメントでは go 言語で開発されたものがデフォルトになっています。
ArtalkGo リポジトリ: https://github.com/ArtalkJS/ArtalkGo
私も go バージョンを使用しており、機能と最適化が非常に優れています。
Docker ビルド + 宝塔#
私のサーバーは Ubuntu 20.04 ですが、他のバージョンでもほとんど同じです。
まず、SSH でサーバーに接続します。
sudo su
# sudoモードで起動
cd /www/wwwroot/
# サイトのディレクトリに移動
mkdir ArtalkGo
cd ArtalkGo
# ArtalkGoのディレクトリを作成
curl -L https://raw.githubusercontent.com/ArtalkJS/ArtalkGo/master/artalk-go.example.yml > conf.yml
# 設定ファイルのテンプレートをダウンロード
ここまで来たら、公式の指示では vim conf.yml で設定ファイルに入り、パラメータを変更して設定するとありますが、私はあまりおすすめしません。なぜなら、それはあまり使いやすくないからです（私が下手だからです）。代わりに、 /www/wwwroot/ArtalkGo ディレクトリに移動して conf.yml ファイルを直接編集することをおすすめします。テキストモードでの操作の方が使いやすいです。
設定ファイルの中身は、基本的にはサイト名、管理者、メールなどの設定です。大きな問題はありません。その他のパラメータ（ポートなど）には触れないでください。触れるとエラーが発生します。
ファイルの設定が完了したら、保存してください。
宝塔のプラグインで Docker マネージャーをダウンロードし、イメージ管理をクリックします。
次に、イメージ名に artalk/artalk-go を入力し、イメージを取得をクリックします。約 2 分でダウンロードが完了します。
そして、SSH 接続に戻り、Docker コンテナを作成します。
docker run -d \
--name artalk-go \
-p 0.0.0.0:8080:23366 \
-v $(pwd)/conf.yml:/conf.yml \
-v $(pwd)/data:/data \
artalk/artalk-go
上記のコマンドをコマンドラインに入力し、Enter キーを押します。
この時点で、サーバープロバイダーでポート 8080 を解放する必要があります。すでに解放されている場合は問題ありませんが、解放されていない場合は設定する必要があります。
その後、ブラウザで http://ipアドレス:8080 を入力します。
もし上記の画面が表示されれば、デプロイに成功しています。開けない場合や他の問題がある場合は、上記の手順が正しく実行されているか確認してください。
設定ファイルを変更した後は、必ずコマンドを実行してサービスを再起動する必要があります。
docker restart artalk-go
リバースプロキシ#
これは宝塔を使用している場合は非常に簡単なので、詳細は省略します。
https://artalk.js.org/guide/backend/reverse-proxy.html#%E5%AE%9D%E5%A1%94%E9%9D%A2%E6%9D%BF
ドキュメントは非常に詳細に説明されていますので、操作が失敗した場合はコメントでお知らせください。
2. フロントエンドのデプロイ#
ブログは vue + nuxt で開発されています。
私は CDN を使用していますが、npm は現在私のブログと衝突していることがわかりましたので、一時的にこの方法は使用しません。
まず、/components ディレクトリに Comments.vue という名前のコンポーネントを作成します。
<!-- Comments.vue -->
<template>
<div class="wrapper">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/Artalk.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Artalk.js"></script>
<div id="Comments"></div>
</div>
</template>
<script>
export default {
name: 'Comments',
}
</script>
<style lang="scss" scoped>
<!-- CSS code -->
</style>
設定コードは /static/main.js に個別に配置し、nuxt.config.js でインポートします。
// nuxt.config.js
head: {
title: '子舒の博客 | imhan.cn',
meta: [
// ...
]
script: [
{ src: '/js/main.js' },
]
},
main.js で Artalk を設定します。
new Artalk({
el: "#Comments",
server: 'https://ドメイン/api',
site: "子舒の博客",
placeholder: 'コメントを入力してください...',
gravatar: {
mirror: 'https://sdn.geekzu.org/avatar/',
default: 'mp',
},
pagination: {
pageSize: 15, // ページごとのコメント数
readMore: true, // もっと読む or ページネーション
autoLoad: true, // 自動読み込み（もっと読む）
},
heightLimit: {
content: 200, // コメントの高さ制限
children: 300, // 子コメントエリアの高さ制限
},
versionCheck: true, // フロントエンドのバージョンチェック
});
もう 1 つの方法は、ファイルをサーバーまたは GitHub に配置し、それをインポートすることですが、これは本末転倒なのでおすすめしません。
3. 問題の研究#
1. コメントのパスに関する問題
コメントを投稿すると、管理画面にコメントが生成され、どのパスでコメントが生成されたかが表示されます。
もし特定のページのコメントを他のページに移したい場合は、ページの URL を直接変更し、KEYを変更する をクリックすることができます。
Artalk のパス判定は非常に厳密で、https://example.com/1 と https://example.com/1/ のコメントは異なるページに属します。
作者に尋ねたところ、彼の説明は非常に理にかなっていると思いました。
qwqcode: https://example.com/1 と https://example.com/1/ は元々同じパスではありません。後者は https://example.com/1/index.html と同等です（Web サーバーの設定による）
そのため、私は単純にブログのパスに / を追加して、どのページを開いても / を含む URL にリダイレクトするようにしました。これは非常にシンプルで直接的な方法で、この問題を解決しました。
path: `/posts/${key.replace('.md', '').replace('./', '')}/`
2. localhost:3000 とドメイン
これにより、別の問題が発生します。ローカルで localhost:3000 をビルドすると、ドメイン以降のコメントは表示されません。しかし、これは大きな問題ではありません。Artalk のドキュメントを調べた結果、彼はバックエンドであり、複数のフロントエンドを使用できると述べています。二次ディレクトリのみを判断すると、非常に大きな問題が発生します。
https://a.com/1 と https://b.com/1 という 2 つのページが同じコメントデータを使用している場合、パスを判断する際にドメインを直接追加することで、ドメイン以下のコメントは localhost:3000 には同期されません。
これは私のブログの開発には影響しませんので、解決するつもりはありません。
これが私が現在直面している問題です。今後の使用中にこの記事を継続的に更新して、保存しておきます。