Deploy(Vercel)

Deploy を分かりやすく

「デプロイ（Deploy）」って耳にしたことありますよね。これは、開発したソフトウェアを実際の運用環境に移すことを指します。そうすることで、ユーザーは我々が作ったアプリを使えるようになるんです。

例えば、あなたが絵を描いたとしましょう。完成した絵を見て満足しても、それだけじゃあなた以外の誰もその絵を見ることはできないですよね。それをギャラリーに持っていって展示することで、初めて他の人々もその絵を見て楽しむことができます。

この例え話で言うところの「絵を描く」のがソフトウェア開発、そして「ギャラリーに展示する」のがデプロイに相当します。デプロイを行うことで、我々が開発したソフトウェアが、世界中のユーザーの手元に届くんですね。

ただ、実際のデプロイはもう少し複雑です。開発環境と運用環境は異なるため、適切な設定を行ったり、予期せぬエラーに対応したりする必要があります。それには経験と技術力が求められます。めっちゃ便利なんですよ！

「そもそもどのタイミングでやるの？」って方いるかと思いますが、ソフトウェアを開発したら必ず行う作業です。なぜなら、アプリケーションがユーザーにとって価値あるものになるのは、それがデプロイされて初めてだからです。このプロセスを理解しておくことは、アプリケーション開発において非常に重要なんですよ。

Vercel での自動デプロイの設定

Vercel は、開発者がウェブサイトやアプリケーションを簡単にデプロイできるプラットフォームです。特に、Next.js や Jamstack プロジェクトに適しており、GitHub や GitLab、Bitbucket といったバージョン管理システムと統合して、自動デプロイが行えます。

まず、Vercel と GitHub のアカウントを作成し、連携させます。次に、以下の手順でプロジェクトをデプロイします。

1. Vercel のダッシュボードにアクセスし、「Import Project」をクリックします。
2. GitHub のリポジトリを選択し、「Import」をクリックします。
3. 必要に応じてプロジェクトの設定を行い、「Deploy」をクリックします。

この設定を行うことで、GitHub にプッシュされるたびに Vercel で自動的にデプロイが行われます。

TypeScript でプロジェクトの作成

Next.js と TypeScript のプロジェクトを作成し、Vercel でデプロイする方法を解説します。まず、プロジェクトを作成するために、以下のコマンドを実行します。

npx create-next-app --example with-typescript my-nextjs-typescript-app
cd my-nextjs-typescript-app

これで Next.js と TypeScript のプロジェクトが作成されます。作成したプロジェクトを GitHub にプッシュし、Vercel でデプロイします。

Vercel での自動デプロイの実行

GitHub にプッシュされるたびに、Vercel で自動デプロイが行われます。これにより、開発者はデプロイプロセスを簡略化し、より効率的に作業が行えます。

Next.js と TypeScript のプロジェクトにおいて、ビルドプロセスは以下のようになります。

1 - プロジェクトのルートディレクトリで、next build コマンドを実行し、プロジェクトをビルドします。このコマンドは、next.config.js や tsconfig.json の設定に基づいて、プロジェクトの最適化やコンパイルを行います。

2 - ビルドが完了したら、next export コマンドを実行して静的サイトを生成します。このコマンドは、プロジェクト内の各ページを静的な HTML ファイルに変換し、out ディレクトリに出力します。

3 - Vercel は、生成された静的サイトを自動的にデプロイし、一意の URL を提供します。開発者は、この URL を使用してデプロイされたサイトを確認できます。

Vercel の環境変数の設定

Next.js と TypeScript のプロジェクトでは、環境変数を使用して機密情報や環境固有の設定を管理することができます。Vercel では、プロジェクトのダッシュボードから環境変数を設定できます。

1. Vercel のダッシュボードにアクセスし、プロジェクトを選択します。
2. 「Settings」タブをクリックし、「Environment Variables」を選択します。
3. 「Add」ボタンをクリックし、環境変数の名前と値を入力します。環境（Production、Preview、Development）を選択し、「Save」をクリックします。

これで、Vercel でデプロイされたプロジェクトで環境変数が利用できるようになります。Next.js のコード内で環境変数を使用するには、変数名に NEXT_PUBLIC_ のプレフィックスを付けて宣言します。例えば、以下のようになります。

// my-nextjs-typescript-app/pages/index.tsx

const API_URL = process.env.NEXT_PUBLIC_API_URL

const HomePage: NextPage = () => {
  // API_URL を使用した処理
}

この方法で、Vercel での自動デプロイを Next.js と TypeScript のプロジェクトに適用できます。開発者は、GitHub でコードをプッシュするだけで簡単にデプロイが行え、効率的にプロジェクトを進めることができます。また、環境変数を活用することで、機密情報や環境固有の設定を管理し、安全な開発環境を確保できます。