Chapter 16

第10章 Vercelにデプロイしてアプリを公開

てべすてん
てべすてん
2022.03.11に更新

この章では完成したアプリをVercelでデプロイしてアプリをインターネットへ公開してみようと思います。ReactやNextJsなどのアプリを簡単にデプロイできるPaaSです。

Vercelで公開するには以下2つが必要です。あらかじめ作っておいてください。VercelアカウントはGithubのアカウントでログインしてください。

  • Githubのアカウント
  • Vercelのアカウント

Vercelへのデプロイは次のように行います。

  1. ローカルリポジトリに編集結果を反映(commit)
  2. Githubにリモートリポジトリを作成
  3. リモートリポジトリにローカルリポジトリの編集結果を反映(push)
  4. GithubのリモートリポジトリをインポートしてVercelのプロジェクトを作成
  5. デプロイ

ローカルリポジトリに編集結果を反映(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します。

リモートリポジトリへpush
git push origin --all

ブラウザでhttps://github.com/ユーザ名/リポジトリ名にアクセスするとpushされていることを確認してください。

GithubのリモートリポジトリをインポートしてVercelのプロジェクトを作成

つづいてVercelに移動します(Vercelにログインしていない場合はログインしてください)。New Projectボタンをクリックします。

Import Git Repositoryに表示されているリポジトリ一覧から先ほど作成したリポジトリを選択しimportボタンをクリックします(おそらくアイコンがReactのアイコンになっているはずです)。

  • FRAMEWORK PRESETCreate React Appになっていることを確認しておいてください。(それ以外であればCreate React Appを選択します、ちなみにこの時表示されるフレームワークなどがVercelでデプロイできるフレームワークです)
  • Environment VariablesにNAMEがCI,VALUEがfalseとなるように設定してください。

Deployボタンをクリックします。

しばらく待つとデプロイが完了するはずです。待っている間,Buildingなどのアコーディオンメニューをクリックすると各種ログを確認することができます。「このコマンドはどんなことをするコマンドなんだろう」と考えてみるととても勉強になります!

しばらくするとデプロイが完了します。

デプロイ出来たらVisitボタンなどから見てみましょう!きちんとデプロイできているはずです!

質問・指摘などはこちらから

https://zenn.dev/tbsten/scraps/7123b1257c2097