見出し画像

Nginxを使用した基本認証によるWebアプリケーションの保護

本記事では、EC2インスタンスでホストされているWebアプリケーションへのアクセスを保護するため、Nginxを使用した基本認証の設定方法について解説します。
本記事の前提条件:

  • AWSアカウント(無料利用枠対象)

  • EC2とAWSコンソールに関する基礎知識

  • Webサーバー(Nginx-nginx/1.24.0)に関する知識

まず、AWSアカウントにログインし、EC2コンソールに移動します。以下のような画面が表示されます。

アカウントに実行中のインスタンスがないことが確認できます。基本認証の設定を行うため、オレンジ色のインスタンスを起動ボタンをクリックして、新しいインスタンスを作成します。

インスタンス名をnginx-basic-authと設定した後、キーペアセクションまでスクロールし、新しいキーペアの作成をクリックしてインスタンスにSSH接続するためのキーを作成します。

キーペアが作成されると、自動的にローカルコンピュータにダウンロードされます。次に、ネットワーク設定セクションまでスクロールし、インターネットからのHTTPトラフィックを許可するにチェックを入れます。

下にスクロールし、インスタンス起動コンソールページの下部にある詳細設定セクションを展開し、ユーザーデータセクションまでスクロールします。

以下のコードブロックをユーザーデータテキストボックスにコピー&ペーストします。

#!/bin/bash
sudo yum  update
sudo yum  upgrade -y  
sudo yum install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx
sudo yum install httpd-tools -y

上記のスクリプトでは、システムソフトウェアを更新し、Nginxをインストールして有効化し、httpd-toolsもインストールしています。

バッシュスクリプトをコピーした後、右側の「インスタンスを起動」ボタンをクリックして、nginx-basic-authという名前の新しいEC2インスタンスを起動します。


インスタンスが作成されたので、設定のセットアップを進めることができます。インスタンスが起動し、http://54.250.167.216でアクセス可能になりました。

サーバーは54.250.167.216でアクセス可能ですが、お使いのサーバーは異なるアドレスになる場合があります。インスタンスにアクセスする際は、パブリックIPv4アドレスを確認してください。

次に、NginxウェブサーバーでBasic認証を設定するため、インスタンスにSSH接続します。接続をクリックしてEC2インスタンスにSSH接続し、設定を更新します。

マシンに正常にSSH接続できたら、最初のユーザーの認証情報を作成します。test-basic-authという名前のユーザーの認証情報を作成するために、以下のコマンドを使用します:

sudo htpasswd -c /etc/nginx/.htpasswd test-basic-auth

コマンドを入力すると、ユーザーのパスワードの入力を求められます。このチュートリアルでは、test-basic-authユーザーのパスワードとして123456を使用しています。
これで必要なファイルが揃い、Nginxでベーシック認証を設定する準備が整いました。ベーシック認証を設定するには、/etc/nginxディレクトリにあるnginx.conf設定ファイルを修正します。nginx.confファイルのserverブロック内に以下の設定を追加する必要があります。

auth_basic           "Medium Area, We are learning";
auth_basic_user_file /etc/nginx/.htpasswd;

上記の行をクリップボードにコピーし、nanoエディタを使用して設定ファイルを更新します。

sudo nano /etc/nginx/nginx.conf

設定ファイルのserverブロックを見つけ、auth_basicとauth_basic_user_fileの行を追加します。追加後の設定ファイルは以下のようになります。

# For more information on configuration, see:
#   * Official English Documentation: <http://nginx.org/en/docs/>
#   * Official Russian Documentation: <http://nginx.org/ru/docs/>

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See <http://nginx.org/en/docs/ngx_core_module.html#include>
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
[ec2-user@ip-172-31-44-0 ~]$ sudo nano /etc/nginx/nginx.conf
[ec2-user@ip-172-31-44-0 ~]$ cat /etc/nginx/nginx.conf
# For more information on configuration, see:
#   * Official English Documentation: <http://nginx.org/en/docs/>
#   * Official Russian Documentation: <http://nginx.org/ru/docs/>

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See <http://nginx.org/en/docs/ngx_core_module.html#include>
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        #Added during medium demo.
        auth_basic           "Medium Area, We are learning";
        auth_basic_user_file /etc/nginx/.htpasswd;
        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#        location = /404.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#        }
#    }

}

最後に、設定ファイルの更新が完了したので、変更を反映するためにNginxウェブサーバーを再起動する必要があります。

sudo systemctl restart nginx.service

これでセットアップが完了しました。http://54.250.167.216でサービスにアクセスすると、サイトにアクセスするための認証情報を入力するサインインポップアップが表示されます。

正しい認証情報を入力すると、Nginxのデフォルトホームページが表示されます。

ご清覧ありがとうございました!


この記事は、2023 年 9 月に当社のエンジニア Manip Poudel によって執筆され、日本語に翻訳されました。
英語版はこちらをクリックしてください。
https://articles.wesionary.team/securing-web-application-using-basic-authentication-configured-via-nginx-4de021a1c788


採用情報

私たちはプロダクト共創の仕組み化に取り組んでいます。プロダクト共創をリードするプロダクト・マネージャー、そして、私たちのビジョンを市場に届ける営業メンバーを募集しています!


開発パートナーをお探しの企業様へ

弊社は、グローバル開発のメリットを活かし、高い費用対効果と品質を両立しています。経験豊富で多様性のあるチームが、課題を正しく理解し、最適なシステムと優れた体験を実現します。業務システムの開発、新規事業の開発、業務効率化やDX化に関するお困りごと、ぜひ弊社にご相談ください。