254
285

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

記事投稿キャンペーン 「2024年!初アウトプットをしよう」

コストをかけずにWebサービスを公開するための構成例

Last updated at Posted at 2024-01-19

はじめに

個人でフロントエンド(react)、バックエンド(node.js)、データベース(postgreSQL)を利用したWebサービスを公開したいと考えていました。
まずはテスト的に無料で外部公開できるサービスがないか調査しましたが、2022年8月に有料化されたHerokuの記事ばかりヒットしてしました。
結果的には無料で使用できる構成があり、実際にテストプログラムを動作させることができましたので構成例として記載しておきます。
※無料なので比較的厳しい条件も含まれていたりするのでそれぞれのサービスを確認お願いします。
例えばsupabaseは数日間利用がないとインスタンスが一時停止して手動で起動させないといけないなどがあります。

今回試したサービス

できるだけ同じサービスに集約したいと考えていましたが、実際にはフロントエンド、バックエンド、データベースはそれぞれ異なるサービスになってしまいました。
ここは無料なので仕方がなさそうです。
簡単な構成は以下の構成図のようになっています。
・フロントエンド vercel
・バックエンド  render
・データベース  supabase

一部シンガポールリージョンしか選択できないサービスもありましたが、テスト的に動かすだけであれば特に困っていません。

image.png

Github連携が簡単にできる

私が知らなかっただけかもしれませんが、こんなに便利なのかと感じたのがGithub連携です。
Vercel、RenderどちらもGithub連携をするだけで追加でアカウント発行の手間がなく、すぐに始めることができました。
また、どちらのサービスも何も設定しなくてもソースをGithubにプッシュすると自動的にビルドが走ってそのままデプロイまでしてくれます。

vercelのデプロイ履歴画面

デプロイの履歴画面ですがプッシュしただけで勝手にビルドが始まりready状態になったことがわかります。

image.png

renderのデプロイ履歴画面

こちらも同様にrenderのデプロイ履歴画面ですが「Auto-Deploy」の表記があります。

image.png

supabaseのデータ管理画面

supabaseはGUIでデータを確認できる画面が用意されています。
こちらでテーブルの作成やデータの編集ができます。

image.png

254
285
2

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
254
285

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?