Angular 開発で HTTPS を使う

Angular で ng serve を HTTPS で実行する方法

Angular の開発環境で ng serve コマンドを使用してアプリケーションをローカルサーバーで起動する場合、デフォルトでは HTTP プロトコルが使用されます。しかし、セキュリティ上の理由や特定の機能の要件から、HTTPS プロトコルを使用したいことがあります。

HTTPS 証明書の作成

1. openssl ツールをインストールします。

   • macOS: Homebrew を使用してインストールできます。
   • Linux: パッケージマネージャー (e.g., apt, yum) を使用してインストールできます。
   • Windows: OpenSSL のバイナリをダウンロードしてインストールします。

2. 自己署名証明書を作成します。

   openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem
   

   このコマンドでは、key.pem と cert.pem というファイルが作成されます。

ng serve の設定

1. angular.json ファイルを開き、serve ターゲットの設定を変更します。

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "ssl": {
         "key": "./key.pem",
         "cert": "./cert.pem"
       }
     }
   }
   

   この設定により、ng serve を実行する際に key.pem と cert.pem ファイルを使用して HTTPS プロトコルが有効になります。

ng serve コマンドを実行します。

ng serve

これで、ブラウザで https://localhost:4200 にアクセスすると、HTTPS プロトコルを使用してアプリケーションが起動します。

注意

• ブラウザは、自己署名証明書を信頼していない場合、セキュリティ警告を表示することがあります。この場合は、警告を無視して続行することができます。
• 自己署名証明書は、開発環境でのテスト用であり、本番環境では信頼できる証明機関から発行された証明書を使用する必要があります。

Angular 開発で HTTPS を使うためのコード例

angular.json ファイルの設定

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "ssl": {
      "key": "./key.pem",
      "cert": "./cert.pem"
    }
  }
}

• ssl オプションを追加し、key と cert プロパティに証明書ファイルのパスを指定します。

証明書ファイルの作成

openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem

• openssl コマンドを使用して、自己署名証明書を作成します。

ng serve

• ng serve コマンドを実行すると、HTTPS プロトコルを使用してアプリケーションが起動します。

ng serve のオプションを使用する

上記で説明した方法に加えて、ng serve コマンドのオプションを使用して HTTPS を有効にすることもできます。

ng serve --ssl --ssl-key key.pem --ssl-cert cert.pem

• --ssl-key と --ssl-cert オプションで証明書ファイルのパスを指定します。
• --ssl オプションで HTTPS を有効にします。

angular.json ファイルの serve ターゲットを直接編集する

angular.json ファイルの serve ターゲットを直接編集して、HTTPS の設定を指定することもできます。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "ssl": true,
    "sslKey": "./key.pem",
    "sslCert": "./cert.pem"
  }
}

• sslKey と sslCert プロパティに証明書ファイルのパスを指定します。
• ssl オプションを true に設定して HTTPS を有効にします。

webpack-dev-server の設定を使用する

Angular のビルドシステムである webpack-dev-server の設定を直接編集して、HTTPS を有効にすることもできます。

// webpack.config.js
module.exports = {
  // ... other configuration
  devServer: {
    https: {
      key: './key.pem',
      cert: './cert.pem'
    }
  }
};

• devServer オプションの https プロパティに証明書ファイルのパスを指定します。