[Nextjs]NextjsプロジェクトのVercelデプロイ!

Javascript

こんにちは!

最近新しいWEBアプリを作成したので、Vercelへのデプロイを行いました!

折角ならと思いましてVercelデプロイの方法を記録しておこうと思います。

GitHub

まずは、自分のプロジェクトがGithubリポジトリにアップされている確認しましょう。

Github確認

確認。

GithubにPrivateリポジトリとして登録されていることが確認できました。

ここで作成していないとVercelとの連携ができなくなるので重要です。

Vercel

続きまして、Vercelの方を確認しに行きましょう。

まずは、Vercelのホームページにアクセスしましょう。Vercelのアカウントを作成していない人は作成して下さい!

Githubとの連携で簡単に作成することが可能ですので作っておきましょう。

無料版だと色々と商業的な使い方はできませんが、とりあえずリリースして様子を見るといったふうに使えますのでまずは、hobbyプランで大丈夫です!!

ログイン

ログインが済みますと下のような画面になると思います。

(私の場合には以前作ったプロジェクトがありますが)

新規プロジェクト作成

さてダッシュボードの右上に 「Add New…」とありますので、そこをクリック。

色々と選択肢があるとおもいますが、「Project」を選択して下さい。

下のような画面になると思います。

ここで、連携したいGithubのRepositoryを選択して下さい。

GithubのRepository連携はSearchから自分のリポジトリを選択して下さい。

そして、連携したいリポジトリが表示されたら横の「import」ボタンをクリックして下さい。

下のようにProjectの詳細設定が表示されています。

基本はそのままで大丈夫だと思うので、「Deploy」ボタンを押しましょう。

付け足しですが、下の「Environmen Variables」などで環境変数などを設定できます。

環境変数にはDBへのアクセス情報など設定できますが、今回そのような機能はまだ設定していないので設定なしで行きます。

「Deploy」ボタンを押下します。しばらくするとデプロイが完了します。

以下の画面のようになったらOKです!!おめでとうございます

Continue to Dashboardを押してプロジェクトのダッシュボードを開きましょう。

ここで、URL等を確認できます。

こんな感じです!

URLとか配信状況とか色々と確認できます!

終わり

駆け足になってしまいましたが、Vercelデプロイの方法をざっと記載しました。

UI等色々と変わりますが、基本的なところは変わらないと思います!

何かありましたらコメントください!!!

コメント

タイトルとURLをコピーしました