Smile Comfort

Next.js ローカル開発環境をHTTPS化！自己署名証明書で安全な開発を始めよう

投稿日：
更新日：

1. なぜローカル環境をHTTPS化する必要があるの？

1.1 HTTPSの重要性

HTTPS（Hypertext Transfer Protocol Secure）は、ウェブサイトとユーザー間の通信を暗号化するプロトコルです。これにより、第三者によるデータの盗聴や改ざんを防ぎ、安全な通信を実現します。

近年、ウェブサイトのセキュリティは非常に重要視されており、多くのブラウザがHTTPSで保護されていないサイトに対して警告を表示するようになっています。

1.2 ローカル環境でのHTTPSの必要性

  • API連携のテスト: 多くのAPIがHTTPSでの通信を必須としています。ローカル環境でHTTPS化されていない場合、APIとの連携テストができません。
  • 本番環境との整合性: 本番環境がHTTPSで運用されている場合、ローカル環境もHTTPS化することで、より本番環境に近い状態でのテストが可能になります。
  • セキュリティ意識の向上: ローカル環境からHTTPSを意識することで、開発者自身のセキュリティ意識を高めることができます。

2. 自己署名証明書とは？

2.1 証明書の役割

ウェブサイトがHTTPSで通信を行うためには、SSL/TLS証明書（Secure Sockets Layer/Transport Layer Security certificate）が必要です。これは、ウェブサイトの身元を証明するデジタル証明書であり、認証局（CA: Certificate Authority）と呼ばれる信頼できる第三者機関によって発行されます。

2.2 自己署名証明書の仕組み

自己署名証明書は、認証局ではなく、自分自身で発行する証明書です。認証局の審査がないため、手軽に作成できますが、ブラウザは自己署名証明書を信頼しないため、警告が表示されます。

2.3 ローカル開発での自己署名証明書の利用

ローカル開発環境では、自己署名証明書を使用しても問題ありません。警告が表示されますが、ブラウザに例外として証明書を信頼させることで、HTTPS通信が可能になります。

3. Next.jsローカル環境のHTTPS化手順

3.1 mkcertのインストール

mkcertは、ローカル開発用の自己署名証明書を簡単に作成できるツールです。

3.1.1 mkcertのインストール（macOSの場合）

brew install mkcert
brew install nss # Firefoxを使用する場合

3.1.2 mkcertのインストール（Windowsの場合）

Chocolateyを使用する場合：

choco install mkcert

Scoopを使用する場合：

scoop install mkcert

3.1.3 mkcertのインストール（Linuxの場合）

各ディストリビューションのパッケージマネージャーを使用してください。

# Debian/Ubuntu
sudo apt-get install libnss3-tools
sudo apt-get install mkcert

# Fedora/CentOS
sudo dnf install nss-tools
sudo dnf install mkcert

3.1.4 mkcertの初期設定

mkcertをインストール後、以下のコマンドを実行して、証明書を信頼するように設定します。

mkcert -install

3.2 証明書の作成

Next.jsプロジェクトのルートディレクトリで、以下のコマンドを実行して、自己署名証明書を作成します。

mkcert localhost 127.0.0.1 ::1

このコマンドにより、localhost.pem（秘密鍵）とlocalhost+2.pem（証明書）の2つのファイルが作成されます。

3.3 Next.jsの設定

next.config.jsファイルを編集し、HTTPSの設定を追加します。ファイルが存在しない場合は、新規作成してください。

// next.config.js
const withPlugins = require('next-compose-plugins');

const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { dev, isServer }) => {
    if (dev && isServer) {
      const originalEntry = config.entry;
      config.entry = async () => {
        const entries = await originalEntry();
        if (entries['main.js'] && !entries['main.js'].includes('./scripts/webpack-hmr.js')) {
          entries['main.js'].unshift('./scripts/webpack-hmr.js');
        }
        return entries;
      };
    }
    return config;
  },
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:3000/api/:path*', // 例：バックエンドAPIへのリダイレクト
      },
    ];
  },
  serverRuntimeConfig: {
    // Server side configuration options
  },
  publicRuntimeConfig: {
    // Client side configuration options
  },
};

module.exports = withPlugins([], nextConfig);

3.4 package.jsonの編集

package.jsonファイルを編集し、devスクリプトを以下のように変更します。

{
  "scripts": {
    "dev": "NODE_EXTRA_CA_CERTS=localhost+2.pem next dev --experimental-https",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

NODE_EXTRA_CA_CERTS=localhost+2.pemは、Node.jsに自己署名証明書を信頼させるための環境変数です。--experimental-httpsは、Next.jsにHTTPSを有効にするためのオプションです。

3.5 開発サーバーの起動

以下のコマンドを実行して、開発サーバーを起動します。

npm run dev

ブラウザでhttps://localhost:3000にアクセスすると、警告が表示される場合があります。これは、自己署名証明書が信頼されていないためです。ブラウザの指示に従って、例外として証明書を信頼するように設定してください。

4. トラブルシューティング

4.1 警告が表示される

自己署名証明書を使用しているため、ブラウザは警告を表示します。これは正常な動作です。ブラウザの指示に従って、例外として証明書を信頼するように設定してください。

4.2 HTTPSでアクセスできない

  • package.jsonのdevスクリプトが正しく設定されているか確認してください。
  • mkcertが正しくインストールされ、初期設定が完了しているか確認してください。
  • ブラウザが自己署名証明書を信頼するように設定されているか確認してください。

4.3 API連携がうまくいかない

  • APIのエンドポイントがHTTPSで指定されているか確認してください。
  • APIサーバーが自己署名証明書を信頼するように設定されているか確認してください。

5. まとめ

この記事では、Next.jsのローカル開発環境をHTTPS化する方法について解説しました。

  • HTTPSはウェブサイトのセキュリティを確保するために重要です。
  • ローカル環境でのHTTPS化は、API連携のテストや本番環境との整合性を高めるために役立ちます。
  • 自己署名証明書を使用することで、手軽にHTTPS環境を構築できます。
  • mkcertを使用すると、自己署名証明書の作成が簡単になります。

次のステップとして、以下のことを試してみてください。

  • 本番環境でHTTPSを有効にする
  • Let’s Encryptなどの認証局から正式なSSL/TLS証明書を取得する
  • HTTPSに関するセキュリティ対策を学ぶ

安全で快適なNext.js開発を楽しんでください！