素早くアプリを作りたい！ Vercel＋Supabaseでプロジェクト開発

2023年10月31日2024年10月31日

ここ数年、『アプリケーションの開発』はだいぶハードルが低いものになってきました。
かつては学校で学ばなければ書けなかったようなプログラミング知識も、今はネット上にドキュメントや教育コンテンツがたくさん公開されていますし、サンプルコードも読みきれないぐらい公開されています。
そして何よりChatGPT等のAIによって、これまでコードを書くほどの知識を持っていなかった人でも、アプリ開発ができるようになっています。

しかしながら、『アプリ開発』というのは『コードを書く』だけの作業ではありません。
サーバの設定やデータベース・ネットワークの用意等、非常に複雑な準備を行わなければなりません。更には、リリース後にそれらを管理したり、アップデートしたり……といった作業にも、知識が求められます。

ではその部分を簡略化することはできないのでしょうか？
それにピッタリなサービスがあります。それが『Vercel』と『Supabase』です。

Vercelとは……Webアプリケーションを簡単にデプロイできるプラットフォーム

最初にVercelについてご紹介しましょう。
VercelとはNext.jsの開発者が作った、フロントエンド向けのプラットフォームです。
……と書くとわかりにくいので、柔らかく説明しましょう。

通常、アプリケーションをWeb上に乗せるためには、まずサーバを用意する必要があります。
といっても、自前でサーバを建てるのはあまりに大変なので、現在はAWS等のクラウドサーバを借りて、そこに場所を用意するのが主流です。

しかしながら、AWSを使ったとしてもWEBアプリを公開するまでの工程は簡単なものではないでしょう。
数あるAWSのサービスから適切なものを選択し、正しく設定する必要があります。
慣れた人であれば、そこまで大変な作業ではないかもしれませんが、ドメインの設定やSSL証明書の設置、リポジトリの連携等、１から勉強するのであれば数日～数週間はかかってしまいます。
そしてそれが『正しく設定されている』と保証してくれる人は誰もいません。常にセキュリティや利用料金等に不安を抱えながら作業をする事となるでしょう。

もちろん、これらを全てクリアすれば一定の経験値を積めるでしょうが、
”ただただWebアプリをリリースしたい”状況で、そのような手間が必要でしょうか？
すでに手元にあるコードを、もっとシンプルに、数クリックで世の中へ出すことが出来ないものでしょうか。

それを可能にするのがVercelという訳です。

Vercelの特色

しかし、本当にそこまで簡単にWebアプリが公開できるものでしょうか。
疑っておられる方もいらっしゃると思いますので、手順をご紹介しましょう。

まずVercelのトップページを開いて『Start Deploying』を押します。

するとインポート元を聞かれるので、『Continue with Github』等を選びましょう。

するとプロジェクトを選ぶよう言われるので、公開したいものを指定し、
『Deploy』ボタンを押します。これで完了です。
本当に数クリックで終わりました！

もちろん、ドメインの設定やSSLの導入にはもう少し手順が必要です。
しかし、それもほんの簡単な手順で導入できますし、何よりほとんど１本道の作業です。
手軽にアプリを公開したい人にとって、これほどわかりやすいものもないでしょう。
（なお、アプリなら何でも公開できるというわけでなく、ある程度サポートされているフレームワーク等に制限があります。その代わり、Next.jsやReactとの親和性は非常に高いです）

そしてVercelの特色について忘れてはならない事として、アプリ運用に必要な機能がきちんと用意されていることです。

例えばプレビューデプロイ機能や、ロールバック機能は、新しく更新を掛ける際、非常に役立つでしょう。
更にCDNやスケーリング機能も備わっています。突発的にトラフィックが増えたとしても、十分に対応ができます。
また、サードパーティのツールと連携することで、アクセスログやパフォーマンスモニター等もしっかり確認することが可能です。

もちろん、機能数で見ればAWSやAzure等のほうが、比較にならないぐらい多いでしょう。
しかしながら、手軽さ・わかり易さの点では圧倒的にVercelへ軍配が上がります。

Supabaseとは……データベースやバックエンドで必要な機能を簡単に用意できるBaaS

このように便利なVercelですが、あくまで『サーバレスなホスティングサービス』なので、バックエンド側の機能（例えばデータベース等）は備わっていなかったり、十分なものでなかったりします。

それを補うにはどのようにしたら良いでしょうか。
別途AWSでデータベースを借りますか？それも可能ではあるのですが、そうしてしまうと、Vercelを使うことのメリットが半減してしまうでしょう。

そこでおすすめしたいのが、Supabaseです。

Supabaseは、自称『オープンソースのFirebase』です。
FirebaseはGoogleが運営している「BaaS」であり、非常に手軽な形でバックエンドの構築を行うことが出来ます。
※BaaSについては下記記事もご覧ください。

なので、ざっくり言えば『フロント側の環境を手軽に用意できる』のがVercel、『バックエンド側の環境を手軽に用意できる』のがSupabase、と考えて下さい。
（なお、この定義は綿密に考えると語弊が出てくるため、あくまでおおよその考え方として捉えて下さい）

Supabaseの手軽さ

先程述べた通り、データベースを利用したいがためにわざわざクラウドサーバ等を借りるのは、あまりに手間がかかりすぎます。
単純にインストール作業も煩雑ですし、ユーザー管理や、外部からのアクセス設定、更にはバックアップ等も考慮すると、相当な工数がかかるでしょう。

その点、Supabaseのデータベースを利用すれば、必要なセットは予め用意されています。
Supabaseを利用するのであれば、初期セットアップの工数を大幅に削減することが出来るのです。

セキュリティ上の利点

そしてSupabaseを利用したほうがいい点は『手軽だから』というだけではありません。
通常、データベースは内部ネットワーク内に配置され、外部からは直接アクセスできないように設定することがほとんどです。
しかしながら、Vercelのようなサービスを使う場合は、内部にデータベースを配置することが出来ないため、外部のデータベースと直接やり取りすることとなります。

しかしその場合、セキュリティに大きなリスクを抱えてしまうのです。
例えばデータベースを標的にしてDDoS攻撃を仕掛けられるリスクがありますし、SQLインジェクション等も行いやすくなります。
他にも、人為的なミスから認証情報が流出した際、致命的な情報流出に繋がりかねません。

しかしSupabaseのデータベースを利用するのであれば、APIを通してデータベースとやり取りする形になります。これは直接データベースにアクセスするよりも、かなり堅牢です。

特にSupabaseでは、PostgreSQLの RLS（Row Level Security）機能が、非常に使いやすいよう整備されています。
なので単純に『パスがあれば全てを閲覧・編集ができる』といったものではなく、各ロールごとに細かく権限が設定できるため、外部データベースでも安心して運用することができるのです。

ストレージや認証機能も手軽に実装可能

そして、Supabaseは「BaaS」なので、他にも色々な機能を有しています。

例えばストレージ機能です。
Vercelがホスティングするため、わざわざ別にストレージを用意する必要はないのでは……という考えは、少しもったいないです。
特に、ユーザーがファイルをアップロードできるアプリケーションの場合は、Supabase Storage等の利用をおすすめします。

Supabase Storageはただの保存領域ではありません。画像・ビデオ・ドキュメント等を、大量に保存・整理・検索することに特化しています。
なので、ユーザーがストレスなくファイルをアップロード・ダウンロードすることができますし、各ファイルの軽量化や、検索等の操作も素早く行うことが出来ます。
更には、デフォルトでCDNが付いているため、世界中どこからアクセスしても、ストレスを感じることなく、ファイルを表示することが可能なのです。

これを自分で用意しようとすれば、相当なコストがかかってしまうことでしょう。大量のファイルを扱う場合は、ぜひSupabase Storageを利用して下さい。

また認証機能の実装にも、Supabase Authが便利です。
Vercelでのアプリに認証機能をつけようとした場合、数々のハードルに突き当たります。
例えば、サーバサイドのロジックを用意する手間がかかりますし、セキュアなストレージを外部に用意する必要があります。
また、トークンの管理、各フローの実装等を全て用意しようと思った場合、『アプリ部分よりも認証部分の実装に時間がかかった』という事態へ陥りかねません。

その点で、Supabase Authを使えば、上記に上げたような問題はほぼほぼクリアされます。
通常のID（メールアドレス）・パス認証はもちろん、SNSや大手サービスのログイン等も簡単に実装が可能です。

更に言えば、この認証機能は先程取り上げたデータベースRLS機能や、Storageの各権限等ともリンクしています。
セキュリティは、拠点が増えれば増えるほど複雑化して穴もできやすくなりますが、その点一括して任せることができるSupabase Authは、『手軽にアプリを公開する』という当初のメリットを満たすため、非常に便利だと言えるでしょう。

『手間を掛けない』大切さ

このように、VercelとSupabaseを利用することで『アプリに必要な機能』を、素早く低コストで実装することができます。

なおこれらの技術を用いることは、一見『手抜き』や『もったいない』様に見えるかもしれませんが、
実際のところ小・中規模のWEBアプリケーションを作る場合、VercelとSupabaseを使用する方が安く済むかもしれません。
特にAWSやGCP等のクラウドにあまり慣れていないエンジニアの場合、下手にクラウドサーバをいじるよりも、Vercel・Supabaseを利用したほうがより安全と言えます。

何より大きいのは、これらサービスを使うことで『時間』が節約できることです。
AIの出現により、技術の進歩が加速している現在、アプリ開発においては時間が非常に大事な物となっています。
ぜひ、VercelやSupabase等の便利なサービスを用いることによって、手早く需要の検証を行っていきましょう。