デプロイの基本

開発環境と本番環境

Webアプリケーション開発では、少なくとも開発環境（Development）と本番環境（Production）の2つの環境を使い分けます。 大規模なプロジェクトでは、さらにステージング環境（Staging）を設けることもあります。

# Next.jsの場合
# 開発モード：ホットリロード、詳細なエラー表示
npm run dev

# 本番ビルド：最適化されたコードを生成
npm run build

# 本番起動：ビルド済みコードを実行
npm run start

ビルドプロセス

ビルドとは、開発用のソースコードを本番環境で実行できる形に変換する処理です。 TypeScriptのコンパイル、JavaScriptのバンドル・ミニファイ、CSSの最適化などが行われます。

ビルドによって以下の最適化が行われます。

• トランスパイル — TypeScript/JSXを標準JavaScriptに変換
• バンドル — 複数ファイルをまとめて読み込みを高速化
• ミニファイ — 空白・コメントを除去してファイルサイズ削減
• ツリーシェイキング — 未使用コードを自動的に除外
• コード分割 — ページごとに必要なコードだけを読み込み

# Next.jsのビルド出力例
$ npm run build

Route (app)                    Size     First Load JS
┌ ○ /                          5.2 kB        89 kB
├ ○ /about                     1.8 kB        85 kB
├ ● /blog/[slug]               3.1 kB        87 kB
└ ○ /contact                   2.4 kB        86 kB

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)

# .next/ ディレクトリにビルド成果物が生成される

環境変数

環境変数は、環境ごとに異なる設定値（APIキー、データベース接続先など）を コードの外で管理する仕組みです。秘密情報をソースコードに含めずに済むため、セキュリティ上も重要です。

# .env.local（開発環境用・Gitに含めない）
DATABASE_URL=postgresql://localhost:5432/myapp_dev
API_KEY=dev_key_12345
NEXT_PUBLIC_APP_URL=http://localhost:3000

# .env.production（本番環境用）
DATABASE_URL=postgresql://prod-server:5432/myapp
API_KEY=prod_key_secret
NEXT_PUBLIC_APP_URL=https://myapp.com

Next.jsでは、NEXT_PUBLIC_プレフィックスが付いた環境変数のみがクライアント（ブラウザ）側で使えます。 それ以外はサーバー側でのみアクセス可能です。

// サーバーサイドでのみ使える
const dbUrl = process.env.DATABASE_URL;

// クライアントサイドでも使える（NEXT_PUBLIC_プレフィックス）
const appUrl = process.env.NEXT_PUBLIC_APP_URL;

// .env.local は .gitignore に追加しておく
// .gitignore:
// .env.local
// .env*.local

ドメインとDNS

ドメインは、Webサイトの「住所」にあたるもの（例：example.com）です。DNS（Domain Name System）は、ドメイン名をサーバーのIPアドレスに変換する仕組みです。

# ドメインの仕組み
ユーザーが example.com にアクセス
  ↓
DNSサーバーに問い合わせ
  ↓
IPアドレス 93.184.216.34 を返す
  ↓
そのIPアドレスのサーバーに接続

# よく使うDNSレコード
Aレコード    : ドメイン → IPv4アドレス
AAAAレコード : ドメイン → IPv6アドレス
CNAMEレコード: ドメイン → 別のドメイン（エイリアス）
MXレコード   : メールサーバーの指定

ドメインはお名前.com、Google Domains、Cloudflareなどのレジストラで取得できます。年間数百円〜数千円程度で利用可能です。

HTTPSとSSL/TLS

HTTPSは、HTTP通信をSSL/TLSで暗号化したプロトコルです。 現代のWebサイトでは必須であり、Google検索のランキング要因にもなっています。

• データの暗号化 — 通信内容が第三者に読み取られない
• データの完全性 — 通信内容が改ざんされていないことを保証
• 認証 — 接続先が正しいサーバーであることを証明

Let's Encryptを使えばSSL証明書を無料で取得できます。 Vercelやクラウドサービスでは自動的にHTTPSが設定されることが多いです。

# Let's Encrypt で証明書を取得する例（certbot）
sudo certbot --nginx -d example.com -d www.example.com

# Vercelの場合：自動でHTTPS証明書が発行される
# カスタムドメインを追加するだけでOK

# Nginx設定例（HTTPS対応）
server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location / {
        proxy_pass http://localhost:3000;
    }
}

ホスティングの種類

アプリを公開するためのホスティング方法は、用途や規模に応じていくつかの選択肢があります。