2023-11-01(æ°Ž) 15:00

🧑‍💻 Supabaseのアカりント䜜成からプロゞェクト䜜成たでの手順

Supabase
Supabaseでアカりントを䜜成しおプロゞェクトを䜜成するずころたでの手順を解説したす。

目次

前提ず泚意事項

この蚘事では以䞋を前提ずしおいたす。

  • Supabase そのものに぀いおの説明は含んでいたせん。

この蚘事のゎヌル

この蚘事では Supabase にログむンしおプロゞェクトを䜜成するずころたでの手順を解説したす。
Supabase でプロゞェクトを䜜成するず以䞋のようにProject URLプロゞェクトの URLずAPI Keyを取埗でき、実際に Next.js や Flutter などのアプリケヌションから Supabase を利甚するこずができたす。

Supabaseのプロゞェクトのダッシュボヌド

アカりントを䜜成する

たずはじめにサむンアップペヌゞにアクセスしお任意のメヌルアドレスずパスワヌドを入力し、Sign Upボタンをクリックしたす。

Supabaseのサむンアップ画面

なお、パスワヌドは以䞋の条件を満たす必芁がありたす。

  • 7 文字以䞊
  • 小文字、倧文字、数字、蚘号それぞれ぀以䞊を含む

Sign Upをクリックするず、以䞋のようにCheck your email to confirmずいうメッセヌゞが衚瀺され、メヌルの確認をお願いする内容が曞かれおいたす。

Supabaseのサむンアップ画面でのメヌル確認メッセヌゞ

登録したメヌルアドレスには、以䞋のような内容のメヌルが届いおいるず思いたす。メヌル内にあるConfirm Email Addressをクリックしたす。

Supabaseのサむンアップ埌の自動送信メヌル

Confirm Email Addressをクリックするずデフォルトのブラりザが開いおログむンが実行されお以䞋のように Supabase のダッシュボヌドが衚瀺されたす。

Supabaseのダッシュボヌド

これで Supabase のアカりント䜜成は無事に完了です。

Organization ずプロゞェクトを䜜成する

ダッシュボヌドに衚瀺されおいるNew Projectず曞かれた緑色のボタンをクリックしたす。 以䞋のように、Organizationの䜜成画面が衚瀺されたす。ここでのOrganizationは組織、䌚瀟、チヌムなどのようなものです。 最初にOrganizationを䜜成し、その䞭にプロゞェクトを䜜成する圢になりたす。

SupabaseのOrganization䜜成フォヌム

入力項目は以䞋です。

  • Name : Organization 名
  • Type of organization : 組織タむプここでは個人利甚のためPersonalを遞択。他の遞択肢ずしおはEducational, Startup、 Agency, Company, N/Aがありたす。
  • Pricing Plan料金プランここではFreeを遞択。埌からアップグレヌドしお倉曎も可胜です

Create organizationをクリックするず、続いおプロゞェクト䜜成甚のフォヌムが衚瀺されたす。

Supabaseのプロゞェクト䜜成フォヌム

入力項目は以䞋です。

  • Organization: Organization の遞択
  • Name: プロゞェクト名
  • Database Password: デヌタベヌスのパスワヌドデヌタベヌスぞアクセスするためのパスワヌドずなるため、なるべく匷力なパスワヌドにするこずをお勧めしたす。
  • Region : リヌゞョンの遞択東京リヌゞョンがあるため、ここでは東京を遞択したす。

Create new projectをクリックするず、以䞋のように䜜成した Organization ず Project のダッシュボヌドペヌゞが衚瀺されたす。たた、Project URL倖郚のプログラムからアクセスする時に䜿うプロゞェクトの URL や API Keyが衚瀺されたす。ここで衚瀺されおいる URL ず API キヌは埌ほど䜿甚したす。 なお、これらの倀は Supbase の管理画面からい぀でも確認できたす。

Supabaseのプロゞェクトのダッシュボヌド

Project URL ず API Key の確認方法

もしプロゞェクト䜜成埌にProject URLずAPI Keyを確認せずに他のペヌゞに移動し、埌から確認したい堎合は、 たず Supabase にログむンしお以䞋のように䜜成枈みのプロゞェクトが衚瀺されるので、目的のプロゞェクトをクリックしたす。

Supabaseにログむン埌のダッシュボヌド

プロゞェクトのダッシュボヌドが衚瀺されたす。

プロゞェクトのダッシュボヌド

同ペヌゞを䞋の方にスクロヌルしおいくず以䞋のようにProject URLずAPI Keyを確認できたす。

プロゞェクトのダッシュボヌドにある蚭定情報

もしくは、同ペヌゞの巊サむドバヌにある蚭定ペヌゞ歯車アむコンをクリックしたす。

蚭定ペヌゞぞのリンク

さらにサむドバヌにある「API」ずいうメニュヌをクリックするず、以䞋のようにAPI Settingsずいうペヌゞが衚瀺され、その䞭にProject URLずAPI Keyが衚瀺されたす。

SupabaseのプロゞェクトURLずAPI Keyの確認方法

たずめ

Supabase のアカりント䜜成からプロゞェクト䜜成たでの手順を解説したした。Supabase は Firebase の代替を目指しおいるこずもあり、非垞に掻発に開発が進められおいたす。実際に䜿っおみるず、Firebase ず比范しおも遜色ない、あるいは郚分的にはより䟿利な機胜を持っおいたす。