はじめに
Webアプリを作ったら、
「自分のパソコンだけで動かすのではなく、インターネット上に公開したい」
と思うことがありますよね。
私も今回作成したアプリを公開したくなり、初めてVercelを使ってデプロイしてみました。
実際にやってみるまでは、
- デプロイって難しそう
- サーバーの知識が必要そう
- エラーだらけになりそう
と思っていました。
しかし、Vercelを使うと想像以上に簡単で、ほとんどボタンをクリックするだけで公開できました。
この記事では、初めてVercelを使ったときの手順を初心者向けにまとめます。
そもそもVercelとは？
Vercel（ヴァーセル）は、Webアプリを簡単に公開できるサービスです。
特に、
- React
- Next.js
- Vue
- TypeScript
などのフロントエンド開発との相性が良く、多くの開発者に利用されています。
Vercelの便利なところは、
- 無料で始められる
- GitHubと連携できる
- 数クリックで公開できる
という点です。
デプロイとは？
次にデプロイについても簡単に解説します
デプロイとは、「作成したアプリをインターネット上で公開すること」です。
例えば、
自分のPC
↓
自分だけ見られる
Vercelへデプロイ
↓
誰でもアクセスできる
という状態になります。
今回の前提
今回は以下の状態からスタートします。
- アプリ開発が完了している
- GitHubリポジトリを作成済み
- コードをGitHubで管理している
- 2026/4当時の情報です
ステップ1：GitHubへ最新コードをPushする
まずは、自分のパソコンにある最新のコード（mainブランチ）をGitHubに送っておく必要があります。
# mainブランチにいることを確認
git checkout main
# 最新の状態をGitHubへ送る
git push origin main
ステップ2：Vercelにサインアップする
Vercel公式サイト にアクセスします。
「Continue with GitHub」 という黒いボタンを押してください。
GitHubの認証画面が出るので、承認（Authorize）します。
※アンケートのような画面が出たら、「Hobby」（個人利用・無料）を選んでください。
ステップ3：アプリを公開（デプロイ）する
ログインすると「Dashboard（ダッシュボード）」が開きます。
「Add New...」 という青いボタンを押し、「Project」 を選びます。
「Import Git Repository」 という欄に、あなたのGitHubのリポジトリ名が出ているはずです。その横の 「Import」 ボタンを押します。
ステップ4：プロジェクト設定を確認する
リポジトリ選択後
「Configure Project」という画面になります
設定は何も変えなくてOKです。
ステップ5：Deployボタンを押す
一番下にある 「Deploy」（デプロイ）ボタンをポチッと押してください。
するとVercelが自動的に、
- 依存関係のインストール
- ビルド
- 公開
を実行してくれます
デプロイ完了
しばらく待つと、「Congratulations!」のような画面が表示されます。
表示されたURLをクリックすると、自分のアプリが公開されていることを確認できます。
例えば、
「https://sample-app.vercel.app」
のようなURLが発行されます。
これで世界中の人がアクセスできる状態になります。
まとめ
今回はVercelを使ってアプリを公開する方法を紹介しました。
手順を振り返ると、
- GitHubへ最新コードをPush
- VercelへGitHubログイン
- Projectを作成
- リポジトリをImport
- Deployボタンを押す
たったこれだけでアプリを公開できます。
私自身、初めてのデプロイで不安でしたが、思っていたよりもずっと簡単でした。
これから初めてVercelを使う方の参考になれば幸いです。
参考資料