nginx で SSL 証明書を設定して https サービスを実装する方法

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノード サービスの https サービス要件を実装します。ノードの基本構造が次のとおりである場合:

|----プロジェクト| |--- static #HTML ファイルを保存| | |--- index.html # index.html
| |--- node_modules # 依存パッケージ| |--- app.js # ノードエントリファイル| |--- package.json 
| |--- .babelrc # es6 ファイルを変換する

index.html ファイルのコードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
 <メタ文字セット=utf-8>
 <meta name="referrer" content="never">
 <title>nginx 設定 https</title>
</head>
<本文>
 <div>
  <h2>このページにアクセスするには https をご利用ください</h2>
 </div>
</本文>
</html>

app.js コードは次のとおりです。

const Koa = require('koa');
定数 fs = require('fs');
定数パス = require('path');
const ルーター = require('koa-router')();
koaBody を require('koa-body');
const static = require('koa-static');

const app = new Koa();

router.get('/', (ctx, next) => {
 // ヘッダー タイプを設定します。設定されていない場合は、ページが直接ダウンロードされます ctx.type = 'html';
 // ファイルを読み取る const pathUrl = path.join(__dirname, '/static/index.html');
 ctx.body = fs.createReadStream(pathUrl);
 次();
});

app.use(static(path.join(__dirname)));

ルーターのルートを使用します。
app.use(router.allowedMethods());

app.listen(3001, () => {
 console.log('サーバーは3001でリッスンしています');
});

package.json コードは次のとおりです。

{
 "名前": "アップロードアンドロード",
 "バージョン": "1.0.0",
 "説明": ""、
 "メイン": "app.js",
 「スクリプト」: {
  "dev": "nodemon ./app.js"
 },
 "著者": ""、
 「ライセンス」: 「ISC」、
 「依存関係」: {
  "fs": "0.0.1-セキュリティ",
  "コア": "^2.7.0",
  "koa-body": "^4.1.0",
  "koa-ルーター": "^7.4.0",
  "koa-send": "^5.0.0",
  "koa-static": "^5.0.0",
  "ノードモン": "^1.19.0",
  "パス": "^0.12.7"
 }
}

次に、プロジェクトのルート ディレクトリで npm run dev を実行すると、ブラウザーで http://localhost:3001 にアクセスできるようになりました。ただし、ドメイン名を使用してアクセスする場合は、hosts ファイルに xxx.abc.com などのドメイン名をバインドできます。hosts ファイルは次のようにバインドされます。

127.0.0.1 xxx.abc.com

したがって、現時点では、以下に示すように、http://xxx.abc.com:3001/ を使用してページにアクセスできます。

上記のように、ページにアクセスすることができますが、Chrome ブラウザに表示される http リクエストは安全ではないことがわかりました。そのため、今回は https を使用してアクセスしたいと思います。Web ページのセキュリティは保証されていますが、この時点で何もせずに https を直接使用してアクセスすると、アドレス: https://xxx.abc.com:3001 のように機能しません。下の図に示すように:

https を使用してアクセスする場合、通常はセキュリティ証明書が必要であることがわかっています。したがって、現在のタスクは、nginx を使用してセキュリティ証明書などを設定し、https を使用して Web ページにアクセスして目的を達成することです。

nginx の https サービスの設定

1. まず nginx ディレクトリに入り、次のコマンドを使用します: cd /usr/local/etc/nginx.次に、このディレクトリに cert フォルダーを作成し、証明書ファイルを保存してください。
以下に示すように、mkdir cert コマンドを使用します。

2. 次に、server.crt ファイルや server.key ファイルなどの証明書関連ファイルを cert ディレクトリにコピーする必要があります。たとえば、次の証明書ファイル:

上記の証明書の保存方法については、以前の記事「OpenSSLを使用して無料の証明書を保存する」を参照してください。

移動コマンド: mv server.key /usr/local/etc/nginx/cert。たとえば、server.key ファイルと server.crt ファイルの両方を /usr/local/etc/nginx/cert ディレクトリに移動します。次の図に示すように:

次に、/usr/local/etc/nginx/cert ディレクトリを確認し、次のファイルを見つけます。

3. nginxの設定

nginx 設定に次のコードを追加する必要があります。

サーバー{
 443 ssl を聴く;
 サーバー名 xxx.abc.com;
 ssl on; //この構成項目では、ssl_certificate cert/server.crt を削除する必要があります。
 ssl_certificate_key cert/server.key;
 /*
  SSL/TLS セッション キャッシュのタイプとサイズを設定します。このパラメータが設定されている場合、通常は共有され、ビルドインはメモリの断片化をパラメータ化する可能性があります。デフォルトは none で、これは off に似ており、キャッシュを無効にします。たとえば、shared:SSL:10m は、すべての nginx ワーカー プロセスが SSL セッション キャッシュを共有することを意味します。公式 Web サイトによると、1M で約 4,000 セッションを保存できるとのことです。
 */
 ssl_session_cache 共有:SSL:1m;
 // クライアントは、セッション キャッシュ内の SSL パラメータの有効期限を再利用できます。イントラネット システムのデフォルトの有効期限は 5 分ですが、これは短すぎます。30 分または 4 時間に設定できます。
 ssl_session_timeout 5分;

 /*
  暗号スイートを選択します。ブラウザによってサポートされるスイートが異なる場合があります (順序も異なります)。
  ここで指定する形式は、OpenSSL ライブラリが認識できる形式です。openssl -v cipher 'RC4:HIGH:!aNULL:!MD5' (指定したスイート暗号化アルゴリズムが続く) を使用すると、サポートされているアルゴリズムを表示できます。
 */
 ssl_ciphers HIGH:!aNULL:!MD5;

 // ネゴシエートされた暗号化アルゴリズムを設定するときは、クライアント ブラウザーの暗号化スイートではなく、サーバーの暗号化スイートを優先します。
 ssl_prefer_server_ciphers をオン;

 位置 / {
  proxy_pass http://localhost:3001;
 }
}

注: 前述のように、ssl on; 構成項目を削除する必要があります。上記のように設定した場合、nginx コマンドを再起動すると、以下に示すようにエラーが報告されます。

SSL: エラー:06065064:デジタル エンベロープ ルーチン:EVP_DecryptFinal_ex:不正な復号化エラー:0906A065:PEM ルーチン:PEM_do_header:不正な復号化このエラーに類似している場合は、Baidu でこのエラーを検索し、次の方法で解決してください。

ディレクトリに移動します: cd /usr/local/etc/nginx/cert 次の 2 行のコードを実行します。

cp server.key server.key.org
openssl rsa -in server.key.org -out server.key

以下のように表示されます。

Baidu検索で出てくるページを見ることができます

その後、nginx を再起動し続けたところ、まだエラーが報告されていることがわかりました。エラー情報は次のとおりです。

nginx: [警告] 「ssl」ディレクティブは非推奨です。代わりに「listen ... ssl」ディレクティブを使用してください

次に、nginxのバージョンに関連する可能性のあるssl on;設定項目を削除します。

最近、nginx 1.15 にアップグレードしました。再読み込み後、ssl を使用するすべてのサイトでこの警告が報告されました。多くの情報をチェックし、最終的に github で関連する英語の説明を見つけました: (https://github.com/voxpupuli/puppet-nginx/issues/1224)。私の英語は上手ではありませんが、一般的な意味は、nginx 1.15 以降のバージョンでは、ssl on; と書く必要がなくなったということです。

nginx.conf にアクセスし、ssl on を削除してからリロードしました。案の定、アラームは出ませんでした。これで問題なく使用できます。

間違って理解しました。443 ssl を listen するように ssl をオンに変更する必要があります。

ここで nginx を再起動し続けると、以下のように正常になります。

ただし、上記の設定後、ドメイン名 https://xxx.abc.com/ を直接使用してアクセスすることはできません。また、以前に生成した client.crt 証明書をブラウザにインストールする必要があります。Mac システムの手順は次のとおりです。

1. 以下に示すようにランチャーをクリックします。以下のように表示されます。

2. キーチェーンアクセスを検索してクリックします(下図参照)。

3. 証明書ページに移動し、以前の client.crt 証明書を証明書にドラッグします。たとえば、前に生成した client.crt 証明書は次のとおりです。

4. 自分の証明書を右クリックし、「プロファイルを表示」をクリックして証明書の詳細ページに入ります。次の図に示すように:

5. ページに入った後、証明書を使用する場合は、以下に示すように「常に信頼」を選択します。

6. その後、終了します。コンピュータの電源投入時のパスワードを入力する必要がある場合があります。入力すると、自動的に保存されます。次に、ブラウザで https://xxx.abc.com/ ページにアクセスしてアクセスします。以下のように表示されます。

次に、「続行」をクリックしてアクセスすると、以下に示すようにページが表示されます。

上記のように、nginx + 証明書はローカル ノードの https サービスを実装するために使用されます。

ただし、上記のように https にアクセスできるにもかかわらず、次の図に示すように、https の前に「unsafe」というテキストが引き続き表示されます。

考えられる理由は、証明書がサードパーティの証明書ではなく、自己生成された証明書であることです。現時点では具体的な理由はわかりませんが、少なくとも https を使用してプロジェクトにアクセスできるようになりました。

github でシンプルなノード サービスを開始するためのソース コード

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Nginx で SSL 証明書を設定する方法
  • Nginx サーバーの SSL セキュリティ構成の詳細な説明
  • SSL モジュール構成を使用して HTTPS アクセスをサポートする nginx の詳細な説明
  • Nginx サーバーで SSL を有効にする方法
  • NginxはSSL証明書をポート443でリッスンするように設定します
  • nginx で SSL 双方向検証を設定する方法
  • HTTPS アクセスを実現するための Nginx 構成 SSL 証明書の詳細な説明
  • Nginx サーバーの SSL 証明書の構成と SSL 用のリバース プロキシの構成
  • 単一の Nginx IP アドレスに複数の SSL 証明書を設定する例
  • Nginx ローカル構成 SSL アクセス例チュートリアル

<<:  Node.js でメモリ効率の高いアプリケーションを作成する方法

>>:  MySQL統計の概要

推薦する

jQueryで大画面スクロール再生効果を実現

この記事では、大画面スクロール効果を実現するためのjQueryの具体的なコードを参考までに紹介します...

Vueソースコード解析における仮想DOMの詳しい説明

なぜ仮想DOMが必要なのでしょうか?仮想 DOM はブラウザのパフォーマンス問題を解決するために設計...

CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

2017 最新バージョンの Windows インストール MySQL チュートリアル

1. まず、MySQL の公式サイトから最新バージョンの MySQL をダウンロードします。リンクを...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

CSS3 は、跳ねるボール効果を実現する Web アニメーションを作成します。

基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...

MYSQL における char と varchar の違い

CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...

Linux でログインタイムアウト後に非アクティブなユーザーを自動的にログアウトする

方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...

Vue は Echarts をインポートして折れ線グラフを実現します

この記事では、VueでEchartsをインポートして線散布図を実現する具体的なコードを参考までに共有...

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

MySQL テーブル作成外部キー エラーの解決方法

データベーステーブルA: テーブル task_desc_tab を作成します ( id INT(11...

プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...

MySQLインデックスに関する詳細を共有する

数日前、同僚からMySQLのインデックスについて質問を受けました。大体わかっているのですが、まだ練習...