Astro DBでデータをページに表示しよう

Astro DBは、Astroが公式で提供するデータベースサービスです。これを利用すると、簡易的なCMSとして利用したり、お問い合わせフォームの内容を一時的に保管しておく場所として利用するなど、情報を記録したり取り出したりなどの用途で広く利用できます。

早速使ってみましょう。

Astro Studioを利用しよう

Astro DBはAstro Studioというサービス内で提供されているため、まずはAstro Studioのアカウントを準備する必要があります。そして、Astro StudioのアカウントはGitHubアカウントを利用するため、まずはGitHubアカウントを準備しましょう。

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, revi…

github.com

そしたら、Astro Studioにサインインします。

Log in | Astro Studio

studio.astro.build

ログインすると、図のような「プロジェクト」画面が表示されます。

プロジェクトを作成しよう

続いて、プロジェクトを作成します。プロジェクトを作成すると、データベーススペースが準備されます。

右上の「+」ボタンをクリックしましょう。選択肢が表示されるので、ここでは一番下の「Create Empty Project」をクリックして空のプロジェクトを作成します。

なお、他の選択肢は次の通りです。

• Import from GitHub repo… 既存のプロジェクトをGitHubからインポートします
• Create from Template… テンプレートから選択します。2024年現在ではJob Boardと、Wait Listというテンプレートが準備されています
• Create from CLI… コマンドラインを使って作成できます
• Create Empty Project… 新しいプロジェクトを作成します

続いて、作成するGitHubのリポジトリ名を入力します。新しく作成されるので、既存のリポジトリ名と重ならない名前にしましょう。その他、次のような設定をします。

• Repo Visibility… リポジトリをプライベートに設定します。基本的にはチェックをつけたままにしましょう。誰でも見られるリポジトリになってしまいます。
• Region… データベースの配置場所を選びます。「Asia（Japan）」を選ぶと、日本国内のサーバーに配置されます。

こうしてプロジェクトを作成しましょう。完成すると、図のような画面が表示されます。

リポジトリをクローンしよう

プロジェクトが作られると、指定されたGitHubリポジトリに必要なファイル群が配置されます。これをクローンしましょう。GitHub Desktopをセットアップしていたら、「Open with GitHub Desktop」でクローンすると良いでしょう。

これを、VSCodeで開きましょう。

依存ファイルをインストールして起動しよう

クローンしたプロジェクトには、Node.jsの依存ファイル群が含まれていないので、これをインストールしましょう。VSCodeのターミナルを起動して、次のように入力します。

npm install

依存ファイルがインストールできたら、ローカルサーバーを起動しましょう。

npm run dev

これで、Astroのプロジェクトが起動しました。

データベースを定義しよう

Astro Studioで作成したプロジェクトには、あらかじめ「db」というフォルダが作られていて、ファイルが生成されています。

なお、既存のAstroのプロジェクトに後からAstro DBを追加したい場合は、次のコマンドを入力します。

npx astro add db

そしたら、「db/config.ts」ファイルを開きましょう。ここで、データベースのテーブルを定義します。

データベースは「カラム」という、Excelの「列」のようなものをあらかじめ準備する必要があります。このカラムに対してデータを格納していくイメージになります。

ここでは、簡易的なコメント欄を作成する事を想定し、タイトルと内容を格納するカラムを準備しましょう。次のように書き加えます。

import { defineDb, defineTable, column } from "astro:db";

const Comment = defineTable({
  columns: {
    title: column.text(),
    body: column.text(),
  },
});

// <https://astro.build/db/config>
export default defineDb({
  tables: { Comment },
});

それぞれ解説しましょう。

まずは、データベースの定義に必要なモジュールをインポートします。

import { defineDb, defineTable, column } from "astro:db";

ここでは、「defineDb」「defineTable」「column」をインポートしました。

そして、「Comment」という名前のテーブルを定義します。

const Comment = defineTable({
  columns: {
    title: column.text(),
    body: column.text(),
  },
});

このテーブルには、titleとbodyというカラムを準備しています。カラムには、「データ型」を指定する必要があるので、ここではテキスト（column.text()）が指定できるようにしています。データ型には、次のものが指定できます。

• column.text()… テキスト
• column.number()… 数字
• column.boolean()… ブーリアン（trueまたはfalse）
• column.date()… 日付
• column.json()… JSONデータ

データ型の指定のカッコの中にはオプションを指定できます。

最後に、ここで作成したテーブルをAstro DBに登録します。

export default defineDb({
  tables: { Comment },
});

これで準備完了です。

シードデータを作成しよう

ここで準備したデータベースには、データを挿入することができるのですが、開発中に毎回データを入れていくのは大変です。そこで、「シーズデータ」というシード（Seed:種）のデータをあらかじめ準備しておき、プログラムを動作させる度に、それらのデータが準備されていると開発が楽になります。

「db/seed.ts」というファイルがあらかじめ準備されているため、ここに次のように追記しましょう。

import { db, News } from "astro:db";

export default async function seed() {
  // Seed local development data.
  // See <https://docs.astro.build/en/guides/astro-db/#seed-your-database>
  await db.insert(News).values([
    { id: 1, title: "こんにちは", body: "拝見しました" },
    { id: 2, title: "初めまして", body: "よろしくお願いします" },
  ]);
}

JSON形式でデータを準備していきます。これで、テーブルにはあらかじめデータが準備された状態で開発を始めることができる用になります。

Astro DBの内容を画面に表示しよう

それではいよいよ、このデータベースを使ってコメントの一覧ページを作成してみましょう。ここでは、あらかじめ準備されている「src/pages/index.astro」を変更していきましょう。

まずはファイルの先頭に、データを取得するための処理を記述します。

---
import { db, Comment } from "astro:db";
const comments = await db.select().from(Comment);
---
...

これでニュースが取得されます。後は、JSONデータの配列データなので、これを繰り返しで処理していけば、一覧画面を作成することができます。

{comments.map(({ title, body }) => (
<article>
  <h2>{title}</h2>
  <p>{body}</p>
</article>
))}

このあたりのプログラムの解説は省略するため、必要な場合はAstroの基本をご確認ください。

Cloudflare Pagesで公開しよう

これで、ひとまずWebサイトが完成したとして、これをネットに公開しましょう。公開するには、サーバーが必要となりますが、ここではCloudflare Pagesを利用して公開していきます。

Cloudflareのアカウントを作成したら、「Workers & Pages」で「Pages」タブをクリックして、「Gitに接続」ボタンをクリックしましょう。

GitHubアカウントで連携して、先ほどAstro Studioで作成したリポジトリを選択します。

プロジェクト名やプロダクションブランチはそのままにして、「ビルドの設定」の「フレームワークプリセット」で「Astro」を選択します。

これで準備完了です。

Astro DBとCloudflareを接続しよう

続いて、Astro DBとCloudflareを接続します。これには、Appトークンと呼ばれるキーコードを利用します。

Astro Studioにログインしたら、プロジェクトの「Generate App Token（Appトークンを作成する）」をクリックします。

トークン名には見分けがつくような「Cloudflare」などを入力して「Generate」ボタンをクリックすると、トークン文字列が発行されるので、これをコピーしておきましょう。

次に、Cloudflare Pagesで「設定」タブの「環境変数」でプロダクションの「変数を追加する」ボタンをクリックしましょう。

変数名に「ASTRO_STUDIO_APP_TOKEN」と入力し、値に今コピーしたトークンを貼り付けます。

保存しておきましょう。

リモートのDBと接続しよう

続いて、Astroの設定ファイルでDBをリモートのDBに設定します。これにより、Astro Studio内のDBが利用されるようになります。

package.jsonファイルを開いたら、8行目付近の記述を次のように変更しましょう。

"build": "astro build",
↓
"build": "astro buid --remote",

これですべての準備が整いました。GitHubに最新ファイルをプッシュすれば、Cloudflare Pagesでビルドが始まります。

データベースを更新しよう

それではここに、新しいデータを投入してみましょう。Astro Studioでプロジェクトを選択したら「1 Tables」と書かれたエリアをクリックします。

すると、データベースの管理画面が表示されます。ここで、新しいデータを投入してみましょう。

画面を更新するには再ビルドが必要になるので、Cloudflare Pagesでビルド一覧を表示したら、一番右側のメニューボタンから「デプロイを再試行」をクリックします。

ビルドが正常に終わったら、発行されたURLにアクセスしてみましょう。データベースに挿入した内容が反映されます。

こうして、手軽にデータベースと連携できるので、Astroをますます便利に利用していきましょう。

• Astro
• Astro DB