6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【初心者LAB】HTTPS通信をリバースプロキシーで構築

6
Last updated at Posted at 2026-03-27

【はじめに】
今回はAWS環境上で「リバースプロキシー」を使ってHTTPS通信を実現してみました:ok_hand:
構成はすごくシンプルで手間もそこまでかからず、初心者の私でもすごく取り組みやすいものでした!

【構成】
クライアント ⇨ リバースプロキシーサーバ(Nginx) ⇨ Webサーバ(Apache)

・クライアントはHTTPS通信でリバースプロキシーへアクセス
・リバースプロキシーはサーバにHTTP通信でアクセス
・リバースプロキシーが受け取った情報を代理でクライアントに提供

【使用環境&サービス】
・AWS(Ubuntu)
・Route 53
・Nginx
・Apache2
・VSCode

【設計手順】

  1. AWSインスタンス作成(2台)
    リバースプロキシーサーバ用
    Webサーバ用
  2. ドメイン取得(Route 53)
    ※若干課金あります(¥500)
  3. リバースプロキシー用にNginxインストール
    Nginx設定
  4. 秘密鍵作成&証明書申請準備
  5. Let's Encryptインストール
    公開証明書の設定
  6. Webサーバ用にApacheインストール

大体の設計図はこんな感じです!
今回、AWSでインスタンス作成後はVSCodeでSSH接続して操作してきます!

----------------------------設計開始----------------------------

設計1:AWSインスタンス作成(2台)

まずは、リバースプロキシーサーバからやっていきましょう

AWSへログインして、検索バーでEC2と検索し、EC2からサイドバーでInstanceをクリック
右上のLaunch Instancesをクリック
インスタンスの名前を任意に設定

Screenshot 2026-03-19 at 5.54.15.png

インスタンス名は任意の名前
環境OSはubuntuを選択
インスタンスタイプは無料のt2.micro

Screenshot 2026-03-19 at 6.08.03.png

SSH接続できるようにキーペアを作成
 中央上の"Create new key pairで鍵を作成
 ※Key pair type = RSA, Private key file format = .pemと選択

ファイアーウォールの設定は全てにチェック
 ※SSHはMy IPだけを許可
下のファイアーウウォール設定で、画面のように設定
 全てにチェックをし、SSHだけはMy IPと設定

ここまで来たら、右下のLanch Instanceを押せばOKです
image.png

次に、Webサーバ用のインスタンスを作成しましょう!

セキュリティグループの設定までは名前以外全て同じように設定してください
SSH鍵も先ほど作成したものを選択すればOKです

私はプロキシーサーバ限定みたいな鍵の名前になってますが、名前は任意なのでなんでもOKです
ちなみに名前の付け方失敗したなと思いました:joy:

リバースプロキシーサーバとの差分
ファイアーウォールの設定はSSHとHTTP通信をチェック
SSHはMy IPだけを許可する
HTTP通信は、リバースプロキシーサーバのみを指定する
Network settingsの右側にある"Edit"を押せば細かな設定が組めるので、そこを押してスクロールしていくと、図のような欄が出てくるのでそこで設定

image.png

設計2:ドメイン取得(Route 53)

Route 53を検索し、開始ボタンを押したら任意の名前でドメインを作成
AWSが使用可能なドメインかを自動判別してくれるので、OKなら購入

今回は、学習用なので一番安かった.clickドメインを使用しています
image.png

次に、Aレコード設定をするため、Route 53から"Hosted zones"を取得したドメインのところで、レコードを作成します

先ほど作成したリバースプロキシーサーバのパブリックIPをコピー&ペーストで入力
Record nameとはいじらずそのまでOK

image.png
これで名前解決できるようになりました!
但し、まだリバースプロキシーに何も設定していないのでブラウザで検索しても特に意味はありません

設計3:リバースプロキシーサーバ設定

リバースプロキシーサーバにSSHアクセスする
それでは実際にssh接続していきます!

EC2インスタンスから作成したインスタンス画面でプロキシーサーバを選択
ConnectというボタンをクリックしてSSHのセクションに行く
下部に接続コマンドがあるのでコピー

image.png

次にVSCodeからターミナルを開いて、コマンドを実施します

ssh -i "....." となっているところを、ファイルパスで指定

ファイルパスは "~/.ssh/任意の名前"
私の場合、ssh -i "~/.ssh/For_Proxy_Server.pem"

接続ができたら、実際にNginxをインストールしていきます

・Nginxインストール

sudo apt install nginx
systemctl status nginx 
sudo vim /etc/nginx/conf.d/leonwest.conf(最後のファイル名は.confであればなんでもOK)

記入内容⇩
Screenshot 2026-03-20 at 14.03.02.png

※このファイルはこの後も編集してきます!

とりあえずこれだけで、リバースプロキシーサーバには名前解決でブラウザからアクセスできるようになりました!
Nginxもデフォルトページがあるので、実際には下のようなWelcomeページが出てきます
image.png

ここからは、https通信に必要な証明書の設定を行なっていきましょう!

・Let's Encryptインストール

今回は公開証明書を使用していきたいと思うので、無料のLet's Encryptを使用してみます
私も扱うのは初めてでしたので、つまづいたポイントいくつかありました:joy:

sudo apt install certbot -y
sudo certbot certonly --manual -d leonwest.click

Emailアドレス等聞かれたのちに、下の画面になったら一旦ストップです!
実際の画像はこんな感じですが、誤って手順を飛ばしてEnterを押すと、エラーが出てきますが、特に非常事態ではないので安心してください
私も何度もエラー出しました!ここが一つつまづいたポイントですね:joy:
image.png
上記の画像を拡大すると、Hintの欄にファイルを作成してから再度行なってください的なことが書いてあります
なので、ここまできたら一度別のターミナルを立ち上げてリバースプロキシーサーバの設定を行なっていきます

Hint: The Certificate Authority failed to verify the manually created challenge files. Ensure that you created these in the correct location.

リバースプロキシーサーバに移動し以下を実行
/etc/nginx/conf.d/leonwest.confの中を編集

server {
    listen 80;
    server_name leonwest.click;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
}

leonwest.confに書いたroot以下のファイルパスを作成

sudo mkdir -p /var/www/certbot/.well-known/acme-challenge/

作成後、ファイルの中にさっきLet's Encryptから指定された文字列を参考に新規ファイルを作成し、そのファイルに指定された文字列を保存します
この部分!

Create a file containing just this data:
AJzrW339N7I_UPhxE7mSrUtØqKK3610UE0tnpUJJbKY.H4ld-LjG3rn3mLkZTNH3JJKxZVaL9GFd1J_rnzhcbRU
And make it available on your web server at this URL:
http://leonwest.click/.well-known/acme-challenge/AJzrW339N7I_UPhxE7mSrUt0qKK36I0UE0tnpUJJbKY

/var/www/certbot/.well-known/acme-challenge/へ移動後

sudo vim AJzrW339N7I_UPhxE7mSrUt0qKK36I0UE0tnpUJJbKY

AJzrW339N7I_UPhxE7mSrUt0qKK36I0UE0tnpUJJbKYファイルの中で

AJzrW339N7I_UPhxE7mSrUtØqKK3610UE0tnpUJJbKY.H4ld-LjG3rn3mLkZTNH3JJKxZVaL9GFd1J_rnzhcbRUを保存

ここまできたら、編集したコンフィグファイルが正常に起動するか構文チェック
問題なければリロードし更新する

sudo nginx -t
sudo systemctl reload nginx

私はここのreloadをし忘れたりして内容が更新されず、行き詰まりました:sweat_smile:
また間違える度にLet's Encryptから送られる文字列が変化しますのでお気をつけて:sweat_smile:

この状態で先ほどのコマンドラインに戻り、Enterを押すと、
ようやく、秘密鍵とSSL証明書が取得できます!

image.png

このファイルパスは重要なのでメモしておきます

それでは再度、/etc/nginx/conf.d/leonwest.confを編集していきましょう

server {
    listen 80;
    server_name leonwest.click;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
}

⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩新たに加える箇所⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩

server { 
    listen 443 ssl;
    server_name leonwest.click;

    ssl_certificate /etc/letsencrypt/live/leonwest.click/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/leonwest.click/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    location / {
        proxy_pass http://172.31.18.155:80;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
    }
}

ここではリバースプロキシーサーバが受け取ったリクエストをWebサーバに渡すような仕組みを作成してます

・HTTPS通信でleonwest.clickを受け付ける
・TLS通信のバージョンを指定
・証明書や秘密鍵の場所指定⇦HTTPS通信に必要

listen 443 ssl;
server_name leonwest.click;

ssl_certificate /etc/letsencrypt/live/leonwest.click/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/leonwest.click/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;

・proxy_passで転送(URL内のIPはWebサーバのプライベートアドレス)
・HTTP通信のバージョン指定
・転送する際のドメインの維持

location / {
    proxy_pass http://172.31.18.155:80;
    proxy_http_version 1.1;
    proxy_set_header Host $host;

ようやく終盤です!

最後にNginxの構文チェックを行って問題なければリロードしましょう!

sudo nginx -t
sudo systemctl reload nginx

これでリバースプロキシーサーバの構築は終了です:v:

設計4:Webサーバ設定
・Apache2 インストール

最後にApache2をインストールして終了しましょう!
リバースプロキシーサーバ同様にSSH接続をして、下記コマンドを実行しましょう
インストールするだけで起動するはずですが、念のためstatusチェックも!

sudo apt install apache2
sudo systemctl status apache2

Ubuntu環境なので、apache2をインストールします。apacheはデフォルトページがNginxと同じように作成されているため、インストールするだけでWebページが表示できるようになります。何か自分でWebサイトを作る必要なく、ブラウザテストができるのでとても楽!

自身のPCブラウザから取得したドメインで検索をかけて、apache2のデフォルト画面が表示されれば完了です⇩⇩⇩⇩⇩⇩
ちなみに、http通信で検索すると、プロキシーサーバのNginx画面が出てきます:grin:
Screenshot 2026-03-20 at 13.08.21.png

※注意点
もし繋がらない場合などは、Webサーバのインスタンスのセキュリティグループを確認してください
そこで、ssh(port:22)の他にhttp(port:80)が開いていて、リバースプロキシーサーバのプライベートIPが設定されていなければ、通信が確立できないので失敗になります!

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?