HTML × HTTPS 本番構築入門｜Nginx + Let’s Encryptで安全にWeb公開

はじめに

HTMLでWebページを作成し、Dockerで配信できるようになったら、
次に必ず必要になるのが HTTPS対応 です。

現在のWebでは、HTTPSは「推奨」ではなく必須です。

ブラウザ警告の回避
通信の暗号化
SEO評価の向上
本番環境としての信頼性

本記事では、HTMLをHTTPSで本番公開する方法を、初心者にも分かるように解説します。

HTTPSとは何か？

HTTPS（HTTP Secure）とは、

HTTP通信を
SSL / TLS によって
暗号化する仕組み

です。

HTTPSを使うメリット

通信内容の盗聴防止
なりすまし防止
Google検索での評価向上
ブラウザの「保護されていない通信」警告を回避

今回の構成（本番想定）

本記事では、以下の構成でHTTPSを実現します。

ブラウザ
  ↓ HTTPS
Nginx（リバースプロキシ）
  ↓ HTTP
HTMLコンテンツ

Webサーバー：Nginx
SSL証明書：Let’s Encrypt（無料）
実行環境：Docker / Docker Compose

使用する技術

HTML（静的サイト）
Docker
Docker Compose
Nginx
Let’s Encrypt（Certbot）

【ハンズオン】HTML × HTTPS 本番構築

前提条件

Docker / Docker Compose がインストール済み
独自ドメインを取得済み
ドメインがサーバーのIPを向いている

ステップ1：ディレクトリ構成

html-https-prod/
├─ html/
│  └─ index.html
├─ nginx/
│  └─ default.conf
├─ certbot/
├─ docker-compose.yml

ステップ2：HTMLファイルを作成

html/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML × HTTPS 本番構築</title>
</head>
<body>
  <h1>HTML × HTTPS 本番構築</h1>
  <p>HTTPS対応された本番環境です。</p>
</body>
</html>

ステップ3：Nginx設定ファイル

nginx/default.conf

server {
  listen 80;
  server_name example.com;

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

  location / {
    return 301 https://$host$request_uri;
  }
}

server {
  listen 443 ssl;
  server_name example.com;

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

  location / {
    root /usr/share/nginx/html;
    index index.html;
  }
}

※ example.com は自身のドメインに置き換えてください。

ステップ4：docker-compose.yml

version: "3"

services:
  nginx:
    image: nginx:alpine
    volumes:
      - ./html:/usr/share/nginx/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./certbot/www:/var/www/certbot
      - ./certbot/conf:/etc/letsencrypt
    ports:
      - "80:80"
      - "443:443"
    depends_on:
      - certbot

  certbot:
    image: certbot/certbot
    volumes:
      - ./certbot/www:/var/www/certbot
      - ./certbot/conf:/etc/letsencrypt

ステップ5：Nginxを起動（初回）

docker compose up -d nginx

ステップ6：SSL証明書を取得

docker compose run --rm certbot certonly \
  --webroot \
  --webroot-path=/var/www/certbot \
  -d example.com \
  --email your@email.com \
  --agree-tos \
  --no-eff-email

ステップ7：Nginxを再起動

docker compose restart nginx

ステップ8：HTTPSアクセス確認

ブラウザで以下にアクセスします。

https://example.com

🔒 マークが表示されれば成功です。

よくあるトラブルと対処法

HTTPSにアクセスできない

ドメインのDNS設定を確認
80 / 443 ポートが開いているか確認

証明書が見つからない

ドメイン名の打ち間違い
Certbot実行時の -d オプション確認

SSL証明書の自動更新

Let’s Encrypt証明書は 90日有効 です。
定期更新用コマンド例：

docker compose run --rm certbot renew

cronなどで定期実行すると安全です。

SEOを意識したHTTPS本番構築のポイント

1. HTTP → HTTPS リダイレクト

return 301 https://$host$request_uri;

検索評価を引き継げます。

2. 正しいtitle・見出し構造

<title>HTML × HTTPS 本番構築入門</title>
<h1>HTML × HTTPS 本番構築</h1>

3. Mixed Content を避ける

画像・CSS・JSもすべてHTTPSで配信

まとめ

本記事では、HTML × HTTPS 本番構築について解説しました。

HTTPSは本番環境では必須
Docker + Nginx + Let’s Encrypt で無料構築可能
SEO・セキュリティ・信頼性が向上

この構成を理解すると、

個人ブログ
ポートフォリオサイト
静的LP

を 実運用レベル で公開できるようになります。

投稿日

2024年4月5日

カテゴリー:

未分類

投稿者:

saigo

タグ:

HTML × HTTPS 本番構築入門｜Nginx + Let’s Encryptで安全にWeb公開

はじめに

HTTPSとは何か？

HTTPSを使うメリット

今回の構成（本番想定）

使用する技術

【ハンズオン】HTML × HTTPS 本番構築

前提条件

ステップ1：ディレクトリ構成

ステップ2：HTMLファイルを作成

ステップ3：Nginx設定ファイル

ステップ4：docker-compose.yml

ステップ5：Nginxを起動（初回）

ステップ6：SSL証明書を取得

ステップ7：Nginxを再起動

ステップ8：HTTPSアクセス確認

よくあるトラブルと対処法

HTTPSにアクセスできない

証明書が見つからない

SSL証明書の自動更新

SEOを意識したHTTPS本番構築のポイント

1. HTTP → HTTPS リダイレクト

2. 正しいtitle・見出し構造

3. Mixed Content を避ける

まとめ

コメント

コメントを残すコメントをキャンセル

HTML × HTTPS 本番構築入門｜Nginx + Let’s Encryptで安全にWeb公開

はじめに

HTTPSとは何か？

HTTPSを使うメリット

今回の構成（本番想定）

使用する技術

【ハンズオン】HTML × HTTPS 本番構築

前提条件

ステップ1：ディレクトリ構成

ステップ2：HTMLファイルを作成

ステップ3：Nginx設定ファイル

ステップ4：docker-compose.yml

ステップ5：Nginxを起動（初回）

ステップ6：SSL証明書を取得

ステップ7：Nginxを再起動

ステップ8：HTTPSアクセス確認

よくあるトラブルと対処法

HTTPSにアクセスできない

証明書が見つからない

SSL証明書の自動更新

SEOを意識したHTTPS本番構築のポイント

1. HTTP → HTTPS リダイレクト

2. 正しいtitle・見出し構造

3. Mixed Content を避ける

まとめ

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル