個人開発のWebアプリはどこで公開する？

ポートフォリオを見せたいだけなら、用意したページや画像を、ブラウザで見られるようにすれば公開できます。問い合わせを受け取るサイトなら、送信内容を処理する場所も必要です。ログインした人に自分のデータを見せるアプリでは、誰がどのデータを見られるかと、データの保存先まで決めます。

はじめに知っておきたい用語

• デプロイ — 作ったサイトやアプリを、URLを開けば使える状態にすることです。作品を追加して公開し直す作業もデプロイです。
• 静的ホスティング — あらかじめ用意したページや画像を届ける公開方法です。作品集なら、見に来た人に同じページや画像を届けられます。
• PaaS（パース） — 自分のプログラムを動かす環境を用意してくれるサービスです。予約アプリなら、空き枠を調べたり予約を受け付けたりするプログラムを動かせます。
• VPS（ブイピーエス） — インターネット上にある仮想サーバーを借りるサービスです。アプリを動かすためのソフトを自分で入れ、サーバーの設定や更新も自分で行います。
• API（エーピーアイ） — プログラム同士がデータをやり取りする窓口です。問い合わせフォームなら、入力内容を受付処理に渡す窓口として使えます。
• データベース（DB） — データを保存し、あとから探したり更新したりする仕組みです。予約アプリでは、予約した人や日時の記録に使います。

個人開発のデプロイ先を、アプリの機能から選ぶ

公開先を探すときは、まず 「公開後にどこでコードが動き、どこにデータが残るか」 を書き出すと、候補を絞れます。

ポートフォリオなら静的ホスティングから考える

静的ホスティングは、用意したページや画像などのファイルをブラウザへ届ける公開方法です。手書きのHTMLはそのまま公開できます。サイト生成ツールを使う場合は、公開前にページのファイルを作る「ビルド」を行い、できたファイルを公開します。作品を追加したときは、ファイルを作り直して公開します。配信したJavaScriptはブラウザで動くので、絞り込みや表示切り替えもできます。GitHub Pagesはこの方式の一例で、GitHub上に置いたHTML・CSS・JavaScriptなどを公開できます。GitHub Pages公式の概要

問い合わせフォームなら、送信先から決める

フォームの見た目は静的ページに置けます。送信データの受付やメール通知は、外部フォームサービス、公開サービスに付属するフォーム機能、自分で用意した受付処理（API）などが担当します。たとえばNetlify Formsは、指定の設定を加えたHTMLフォームの送信を受け付けます。Netlify公式のフォーム設定

通知が届けば十分ならフォーム機能で始められます。受付番号を発行する、過去の問い合わせを担当者別に表示するなど、独自の処理が増えたら、APIや管理画面を含む構成を検討します。自分でメール通知を実装する場合、メール送信サービスの合鍵にあたる「APIキー」はサーバー側で管理します。ブラウザに届くファイルに入れると、閲覧者から見えてしまいます。

予約を保存するなら、処理とデータの置き場所を決める

予約管理なら、予約枠が空いているか、利用者がその予約を更新できるかを、操作のたびに確認します。画面を静的に配信する場合でも、予約を受け付ける処理と、記録を残すデータベース（DB）が必要です。

予約を受け付け、利用者ごとに見られるデータを制限できるサービスがあれば、画面だけを静的ホスティングで公開する方法もあります。自分で書いたNode.jsやPythonのプログラムをサーバーで動かすなら、アプリを動かす環境を提供するPaaSが候補です。サーバーの基本的な管理は公開先に任せ、アプリが使うライブラリの更新や、誰が何を操作できるかは自分で管理します。Render Web Servicesはその一例です。Render公式のWeb Servicesガイド

GitHubにコードがある予約アプリなら、KamuiDashが候補

Node.jsやPythonで作った予約アプリをGitHubに置いていて、初めてデータベース付きで公開するなら、KamuiDashが候補です。GitHubからアプリを公開し、予約データを保存するPostgreSQLも同じサービスで用意できます。サーバーの設定を一から始めずに、公開した画面から予約を登録し、アプリを更新しても記録が残るかを確認するところまで進められます。KamuiDashのアプリ設定 · KamuiDashのDB設定

すでに別サービスにデータベースがある場合は、今の接続先をそのまま使えるかを先に確認します。

VPSは、サーバーの設定を自分で管理したいときに考える

VPSは仮想サーバーを借りる方式です。たとえばDigitalOcean Dropletsでは、仮想マシンに接続して環境を設定します。サーバーの基本ソフト（OS）の更新、外部から許可する通信の設定、ブラウザとの通信の暗号化（HTTPS）、アプリが止まったときの復旧まで、自分で管理します。サーバーに独自の設定が必要で、その管理も引き受けられるかが選ぶ基準です。DigitalOcean公式のDroplet初期設定

候補が決まったら、自分のアプリで確認する

公開方式を選んだら、まずは発行されたURLで、利用者が実際に行う操作を一つ試します。ポートフォリオなら別端末からページと画像を開く。問い合わせフォームならテスト送信し、通知が届くことを確かめる。DB付きならデータを登録し、アプリを更新して公開し直した後も読み出せるか確認します。会員向けの予約管理なら、別のアカウントで他人の予約を読み出したり更新したりできないことも確かめます。

費用を比べるときは、アプリの実行料に加え、DB・ファイル保存・通信量まで入れて見積もります。デモを見せる用途なら初回アクセスの待ち時間、継続利用ならDBの保存期限やバックアップも確認します。

あわせて読みたい

• AIで作ったWebサイト・Webアプリの公開先10サービス比較
• 個人開発のWebアプリ＋DB、月いくらかかる？
• FastAPIとPostgreSQLを日本のサーバーで公開する手順

KamuiDashは、GitHubからWebアプリを公開し、PostgreSQLを接続できるPaaSです。 KamuiDash