WalineコメントのVercelデプロイ

使用 Waline コメント私が好きなデプロイ方法（個人的に最も簡単だと思う）

必要なアカウント#

GitHub アカウント
Vercel アカウント
leancloud アカウント（国際版が望ましい、GitHub を持っているのに中国版を使うのですか？中国版は登録が必要なので、ここでは説明しません。原文リンクは末尾にあります）

leancloud でデータベースを作成#

ログインまたは登録 LeanCloud 国際版 に入り、コンソールにアクセスします。
左上のアプリを作成をクリックし、好きな名前を付けます（無料の開発版を選択してください）:
アプリに入ったら、左下の 設定 > アプリ Key を選択します。ここで APP ID, APP Key, Master Key を確認できます。後で使用するためにメモしてください。

Vercel にデプロイ#

上のボタンをクリックして、Vercel に移動し、サーバー側のデプロイを行います。

::: note

ログインしていない場合、Vercel は登録またはログインを求めますので、GitHub アカウントを使用して簡単にログインしてください。

:::
好きな Vercel プロジェクト名を入力し、Createをクリックして続行します:
この時、Vercel は Waline テンプレートに基づいて新しいリポジトリを作成し、初期化します。リポジトリ名は先ほど入力したプロジェクト名になります。

一、二分後、画面いっぱいの花火がデプロイ成功を祝います。この時、Go to Dashboardをクリックするとアプリのコンソールに移動できます。
上部の Settings - Environment Variables をクリックして環境変数設定ページに入り、3 つの環境変数 LEAN_ID, LEAN_KEY, LEAN_MASTER_KEY を設定します。これらの値は前のステップで LeanCloud から取得した APP ID, APP KEY, Master Key に対応します。
環境変数の設定が完了したら、上部の Deployments をクリックし、最新のデプロイの右側にある Redeploy ボタンをクリックして再デプロイします。このステップは、先ほど設定した環境変数を有効にするためのものです。
この時、Overview画面に移動し、デプロイを開始します。しばらく待つと STATUS が Ready に変わります。この時、Visit をクリックすると、デプロイされたウェブサイトのアドレスに移動できます。このアドレスがあなたのサーバーのアドレスです。

ドメインのバインド（オプション）#

上部の Settings - Domains をクリックしてドメイン設定ページに入ります。
バインドしたいドメインを入力し、Addをクリックします。
ドメインサーバー業者で新しい CNAME 解決記録を追加します。

Type Name Value
CNAME example cname.vercel-dns.com（中国地域の可用 cname-china.vercel-dns.com）
効力が出るまで待ち、自分のドメインでアクセスできるようになります🎉
- コメントシステム：example.yourdomain.com
- コメント管理：example.yourdomain.com/ui

Type	Name	Value
CNAME	example	cname.vercel-dns.com（中国地域の可用 cname-china.vercel-dns.com）

success

HTML の導入（クライアント）#

あなたのウェブページで次の設定を行います:

Waline スタイルをインポートします

https://unpkg.com/@waline/client@v3/dist/waline.css

<script> タグを作成し、次のように使用します

https://unpkg.com/@waline/client@v3/dist/waline.js

init() 関数を初期化し、必要な el と serverURL オプションを渡します。

el オプションは Waline がレンダリングに使用する要素で、文字列形式の CSS セレクタまたは HTMLElement オブジェクトを設定できます。
serverURL はサーバーのアドレスで、前のステップで取得した値です。

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

コメントサービスはこの時点であなたのウェブサイト上で正常に動作します 🎉

コメント管理（管理端）#

デプロイが完了したら、<serverURL>/ui/register にアクセスして登録します。最初に登録した人が管理者に設定されます。
管理者がログインすると、コメント管理画面が表示されます。ここでコメントを編集、マーク、または削除できます。
ユーザーもコメントボックスを通じてアカウントを登録し、ログイン後は自分のプロフィールページに移動します。

動画チュートリアル#

以下は熱心なユーザーが作成した動画チュートリアルで、上記の操作が不明な場合は参考にできます。

Waline デプロイチュートリアル（クイックスタート）#

UP 主：rickroll 摇

Vercel を使用して Waline コメントシステムを簡単にデプロイする#

UP 主：岚天呀

以上は一部修正された原文#

原文リンク: https://waline.js.org/guide/get-started/