Vercelを使用してデプロイしてみた

はじめに

今回ポートフォリオページを新しくTypescriptで作成したのでこの機会を使ってGitHub以外のデプロイをしたいなと思い、フロント部分はReactで作成したのでVercelを選びました。

---

目次

1. Vercelとは？
2. 必要な準備
3. デプロイ手順
4. カスタムドメイン設定
5. デプロイ後の管理

---

1. Vercelとは？

Vercelは、動的サイトやサーバーレスアプリをホスティングするためのプラットフォームです。
以下のような特徴があります。

• 無料プランが利用可能。
• GitHub/GitLab/Bitbucketとの連携。
• 自動ビルドとデプロイ。
• 高速で信頼性の高いCDN。

公式サイト：https://vercel.com

---

2. 必要な準備

以下のものを用意してください：

1. Vercelアカウント（未登録の場合、こちらで作成）。
2. GitHubリポジトリにアプリやサイトのコードを保存。
3. デプロイしたいプロジェクトの準備（例：Next.js、React、静的HTML/CSSなど）。

---

3. デプロイ手順

1. Vercelへのログイン

1. Vercelにアクセスし、アカウントを作成またはログイン。
2. GitHub/GitLab/Bitbucketとの連携を求められるので、GitHubを選択して認証します。

2. 新しいプロジェクトを作成

1. 「Add New…」→「Project」をクリック。
2. GitHubのリポジトリ一覧が表示されるので、デプロイしたいリポジトリを選択。
3. フレームワークの自動検出が行われ、適切な設定が適用されます。
   • 例: Next.jsの場合、自動でnpm run buildがビルドコマンドとして設定されます。

3. デプロイ

1. 設定を確認後、「Deploy」ボタンをクリック。
2. 数秒から数分でデプロイが完了し、公開URLが提供されます（例: https://your-project-name.vercel.app）。

---

4. カスタムドメイン設定

独自ドメインを使用するには以下の手順を行います：

1. Vercelのダッシュボードでプロジェクトを開き、「Settings」→「Domains」を選択。
2. 「Add Domain」をクリックし、カスタムドメインを入力。
3. 必要に応じてDNSレコード（AレコードやCNAMEレコード）を設定します。

詳細は公式ガイドを参照：Vercel Custom Domains

---

5. デプロイ後の管理

Vercelではデプロイ後の管理も簡単です。

• 自動デプロイ: GitHubリポジトリの更新に応じて自動で再デプロイされます。
• Preview機能: プルリクエストごとにプレビューURLが生成されます。
• Analytics: サイトのパフォーマンスやトラフィックを確認できます（有料プラン）。

---

まとめ

Vercelを使用することで、Webサイトやアプリケーションのデプロイが非常にスムーズになります。特にGitHubとの連携を利用すれば、コードをプッシュするだけで自動的にデプロイされるため、効率的な運用が可能です。最後に僕のポートフォリオページを添付して終わりにさせていただきます。

---

ポートフォリオページ