この章では完成したアプリをVercelでデプロイしてアプリをインターネットへ公開してみようと思います。ReactやNextJsなどのアプリを簡単にデプロイできるPaaSです。
Vercelで公開するには以下2つが必要です。あらかじめ作っておいてください。VercelアカウントはGithubのアカウントでログインしてください。
- Githubのアカウント
- Vercelのアカウント
Vercelへのデプロイは次のように行います。
- ローカルリポジトリに編集結果を反映(commit)
- Githubにリモートリポジトリを作成
- リモートリポジトリにローカルリポジトリの編集結果を反映(push)
- GithubのリモートリポジトリをインポートしてVercelのプロジェクトを作成
- デプロイ
ローカルリポジトリに編集結果を反映(commit)
create react appでプロジェクトを作成したので、すでにgit initはされています。
まずは今までの変更結果をローカルリポジトリにコミットします。
git add .
git commit -m "for deploy commit"
Githubにリモートリポジトリを作成
つづいてGithubにリモートリポジトリを作成します。こちらにアクセスします（sign inしていない場合はsign inしてください）。
サイドバー右のRepositoriesの右のNewボタンをクリックします。
このページでのチェック項目は以下の通りです。
- Ownerがサインインしているアカウントになっていることを確認します。
-
Repository nameにリモートリポジトリの名前を入力します。
flowchart-builder
などでいいでしょう。
これら以外は元の設定のまま、ページ下部のCreate repositoryをクリックします。
これでリモートリポジトリを作成完了です。
水色の枠で囲われているhttps://github.com/ユーザ名/リポジトリ名.gitとなっているURLは後で使用するのでコピーしておきましょう。
リモートリポジトリにローカルリポジトリの編集結果を反映(push)
ローカルリポジトリでコミットした編集結果をリモートリポジトリにプッシュします。
まずはリモートリポジトリを登録するために次のコマンドを実行します。
git remote add origin コピーしたリモートリポジトリのURL
コマンドの意味
| コマンド | 内容 | 詳細 |
|---|---|---|
| git remote add | 新しいリモートを登録します | |
| origin | リモートの名前を指定します。 | リモートの名前は特に理由がなければoriginを使うことが多いです。 |
| コピーしたリモートリポジトリのURL | リポジトリ作成時にコピーしたリポジトリのURL | githubであればhttps://github.com/ユーザ名/リポジトリ名.gitとなっているはずです。 |
つづいてリモートリポジトリへpushします。
git push origin --all
ブラウザでhttps://github.com/ユーザ名/リポジトリ名にアクセスするとpushされていることを確認してください。
GithubのリモートリポジトリをインポートしてVercelのプロジェクトを作成
つづいてVercelに移動します(Vercelにログインしていない場合はログインしてください)。New Projectボタンをクリックします。
Import Git Repositoryに表示されているリポジトリ一覧から先ほど作成したリポジトリを選択しimportボタンをクリックします(おそらくアイコンがReactのアイコンになっているはずです)。
-
FRAMEWORK PRESETがCreate React Appになっていることを確認しておいてください。（それ以外であればCreate React Appを選択します、ちなみにこの時表示されるフレームワークなどがVercelでデプロイできるフレームワークです） - Environment VariablesにNAMEがCI,VALUEがfalseとなるように設定してください。
Deployボタンをクリックします。
しばらく待つとデプロイが完了するはずです。待っている間,Buildingなどのアコーディオンメニューをクリックすると各種ログを確認することができます。「このコマンドはどんなことをするコマンドなんだろう」と考えてみるととても勉強になります！
しばらくするとデプロイが完了します。
デプロイ出来たらVisitボタンなどから見てみましょう！きちんとデプロイできているはずです！