Convex のセットアップメモ

はじめに

この記事について

この記事は、BaaSであるconvex¹ についてのセットアップドキュメントです。

書いたきっかけ

Convex はsupabase やfirebase などと比較し記事が多くないように感じたことや、セットアップの段階で詰まってしまい一度プロジェクトを消したことがあったため、ここにセットアップのポイントなどを書くこととしました。

この記事の対象

この記事は以下の方を対象に書き進めています。

• Convex に触れてみたいが要領をわからない方
• Convex のセットアップに迷ってしまう方

導入環境

Convex の導入を試すうえで、重要となる環境については以下の通りです。

Ubuntu(WSL) 22.04.5 LTS 
(GNU/Linux 5.15.153.1-microsoft-standard-WSL2 x86_64)

WSL バージョン: 2.2.4.0
カーネル バージョン: 5.15.153.1-2
WSLg バージョン: 1.0.61
MSRDC バージョン: 1.2.5326
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26091.1-240325-1447.ge-release
Windows バージョン: 10.0.26200.7462

# node -v
v20.19.5
# npm -v
10.8.2

Convex のセットアップ

Convex のセットアップはこちらから公式の手順を確認することができます。

ここから先はプロジェクトの初期設定の手順になります。

さっそくはじめてみよう

GitHub 上にリポジトリがある方のみ

リポジトリをクローン
GiHub 上に空のリポジトリを作ってある場合、ローカル環境に取り込む必要があります。

git clone your-repository-http
# 例: git clone https://github.com/s-taku0502/sample.git
# 例: git clone [e-mail]:s-taku0502/sample.git

GitHub 上に作っていない方のみ

# 落ち着いて作成したい方
mkdir convex-sample # 名前は適宜変更
cd convex-sample

# 一気に作成したい方
mkdir convex-sample && cd convex-sample

共通！

npm create convex@latest

ここから注意が必要かもしれません。

Using package manager: npm
Project name:
    # ここは任意の名前にしてください
Choose a client: Next.js App Router
    # 私の設計都合上、Next.js を選択しています。
Choose user authentication: Convex Auth
    # Convex Auth から Clerk や AuthKit に移行することができる
    # AuthKit: SSO や組織管理が主目的の企業向けのイメージ
    # Clerk: Convex Auth と比較して外部依存が増加する恐れがある
    # none: ユーザーの分離が不可

その後、画面の指示に従い、以下のコマンドを実行

cd [プロジェクト名] && npm run dev

What would you lke to configre?
 > create a new project
Project name: # 先ほどの名前
Use cloud or local dev deployment?
 > cloud deployment

その後、 以下の表示が出たら http://localhost:3000 を選んでください。

ここで自由にメールアドレスやパスワードを設定してください。

※これは、ひとつのプロジェクトとしての認証機能であり、Convex 自体の認証ではないことに注意してください。

GitHub 上に反映しましょう。

git add .
git commit -m "Initial commit"

GiHub 上にリポジトリを作っていない方のみ

# main ブランチをデフォルトに設定
git branch -M main

-M オプション
　このオプションは -m と異なり、既にmain ブランチができていても上書きしてしまうオプションとなっています。初期の頃は無邪気に使わないようにしてください。

# リモートブランチとの連携
git remote add origin https://github.com/your-username/your-repo.git

# 変更の適用
git push origin -u main

リモートリポジトリ（GitHubなど）にも変更を適用したい場合、git push -u origin main を実行する必要があります。

※ただし、 mian ブランチに直接push できないようにする²ことを推奨します。

GitHub 上にリポジトリがある場合

git push origin main

※ただし、 mian ブランチに直接push できないようにする²ことを推奨します。

参考・その他

チュートリアル

Convex のチュートリアルを試したい方はこちらから始めることができます。日本語ドキュメントは用意されていないため、英語の読解あるいは翻訳ツールにて進行する必要があります。

参考

• プロジェクト（リポジトリ）をGitHubに反映したい

• 後輩のためのGit講座（応用編）
  

• 【GitHub】ブランチ直接プッシュ禁止の設定
  

1. Convexはオープンソースのリアクティブデータベースです。クエリはデータベース内で直接実行されるTypeScriptコードです。Reactコンポーネントが状態の変化に反応するのと同様に、Convexクエリはデータベースの変更に反応します。 ↩

2. https://qiita.com/isshi777/items/e7bbdf5a03de14635a90 ↩ ↩²