記事の概要
- ①Tigrisとは
- ②Tigrisログイン〜プロジェクト作成
- ③Next.jsのプロジェクト作成〜ローカル確認
- ④Vercelにデプロイ
今回はNext.jsにTigrisでMongoDBをDBとして用意し、TODOアプリをVercelで公開するところまでを行っていきたいと思います。
Vercelで公開したTODOアプリデモ
Tigrisの公式チュートリアルを見て行っているのでTODOアプリ自体は公式サイトに載っているリポジトリをクローンしてます。
Tigrisの公式チュートリアルはこちら
①Tigrisとは
Tigris は、高性能アプリケーションの構築を簡素化するために設計されたサーバーレス NoSQL データベースおよび検索プラットフォームです。
Tigris を使用すると、小売および e コマース プラットフォームから金融アプリケーションやイベント ストア、ベクトル検索および推奨エンジンなど、幅広いアプリケーションをすばやく簡単に構築できます。Tigris は、複数のツールを管理、操作、および同期するためのインフラストラクチャの複雑さを解消し、代わりに優れたアプリケーションの構築に集中できるようにします。
Tigrisの公式ドキュメントにはこのように記載してありました。
Tigrisの全体像は正直まだ理解していないのですが、要はDBとしてMongoDBを使っているBaaS（Backend as a Service）みたいなものだと思います。下記の記事で取り上げたSupabaseのようなものだと思います。
Next.jsにDB追加してVercelで公開してみた①
②Tigrisログイン〜プロジェクト作成
Tigrisログイン
Tigrisの公式ドキュメントの右上の「Sign Up」からTigrisに登録していきます
「Sign Up」を選択すると下記の登録画面が出るので好きな方法で登録して下さい
Tigrisプロジェクト作成
登録が完了すると「DashBoard」画面が表示されるかと思いますので、「Create a new project」を選択します
「Create a new project」を選択後、プロジェクト名を入力して下さい
③Next.jsのプロジェクト作成〜ローカル確認
Next.jsのプロジェクト作成
Tigrisプロジェクトが作成できたら、左側メニュー内の「Get Started」を選択し「NEXT.js」の部分をコピーします
コピーしたらプロジェクトを作成したい場所でターミナルを開きコピーしたコマンドを実行して下さい
// 例として載せています
npx create-tigris-app@latest --project PRE_Project --client-id XXXXXXXX --client-secret XXXXXXXXXXXXX --example nextjs-api-routes
ローカル確認
Next.jsのプロジェクト作成ができたら、作成したプロジェクトに移動して下記のコマンドを実行します
npm run dev
実行後http://localhost:3000/を開くと画像のように表示されるかと思います
これだけでDB側もTigrisでホスティングできているので実際に動かしてもDB登録されていることが確認できます
実際にTODOを追加したりして確認してみて下さい
Tigris側では左側メニュー内の「Database」の「Data Explorer」を選択するとデータの確認ができます
④Vercelにデプロイ
ローカルでの確認ができたのでVercelでデプロイしてアプリを公開できるようにしていきます
一部ソースの修正
このままデプロイするとデプロイが失敗するため以下の部分の修正をします
pages/_document.tsxのcrossOrigin={"crossorigin"}をcrossOrigin={undefined}に修正する。
コメントアウトでも問題ないです。
import { Html, Head, Main, NextScript } from "next/document";
import React from "react";
export default function Document() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
// ここを修正します
crossOrigin={undefined}
/>
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Vercelにデプロイ
Vercelのプロジェクト作成画面から今回作成したリポジトリを選択
選択後プロジェクト名の入力と環境変数の追加を行う。
-
Project name: Vercelのプロジェクト名（なんでも問題ないです） -
TIGRIS_URI:.envに記載されているものと同じ値 -
TIGRIS_PROJECT:.envに記載されているものと同じ値 -
TIGRIS_CLIENT_ID:.envに記載されているものと同じ値 -
TIGRIS_CLIENT_SECRET:.envに記載されているものと同じ値 -
TIGRIS_DB_BRANCH:.envに記載されているものと同じ値
Next.jsのプロジェクト作成を行った際に作成されている.envファイルに記載されている内容をVercelで設定します
入力後「Deploy」を選択して下さい
Deployが成功すると画像のような画面が表示されるかと思うので右上の「Visit」で公開されたページを確認してみて下さい
そうすると公開されたURLでTODOアプリが見れつかと思います
