ふと、自分のポートフォリオを作ろうかなと思い立って
「どうせ作るなら、世の中に公開したくね？」ってことで
Vercelにデプロイしてみたので備忘録がてら記事にしようと思います。

CentOSと迷いましたが初心者により優しいということで
今回はVercelを採用しました。
（個人利用のホビープランなら無料っていうのも大きいですね）

※今回はReact-appを用いていますが、開発環境はこれでなくてもVue.jsでもNext.jsでもなんでも大丈夫です

注意 : Node.js と npm は予め使える前提で進めます

方法はいろいろあるんですが、今回は一番簡単なCRAを用います！
まず、以下のバージョンよりも新しいか確認してください

バージョンの最低基準
npm   v5.6
node  v10.16

それぞれ以下のように入力すると確認できます。

$ npm --version
$ node --version

確認出来たら、以下のコマンドを叩いてみてください！

$ npx create-react-app myapp

みるみるうちにReact環境が構築されていきます
Happy hacking!と表示されたら完了です！

ほら、簡単でしょう？

次にGithubとの連携を行います。
まずは、ディレクトリを移動しましょう

$ cd myapp

つづいて、Githubでリポジトリを作りましょう！
https://github.com/user/myapp.gitとしておきます。
そして、このReactの環境をGitHubにアップロードします

以下のコードを一行ずつ順番に入力していってください。

$ git init
$ git add .
$ git commit -m "First Commit"
$ git remote add origin https://github.com/user/myapp.git
$ git push -u origin main

これでGithubにアップロードできました。

VercelにGitHubアカウントを用いてログインしましょう！
ダッシュボードの画面に来たら、「New Project」をクリックしてください。

次に、「Import Git Repository」から、 https://github.com/user/myapp.git を入力します。

そしたら、GitHubとVercelの連携について聞かれるので、承認します。
すると、「FRAMEWORK PRESET」の項目が表示されると思うので、「Create React App」を選択して「Deploy」をクリック。

これで、時間を待てばデプロイ完了です。以上です。
これだけで、React アプリを世界中に公開することができましたぁ。

おまけ

コードを更新した場合は、以下のコマンドを打ってください！

$ npm run build

そして、GitHubのmainブランチにpushするだけで、更新が反映されたものが
勝手にデプロイされます。　便利ですねぇ