二日間かけて、ようやく Artalk をデプロイしました。データを自己ホスティングできるバックエンド付きのコメントプログラムで、私に非常に適しています。この記事では、私のデプロイプロセスと、デプロイ中に遭遇したいくつかの問題について紹介し、今後の研究のために記録しておきます。また、Nuxt.js を使用してブログを構築している仲間にとっても参考になることを願っています。
Artalk のアドレス: https://artalk.js.org/
この記事は、バックエンドのデプロイ、フロントエンドのデプロイ、問題研究の 3 つの部分に分けます。
1. バックエンドデプロイ#
公式には 2 つのバージョンがあるので、php と go を区別することに注意してください。異なるリポジトリに対応しており、現在公式文書ではデフォルトで 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
上記のコマンドをコマンドラインに入力し、エンターを押すだけです。
この時、サーバーのプロバイダーでポート 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コード -->
</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, // 1ページあたりのコメント数
readMore: true, // もっと読み込む or ページ分け
autoLoad: true, // 自動読み込み (もっと読み込む)
},
heightLimit: {
content: 200, // コメント内容の高さ制限
children: 300, // 子コメントエリアの高さ制限
},
versionCheck: true, // フロントエンドのバージョンチェック
});
もう一つの方法は、ファイルをサーバーまたは 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 に同期されなくなります。
これは私のブログ開発には影響がないため、解決するつもりはありません。
これが私が現在直面している問題であり、今後の使用においてこの記事を更新し続ける予定です。