LoginSignup
2
3

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-03-20

概要

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

今回実装した雑な天気予報サービス↓
image.png
※ 天気の情報が英語だったのでSpreadsheetに英文全文(100行くらい)突っ込んでchatGPTで和訳させたので、ちょっと変な日本語があるかも知れないけれどそこはご愛嬌。

この記事で書くこと

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

この記事で書かないこと

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

supabaseを使った簡単な連携

supabaseとは

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

連携する方法

1. 会員登録

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

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

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

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

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

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

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

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

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

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

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

↓こんな感じの画面が出るので、 Project URLProject API keys (anonって書いてある方)をメモっておきましょう。
スクリーンショット 2023-03-19 12.13.34.png

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 を選択します。
スクリーンショット 2023-03-18 8.52.30.png

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

gitアカウントを連携すると、↓こんな感じでアップされているリポジトリ一覧が表示されます。
デプロイしたいリポジトリを選択してください。
スクリーンショット 2023-03-19 9.37.00.png

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

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

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

まとめ

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

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3