ふと、自分のポートフォリオを作ろうかなと思い立って
「どうせ作るなら、世の中に公開したくね？」ってことで
Vercelにデプロイしてみたので備忘録がてら記事にしようと思います。
CentOSと迷いましたが初心者により優しいということで
今回はVercelを採用しました。
（個人利用のホビープランなら無料っていうのも大きいですね）
※今回はReact-appを用いていますが、開発環境はこれでなくてもVue.jsでもNext.jsでもなんでも大丈夫です
Reactの環境作成
注意 : Node.js と npm は予め使える前提で進めます
方法はいろいろあるんですが、今回は一番簡単なCRAを用います！
まず、以下のバージョンよりも新しいか確認してください
バージョンの最低基準
npm v5.6
node v10.16
それぞれ以下のように入力すると確認できます。
$ npm --version
$ node --version
確認出来たら、以下のコマンドを叩いてみてください！
$ npx create-react-app myapp
みるみるうちにReact環境が構築されていきます
Happy hacking!と表示されたら完了です！
ほら、簡単でしょう？
Githubの設定
次に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の設定
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するだけで、更新が反映されたものが
勝手にデプロイされます。 便利ですねぇ