Zenn
👻

TurborepoをVercelにデプロイするまでの簡易手順

2023/06/16に公開
Next.js
Vercel
Turborepo
tech

はじめに

TurborepoでNext.jsのプロジェクトを作成し、Vercelにデプロイするまでの簡易手順を記載します。

新規にTurborepo プロジェクトを作成

create-turbo コマンドを利用し、新規に Turborepo プロジェクトを作成します。（参考）

$ pnpm dlx create-turbo@latest


>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Where would you like to create your turborepo? turborepo-nextjs-sample
? Which package manager do you want to use? pnpm

Downloading files. This might take a moment.

>>> Created a new Turborepo with the following:

apps
 - apps/docs
 - apps/web
packages
 - packages/eslint-config-custom
 - packages/tsconfig
 - packages/ui

Installing packages. This might take a couple of minutes.

>>> Success! Created a new Turborepo at "turborepo-nextjs-sample".
Inside that directory, you can run several commands:

  pnpm run build
     Build all apps and packages

  pnpm run dev
     Develop all apps and packages

  pnpm run lint
     Lint all apps and packages

Turborepo will cache locally by default. For an additional
speed boost, enable Remote Caching with Vercel by
entering the following command:

  pnpm dlx turbo login

We suggest that you begin by typing:

  cd turborepo-nextjs-sample
  pnpm dlx turbo login

プロジェクトディレクトリーに移動します。

$ cd turborepo-nextjs-sample

ローカルで実行します。

$ pnpm dev --filter=web

コミットします。

$ git checkout main
$ pnpm build
$ git add .
$ git commit -m "create test page"

GitHubのリポジトリを作成

後の GitHub のリポジトリを Vercel に連携させるため、ソースを GitHub リポジトリで管理します。

GitHub にログインし、リポジトリを作成します。

  1. リポジトリ名を入力（今回はturborepo-nextjs-sample）
  2. Public か、Private かを選択
  3. Create repository をクリック

作成が完了しました。

リポジトリにコードをプッシュします。

$ git remote add origin https://github.com/hayato94087/turborepo-nextjs-sample.git
$ git branch -M main
$ git push -u origin main

Vercelにデプロイ

GitHub のリポジトリを連携させ、Vercel にデプロイします。

Vercel にログインし、「Add New」→「Project」をクリックします。

  1. フレームワークを選択（今回はNext.jsを選択）
  2. Turborepoに含まれるワークスペースの中からどのワークスペースをデプロイするか選択（今回はapp/web）
  3. Deploy をクリック

デプロイが完了しました。ダッシュボードにアクセスします。

デプロイされた環境にアクセスするため、「Visit」をクリックします。

無事、デプロイできました。

さいごに

最後に、以下が作成した GitHub リポジトリです。

https://github.com/hayato94087/turborepo-nextjs-sample

まとめ

TurborepoでNext.jsのプロジェクトを作成し、Vercelにデプロイするまでの簡易手順を紹介しました。

Discussion