はじめに
VercelとはNext.jsを開発している会社で静的サイトとサーバレス機能のホスティングを提供するクラウドプラットフォーム。
JAMStackなWebサイトやサービスをGUIで簡単にデプロイできる。
Next.jsに至っては、ウチでデプロイしないと本領発揮できませんよー的なノリでVercelがデプロイを推奨している。
料金プランは三つあるが、非営利の個人運用とかポートフォリオ用なら無料のHobbyプランでOK。
従量課金でもないので、基本無料で使える。
デプロイ方法
まず作ったアプリのリポジトリをGitHubに作成する。
赤丸をクリック。
次にここにリポジトリ名を入力する。
なんでもいいが、基本作ってるアプリのディレクトリ名とか。
入力したら他は全部飛ばして一番最後の「Create repository」をクリック
出来たらvscodeのここからコミットメッセージを入れて赤丸をクリック。
コミットメッセージは何でも良いが、最初なら「initial commit」とか。
githubの作ったリポジトリのページに行って、コマンドラインからソースコード上げるならこれしろ。みたいなノリで書いてあるソースコードを打ち込む
~$ git remote add origin https://github.com/ユーザー名/リポジトリ名.git
~$ git push -u origin main
ここまでやってGithubをリロードするとファイルがちゃんと上がってるはず。
それからVercelにログインして、New Projectをクリック
Import Git RepositoryのデプロイしたいアプリのImportをクリック。
個人の場合はPERSONAL ACCOUNTをクリック
この画面で、RESTAPI等を作ってそこからAPIでやりとりしたり環境変数が必要な場合は、Environment Variablesに入力していく。完了したらAddをクリック
環境変数周りをOKならDeployをクリックで正しくデプロイ出来れば紙吹雪が舞います！！
デプロイ後の更新
更新はvscodeでcommitして、ターミナルでgit push -u origin mainでデプロイが走り即時反映される。