前回はローカル環境でAstro DBのプロジェクトを作成してTODOリストを作成しました。
今回はAstro DB用のホスティングとして用意されているAstro Studioの連携する方法を解説します。
Astro Studioとは
Astro StudioはAstro DB用に用意された専用のホスティングサービスです。
Astro Studioを利用することで様々な環境で共通のDBストレージを参照することが可能になります。
現在はEarly Previewということで無料で利用できるようですが将来的には有料になると思われます。
Astro Studioのアカウントを作成
まずはAstro Studioに訪れてアカウントを作成してください。
次にプロジェクトを作成します。プロジェクトの作成方法を聞かれますので
今回は「Create Empty Project」を選びます。
初回は次にGitHubのレポジトリの権限を要求されるので適当なリポジトリへのアクセス権限を割りあてて権限を与えます。
プロジェクト作成画面に移動しますので今回作成するプロジェクト名を記述してRejionに日本を選択して作成します。
しばらくすると作成終了画面に移動します。
このタイミングではDashbordやDatabaseを見てもまだなにもないのがわかります。
Dashbord
Database
GitHubで作成したリポジトリを見に行くとリポジトリが作成されているのがわかります。
Astro Studioにプロジェクトを反映
今回は前回作ったTODOリストのプロジェクトをAstro Studioに反映する形で連携を行っていきます。
前回のプロジェクトディレクトリをターミナルなどで開いて以下のコマンドを入力していきます。
# 現在のディレクトリと隣接する形でAstro Studioのプロジェクト作成時に作成されたリポジトリをclone
git clone git@github.com:KazumaNishihata/astro-studio.git ../astro-studio
# 現在のディレクトリのGitを削除
rm -rf .git
# 現在のディレクトリの内容をリポジトリをcloneしたディレクトリにコピー
cp -r ./ ../astro-studio
# cloneしたリポジトリのディレクトリに移動
cd ../astro-studio
# コピーした内容をリモートリポジトリにプッシュ
git add .
git commit -m "Astro todoの内容をコピー"
git push
Astro StudioはGitにpushするだけでdb/config.tsの内容を取り込んでくれます。
Astro StudioのDatabaseを確認すると前回設定したテーブルが作成されているのが確認できます。
ローカルからAstro Studioのデータを参照する
ではローカルからAstro Studioのデータを参照しましょう
最初にコピーしてきたリポジトリの内容に合わせてnpmパッケージをインストールし直します。
npm ci
次にnpx astro db loginコマンドでAstro Studioにログインします。
すでにブラウザでログイン済みでしたらすぐにログインできます。
% npx astro db login
Opening the following URL in your browser...
https://studio.astro.build/auth/cli/login?returnTo=http%3Aa2F%2Flocalhost%3A5a5860
If something goes wrong, copy-and-paste the URL into your browser.
✔ Successfully logged in!
次にnpx astro db linkコマンドでAstro Studio上のプロジェクトを選択します。
% npx astro db link
✔ Link "~/Desktop/astro/astro-studio" with Astro Studio? … yes
✔ Link with an existing project in Astro Studio? … yes
✔ What is your project name? › astro-studio
これでAstro Studioとの連携はおわりです。
ローカル環境を立ち上げてみましょう。
package.jsonに以下のようなスクリプトを追加して
{
"name": "astro-todo",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
+ "dev:remote": "astro dev --remote",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.5.9",
"@astrojs/db": "^0.8.6",
"astro": "^4.5.5",
"typescript": "^5.4.2"
}
}
ターミナルから以下のコマンドでAstroのプロジェクトを立ち上げます。
npm run dev:remote
立ち上がったローカルのサイトでTODOの追加などを行ってみましょう。
そうするとローカル環境で追加したデータがAstro Studio上のテーブルに追加されているのが確認できます。
これでローカル環境下からAstro Studioへの連携は完了です。
次回は作成したプロジェクトをCloudflare Pagesにアップしてリモート環境でAstro Studioと連携する方法を解説します。
Discussion