More than 3 years have passed since last update.

supabaseとRender.comを使って無料で簡単にウェブアプリケーションを公開する

Last updated at 2023-03-20Posted at 2023-03-20

概要

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;
  }
}