Vercelへのデプロイ

約1分...

サーバーパッケージとして@waline/vercelパッケージを公開しており、Vercelへのデプロイは最も推奨される方法でもあります。

デプロイ方法

上の青いボタンをクリックすると、Vercelにリダイレクトされ、Walineテンプレートでデプロイできます。
注
まだログインしていない場合は、GitHubでのサインインをおすすめします。
Vercelプロジェクト名を入力し、Createをクリックします。
プロジェクトの作成
先ほど入力した名前のリポジトリが、Walineのサンプルテンプレートに基づいてVercelにより自動作成・初期化されます。
新しいプロジェクト
1〜2分ほどでVercelのデプロイが完了します。Go to Dashboardボタンをクリックすると、アプリケーションのダッシュボードに移動します。
ダッシュボード

データベースの作成

上部のStorageをクリックしてストレージサービスのページに入り、Create Databaseを選択します。Marketplace Database ProvidersでNeonを選択し、Continueをクリックします。
ストレージ
Neonアカウントの作成を求められます。Accept and Createを選択します。次に、リージョンやクォータなどのデータベースプランの設定を選択します。デフォルトのままで問題ないので、Continueをクリックします。
neon
データベース名を定義します。デフォルトのままで問題ないので、Continueをクリックします。
neon
これでデータベースがStorageの下に表示されます。これをクリックしてOpen in Neonを選択するとNeonに移動します。Neonで左側のSQL Editorを選択し、waline.pgsqlのSQLをエディターに貼り付けて、Runをクリックするとテーブルが作成されます。
neon
neon
しばらくすると成功メッセージが表示されます。Vercelに戻り、Deploymentsをクリックしてから、最新のデプロイでRedeployをクリックし、新しいデータベース設定を反映させます。
再デプロイの成功
VercelはOverviewにリダイレクトしてデプロイを開始します。STATUSがReadyになったら、Visitをクリックしてデプロイ済みのサイトを開きます。このURLがサーバーアドレスです。
アクセス

ドメインの割り当て

Settings - Domainsをクリックしてドメイン設定ページに移動します。
割り当てたいドメインを入力し、Addボタンをクリックします。
ドメインの追加
ドメインサービスのサーバーで新しいCNAMEレコードを追加します。
タイプ名前値
CNAME example cname.vercel-dns.com
反映されれば、自分のドメインでWalineにアクセスできます。 🎉
- コメントシステム: example.your-domain.com
- 管理画面: example.your-domain.com/ui
成功

タイプ	名前	値
CNAME	example	cname.vercel-dns.com

HTMLへの組み込み

ウェブページで次のように設定します：

https://unpkg.com/@waline/client@v3/dist/waline.cssからWalineのスタイルを読み込みます。
https://unpkg.com/@waline/client@v3/dist/waline.jsのinit()を使用する<script>タグを作成し、必須オプションの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にアクセスして登録します。最初に登録したユーザーが管理者になります。
ログイン後、管理者はコメントの編集・マーク・削除などの管理ができます。
ユーザーはコメント欄から登録することもできます。ログイン後は自分のプロフィールページにリダイレクトされます。

TIPS: コメントエリアはデモ用です。質問がある場合は、Github Discussion で質問してください。