Next.js - Vercelでデプロイしてみる
背景
実務ではReactを使っているのですがNext.jsのキャッチアップしておきたいと思ったので、その内容を整理したいと思います。
内容は易しめです。
前回の続きになります！ 今回は触っていた簡単なアプリケーションをデプロイします！
Next.jsアプリケーションのデプロイ
Next.jsアプリケーションは、静的ファイル生成やAPIルートなど、サーバーサイドの機能も含まれるため、単純な静的ファイルのホスティングとは異なります。
そのため、Next.jsアプリケーションをWebのレンタルサーバーでホスティングする場合は、サーバーサイドの機能をサポートしているレンタルサーバーを選択する必要があります。
したがって、単純な静的ページの場合はWebサーバーにアップロードすることができますが、動的なページを含む場合は特定の環境が必要となることがあります。
Vercel
Vercel ( https://vercel.com/ )は、簡単にNext.jsアプリケーションをデプロイすることができるNext.jsの開発元が運営するサービスです。
Next.jsが提供するサーバーサイドレンダリングやAPIルートなどの機能もサポートしているクラウドサービスであり、GitHubのリポジトリとの連携が簡単に行えるなど、Next.jsの開発において高い人気を誇っています。
デプロイ手順
Vercelのトップにアクセス
Vercelのトップ ( https://vercel.com/ )にアクセスし、Start Deployingをクリックします。
GitHubのリポジトリを指定してアプリの連携を行う
next-appリポジトリのアプリケーションをデプロイしたいため、指定してImportをクリックします。
設定画面からDeployを実行
あとはデプロイするだけで連携が完了し、ビルド＆デプロイが行われます。
リポジトリの作成とデプロイには若干の時間がかかります。
デプロイしてアプリケーションとして実行できるまで全て自動で実行されています。
上記画面の設定欄について
Vercel では、Build and Output Settings の中で以下の設定ができます。
- Build Command: ビルドコマンドを設定します。デフォルトは
npm run buildまたはnext buildです。 - Output Directory: ビルドされたファイルが出力されるディレクトリを指定します。 デフォルトは Next.js のデフォルトに従うという記載になっています。
- Install Command: 依存関係をインストールするコマンドを設定します。
デフォルトは
yarn install,pnpm install, またはnpm installになっています。 - Environment Variables: アプリケーションに設定する環境変数を設定します。
今回は設定しませんでしたが、必要に応じて環境変数を設定しましょう。
デプロイ完了
すべての作業が完了すると「Congratulations!」と表示され、デプロイが完了されたことになります！
とても簡単でした！
アクセスしてみる
Vercelでは自動的にデプロイされたアプリケーションにランダムな文字列とvercel.appドメインのサブドメインで構成された一意なURLが生成されます。
URLにアクセスするとPushしたアプリにアクセスすることができます。
リモートのmainブランチにpushしたら自動的にビルド・デプロイが走る
vercelはGitリポジトリに紐づけられたプロジェクトを監視しており、コードが更新されると自動的にビルドが開始され、デプロイ可能なアーティファクトが生成されます。
その後、vercelがホスティングするインフラストラクチャー上にアプリケーションが自動的にデプロイされます。
このプロセスは全て自動的に行われるため、開発者は手動でビルド、デプロイの手順を行う必要がありません。
以下はmainブランチをリモートにpushしたときの挙動です！
続く…
コメント
本記事の内容は以上になります！
興味があれば他の記事も更新していきますので是非ご覧になってください♪
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
