概要

supabaseのデータベースとRender.comを使って無料で簡単にウェブアプリケーションを作りたい！
今回はNode.jsを使って作った雑な天気予報サービスをsupabaseとRender.comを使って公開する方法についてまとめました。

今回実装した雑な天気予報サービス↓

※ 天気の情報が英語だったのでSpreadsheetに英文全文(100行くらい)突っ込んでchatGPTで和訳させたので、ちょっと変な日本語があるかも知れないけれどそこはご愛嬌。

この記事で書くこと

supabaseのデータベースを使った簡単な連携
Render.comへのビルド

この記事で書かないこと

Node.jsでの実装方法
ドメインの取得や連携

supabaseを使った簡単な連携

supabaseとは

いわゆるBaaSと呼ばれるサービスで、Firebaseみたいなもの。
こちらの記事が詳しかったので詳細知りたい方は↓を参照ください。

連携する方法

1. 会員登録

まずは会員登録が必要です。
↓こちらよりサインアップを完了してください。

2. プロジェクトとテーブルを作る

サインアップが完了したらプロジェクトを作ります。
↓このような画面に遷移しますので、New　project をクリックしてください。

最初にサービスのオーナー的なものを決める必要があるので、チーム開発の場合はわかりやすいチーム名など、個人開発なら名前なんかをつけるとよいのではないかと思います。
自分は面倒くさいので main にしちゃいました。

次に新しいプロジェクトを作ります。
プロジェクト名とデータベースパスワードを設定してください。
Regionは Tokyo で。
できたら Create new project をクリックします。

↓こんな感じ。
これでプロジェクトの作成は完了です。

今回はデータベースを使いたいので、左のメニューアイコンから Database を選択し、Tables をクリックします。

右上にある New tables をクリックすると↓こんな画面が表示されるので、必要なカラムを設定していきましょう。

今回はこんな感じになりました↓

3. 連携に必要な情報を取得

プロジェクトができたら、連携に必要な情報を取得します。
左メニューアイコンの Project Setting に移動し、 API をクリックします。

↓こんな感じの画面が出るので、 Project URL と Project API keys (anonって書いてある方)をメモっておきましょう。

4.　実装する

ここまでできたら、実際にソースコードに組み込んで実装していきましょう。
公式ドキュメントはこちら↓

実装方法について詳細はドキュメントを見ていただければと思いますが、↓こんな感じで使いました。

const env = require('dotenv').config();
const { createClient } = require('@supabase/supabase-js');

// Create a single supabase client for interacting with your database
const supabaseUrl = process.env.SUPABASE_URL;
const supabaseKey = process.env.SUPABASE_API_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

module.exports = {
  fetchData: async () => {
    const { data, error } = await supabase
      .from('dailyData')
      .select()
      .gte('date', new Date().toLocaleDateString().slice(0, 10));
    return data;
  },
  insertData: async (params) => {
    const { error } = await supabase
      .from('dailyData')
      .insert(params);
    return error ? error : true;
  }
}

今回実装したソースコード:

これで、supabaseのデータベースを使うことができるようになりました。

Render.comへのビルド

Render.comとは

一言でいうと、ウェブアプリケーションを簡単に運用できるプラットフォームを提供するサービスです。
Herokuの代わりとして注目されています。
↓このあたりの記事が詳しかったので参考までに。

ビルドする方法

1. 会員登録

まずは会員登録しましょう。
↓こちらからサインアップできます。

2. デプロイ環境を作る

登録できたら↓こんな画面が出てきます。
今回はウェブサービスなので、 Web Services を選択します。

GithubかGitlabと接続することができるので、ソースコードをアップしている方のアカウントを連携してください。

gitアカウントを連携すると、↓こんな感じでアップされているリポジトリ一覧が表示されます。
デプロイしたいリポジトリを選択してください。

次にデプロイするための設定をしていきます。
今回はこんな感じ↓
Regionは東京がなかったので、一番近そうなシンガポールにしました。

後は右上の Manual Deploy をクリックするだけ。
アプリケーションがちゃんと実装できていれば、これでデプロイできるはずです。
できたら左上のURLをクリックすると、公開されたアプリケーションにアクセスすることができます。

もし環境変数を設定する必要がある場合は、左メニューの Environment から設定することができます。

まとめ

ここまで、supabaseとRender.comを使ってウェブアプリケーションを公開する方法についてまとめました。
どちらも簡単に使うことができ、わかりにくい点もそんなになかったので、プロトタイプなどを公開する際などには手早くできていいのではないかと思います。