スポンサーリンク

FlaskアプリをHTTPSで公開する方法|無料SSL証明書とNginx設定で完全対応

Webアプリ開発
  1. はじめに
  2. 1. HTTPとHTTPSの違いとは?
    1. 🔍 HTTPは“丸見え”の通信
    2. 🔐 HTTPSは“暗号化された”安全な通信
    3. 🌐 なぜHTTPSが“今”重要なのか?
  3. 2. HTTPSの技術的な仕組みをやさしく解説
    1. 🔑 鍵を使って通信を守る
    2. 🧾 SSL証明書の登場!
    3. 🔁 安全な鍵の交換方法(ハンドシェイク)
  4. 3. FlaskアプリをHTTPSで公開する全体の流れ
    1. 🗂️ 必要なステップ一覧
      1. ✅ 1. 独自ドメインを取得する
      2. ✅ 2. サーバーを2台用意する(または1台で兼用)
      3. ✅ 3. ドメインとサーバーをつなぐ(DNS設定)
      4. ✅ 4. Nginxをインストールしてリバースプロキシ設定
      5. ✅ 5. SSL証明書を取得する(Let’s Encryptなど)
      6. ✅ 6. HTTPSの設定(Nginx側)
      7. ✅ 7. Flaskアプリを起動・連携
  5. 4. 実践ステップ|FlaskアプリをHTTPSで公開しよう
    1. 4-1. 独自ドメインを取得する
      1. 🔍 独自ドメインってなに?
      2. 🛒 ドメインを取得するには?
      3. 📝 取得時のポイント
      4. 💡 例:ドメイン取得までの流れ(お名前.com)
    2. 4-2. サーバーを2台構築する(Nginx用・Flask用)
      1. 💻 なぜ2台構成にするの?
      2. ☁️ クラウドサービスを選ぼう(一例)
      3. 🔐 SSHキー(キーペア)の作成
      4. 🖥️ サーバーの基本構成
      5. 🌐 IPアドレスの固定化(必要に応じて)
    3. 4-3. DNSのAレコードを設定する
      1. 🌍 DNSってなに?
      2. 📌 Aレコードとは?
      3. 🛠️ ムームードメインでの設定手順(例)
      4. ✅ うまく設定できたか確認するには?
    4. 4-4. Nginxでリバースプロキシを構築する
      1. 🔁 リバースプロキシとは?
      2. 🧰 Nginxのインストール(Ubuntuの場合)
      3. 🌐 Webブラウザでアクセス確認
      4. ⚙️ Nginxの設定ファイルを作成
      5. 🔗 設定ファイルを有効にする
      6. 🔥 ファイアウォールの設定(必要な場合)
    5. 4-5. SSL証明書を取得する(Let’s Encrypt + Certbot)
      1. 🔐 Let’s Encryptとは?
      2. ⚙️ Certbotのインストール(Ubuntuの場合)
      3. 🌐 ドメインのAレコードが有効になっているか確認
      4. 🚀 CertbotでSSL証明書を取得・設定(超簡単!)
      5. 📅 自動更新の確認(重要!)
      6. ✅ HTTPSでのアクセス確認
    6. 4-6. Flaskアプリの起動と設定
      1. 🐍 Python環境の準備
      2. 📝 Flaskアプリの準備
      3. 🚀 Gunicornでアプリを起動
      4. 🔁 ProxyFixミドルウェアの導入(重要)
      5. 🛡️ セキュリティ対策も少しだけ
      6. ✅ 動作確認
    7. 4-7. アプリの常駐化・自動起動設定
      1. ⚙️ systemdとは?
      2. 📝 Gunicorn用の systemd サービスファイルを作成
      3. 🚀 サービスを起動して確認
      4. 📋 ログを確認する方法
      5. ✅ 自動起動されるか確認(再起動テスト)
  6. 5. 動作確認とHTTPS接続の確認ポイント
    1. ✅ ブラウザでアクセスしてみよう
    2. 🔒 HTTPS接続が有効か確認する方法
    3. 🧪 リダイレクトも確認しておこう
    4. 🛠️ よくある不具合チェック
    5. 🌐 外部ツールでチェックするのも便利!
    6. 🎉 おめでとうございます!
  7. 6. まとめ
    1. 🔁 本記事で紹介した流れ
    2. 💡 HTTPS対応のメリット
  8. よくある質問(Q&A)
    1. 関連投稿:

はじめに

最近、FlaskでWebアプリを作って、「よし、インターネット上に公開しよう!」と思った方も多いのではないでしょうか。でも、そのままHTTP通信で公開してしまうと、ちょっと危険なんです。

たとえば、ログイン機能があるアプリだったり、ユーザーの名前やメールアドレスを扱う場合、通信の内容がインターネット上で丸見えになってしまう可能性があります。これでは、せっかく作ったアプリが「安全に使えない」と判断されてしまい、ユーザーに敬遠されてしまうかもしれません。

そこで重要になるのが HTTPS(エイチ・ティー・ティー・ピー・エス)。これは、通信内容を暗号化して、誰かに盗み見られるのを防ぐための仕組みです。Webブラウザのアドレスバーで「鍵マーク🔒」が表示される、あの安全な通信ですね。

この記事では、Flaskで作ったWebアプリを、実際に HTTPS対応で安全に公開する方法 を、初心者の方にもわかりやすく丁寧に解説していきます。

SSL証明書ってなに?
Nginxってどう使うの?
サーバーは1台でいいの?2台必要?

そんな疑問にもすべてお答えしながら、手を動かして進めていける内容になっています。

ぜひこの機会に、自分のFlaskアプリを“ちゃんと安全に”インターネットに公開してみましょう!




1. HTTPとHTTPSの違いとは?

まずは、「HTTP」と「HTTPS」の違いについて、わかりやすく整理しておきましょう。どちらもWebサイトを見るときに使われる通信の仕組みですが、安全性に大きな違いがあります。

🔍 HTTPは“丸見え”の通信

「HTTP(HyperText Transfer Protocol)」は、WebブラウザとWebサーバーの間で、データをやり取りするためのプロトコル(通信のルール)です。たとえば、ブログを読んだり、ショッピングサイトの商品を表示したりするときは、HTTPによってそのページのデータがやり取りされています。

でも、HTTPの通信は“平文(ひらぶん)”といって、データがそのままの状態で送られます。つまり、通信の途中で誰かに見られたり、盗まれたりしても気づけません。

たとえば、Wi-Fiのような不特定多数が使えるネットワークでは、通信内容が盗み見られるリスクがあるんです。

ログイン情報やクレジットカード番号をHTTPで送ってしまうと、情報漏洩の原因になりかねません。


🔐 HTTPSは“暗号化された”安全な通信

そこで登場するのが「HTTPS(HTTP Secure)」です。HTTPSは、HTTPに“SSL/TLS”という暗号化の技術を組み合わせた通信方法です。送るデータをしっかりと鍵で守ってから送ることで、第三者が途中で見ようとしても意味のわからない状態になります。

HTTPSのサイトでは、URLが「https://〜」で始まり、ブラウザのアドレスバーに鍵マーク🔒が表示されます。

これにより、パスワードや個人情報をやり取りするようなアプリでも、安全に使ってもらうことができるようになります。


🌐 なぜHTTPSが“今”重要なのか?

以前は、HTTPS対応は「銀行サイト」や「会員制サービス」だけの話という印象がありました。でも最近では、すべてのWebサイトがHTTPSを使うのが当たり前になってきています。理由はこんなところです:

  • GoogleがHTTPSをSEOの評価基準にしている
  • 主要ブラウザが、HTTPサイトに「安全ではありません」と表示する
  • 無料でSSL証明書が取得できるサービス(Let’s Encryptなど)が増えた

つまり、「個人で作ったFlaskアプリ」でもHTTPSに対応することは、ユーザーの安心感を高めるだけでなく、検索エンジン対策としてもとても重要なんです。




2. HTTPSの技術的な仕組みをやさしく解説

HTTPSが安全な通信を実現している理由は、「暗号化の仕組み」にあります。でも、「暗号化」と聞くと、ちょっと難しそうに感じますよね。ここでは、なるべく専門用語を使わずに、イメージしやすいように解説していきます。


🔑 鍵を使って通信を守る

HTTPSでは、サーバーとクライアント(=あなたのWebブラウザ)の間でやり取りされるデータを**「鍵」**を使って守ります。

  • サーバー:「この鍵を使って、データを暗号化してください」
  • クライアント:「OK、じゃあこの鍵でデータを暗号化して送るね!」

でも、ここで大きな問題がひとつあります。それは、

「そもそも、その鍵をどうやって安全に渡すの?」

です。インターネットは誰でも見ようと思えば見られる場所。ここで鍵をそのまま送ってしまったら、意味がありません。


🧾 SSL証明書の登場!

そこで使われるのが、**SSL証明書(エスエスエルしょうめいしょ)**という仕組みです。

SSL証明書は、次のような“本人確認書類”のような役割を持っています。

  • 「このサーバーは、確かに“example.com”というドメインを持っています」
  • 「この鍵は、そのドメインの正当な所有者が発行したものです」

この証明書は、**認証局(CA:Certification Authority)**と呼ばれる第三者機関が発行してくれます。つまり、サーバーとブラウザは、お互いを知らなくても「認証局が間に入って保証してくれる」から、安心して鍵のやり取りができるんですね。


🔁 安全な鍵の交換方法(ハンドシェイク)

HTTPSでは、次のような流れで安全に通信が始まります:

  1. ブラウザがサーバーにアクセスすると、サーバーはSSL証明書と「公開鍵」を渡します。
  2. ブラウザは、証明書をチェックし、安全な相手かどうかを確認します。
  3. 問題なければ、ブラウザは「共通鍵(=データ暗号化用の鍵)」を暗号化してサーバーに送ります。
  4. サーバーは、自分だけが持っている「秘密鍵」でそれを復号化して、共通鍵を入手します。

この時点で、サーバーとブラウザだけが知っている“共通鍵”が共有されます。以後の通信はこの共通鍵で暗号化され、外からは中身が見えません。

このようにして作られたHTTPS通信は、現時点では実用的に破るのが非常に難しいとされています。数千年かけても解けないような計算量の暗号技術が使われているからです。

ただし、暗号化だけで安心するのではなく、証明書の有効期限通信内容の設計も重要になります(これについては後のセクションで触れます)。




3. FlaskアプリをHTTPSで公開する全体の流れ

HTTPSの仕組みがわかったところで、次はいよいよ実践編です。Flaskアプリをインターネット上に公開し、HTTPSで安全にアクセスできるようにするためには、いくつかの準備が必要です。

ここでは、全体の流れをざっくりと見て、全体像をつかんでおきましょう。


🗂️ 必要なステップ一覧

FlaskアプリをHTTPS対応で公開するには、次のようなステップで進めていきます。


✅ 1. 独自ドメインを取得する

インターネット上で公開するには、まず住所にあたるドメイン名が必要です。たとえば myapp.com のようなオリジナルドメインを、ドメイン取得サービスで購入しましょう。


✅ 2. サーバーを2台用意する(または1台で兼用)

セキュリティや構成の見通しをよくするため、サーバーを以下のように分けて構築するのがオススメです。

  • リバースプロキシサーバー(Nginx用)
     HTTPSでの通信受付とSSL証明書の設定を担当します。
  • Flaskアプリサーバー
     Flaskアプリそのものを動かします。

1台のサーバーにまとめることもできますが、構成が複雑になりやすく、運用面で不利になることがあります。


✅ 3. ドメインとサーバーをつなぐ(DNS設定)

取得したドメイン名と、リバースプロキシサーバーのIPアドレスをつなぐために、DNSのAレコードを設定します。これで、ドメイン名でサーバーにアクセスできるようになります。


✅ 4. Nginxをインストールしてリバースプロキシ設定

リバースプロキシサーバーにNginxをインストールし、ブラウザからのリクエストをFlaskアプリに転送するように設定します。

「https://〜」でアクセスが来たときに、裏側でFlaskアプリがちゃんと反応するように橋渡しする役目です。


✅ 5. SSL証明書を取得する(Let’s Encryptなど)

無料で使える認証局「Let’s Encrypt」とツール「Certbot」を使えば、SSL証明書を簡単に取得できます。

  • 証明書署名要求(CSR)の作成
  • ドメイン所有者の認証
  • 証明書と秘密鍵の取得

という流れで、証明書が発行されます。


✅ 6. HTTPSの設定(Nginx側)

取得した証明書と秘密鍵を、Nginxの設定ファイルに記述します。これで、ポート443でのHTTPS通信を受け付けられるようになります。

このとき、HTTPからHTTPSへのリダイレクトも設定しておくと親切です。


✅ 7. Flaskアプリを起動・連携

最後に、Flaskアプリサーバー側でアプリを起動します。GunicornなどのWSGIサーバーを使って安定稼働させましょう。

また、リバースプロキシからのアクセスを正しく処理するために、ProxyFixミドルウェアをFlask側に追加しておきます。

FlaskアプリをHTTPSで公開するのは、「ドメイン(住所)」「リバースプロキシ(郵便局)」「Flaskアプリ(家の中)」というイメージで考えるとわかりやすいです。

それぞれの役割をしっかり整えることで、安全で信頼性の高いWebアプリが実現できます。




4. 実践ステップ|FlaskアプリをHTTPSで公開しよう

ここからは、実際にFlaskアプリをHTTPSで公開するための手順を、一つひとつ丁寧に解説していきます。これから紹介する内容を順番に進めていけば、自分のWebアプリを安全にインターネット上に公開できます!


4-1. 独自ドメインを取得する

まず最初に、あなたのWebアプリにアクセスするための「住所」を用意しましょう。それが、独自ドメインです。


🔍 独自ドメインってなに?

たとえば「https://example.com」のような文字列がドメインです。これを取得すれば、ブラウザのアドレスバーにそのURLを入力するだけで、あなたのアプリにアクセスできるようになります。


🛒 ドメインを取得するには?

いろいろなサービスがありますが、使いやすくて安価な「ムームードメイン」がおすすめです!

ムームードメイン

→ 管理画面がわかりやすく、サーバーとの連携もスムーズです。

    他にも以下のようなサービスがあります:


    📝 取得時のポイント

    • .com や .net、.jpなどの末尾(TLD)を選べます
       → 一般的には .com が無難で、信頼感もあります。
    • 料金は年間1,000円〜2,000円前後が目安
       → キャンペーン価格だと初年度100円以下の場合もあります。
    • 取得時にはWhois情報(登録者情報)を記載します
       → 多くのサービスでは「代理公開設定」にチェックを入れればOKです。
    • 自動更新を有効にしておくのがオススメ!
       → ドメインの期限切れを防げます。

    💡 例:ドメイン取得までの流れ(お名前.com)

    1. サイトにアクセスして、希望のドメインを検索
    2. 空いていればカートに追加
    3. アカウントを作成し、購入手続きを進める
    4. クレジットカードなどで支払い
    5. 数分後には使用可能に!

    無事にドメインが取得できたら、次はそのドメインとサーバーをつなげる「DNS設定」に進みます。




    4-2. サーバーを2台構築する(Nginx用・Flask用)

    次は、Flaskアプリを動かすためのサーバーと、HTTPS通信を処理するリバースプロキシサーバーを用意します。ここでは、2台の仮想サーバーをクラウド上に構築する方法を紹介します。


    💻 なぜ2台構成にするの?

    もちろん、1台のサーバーでNginxとFlaskアプリの両方を動かすこともできます。ただし、次のような理由から「2台に分ける構成」がオススメです:

    • FlaskとNginxを分離することで、役割が明確になる
    • Nginx側にSSL証明書の管理やセキュリティ設定を集中できる
    • トラフィックや処理量が増えたときにスケーリングしやすい

    ☁️ クラウドサービスを選ぼう(一例)

    サーバーはクラウド上で簡単に用意できます。以下のようなサービスがよく使われています:

    サービス名特徴
    ConoHa VPS日本語対応が丁寧で初心者向け
    さくらのVPS国内利用者が多く安定
    Lightsail(AWS)料金が明確、WordPressにも強い
    GCP / Azure無料枠あり。学習目的にも便利

    パスワードログインより安全なので、必ずキーペア方式で接続しましょう。


    🔐 SSHキー(キーペア)の作成

    サーバーにログインするには、**SSHキー(公開鍵・秘密鍵)**を使うのが一般的です。

    • ローカルPCでSSHキーを作成(例:ssh-keygen コマンド)
    • 公開鍵をクラウド側に登録
    • 秘密鍵を使ってサーバーにログイン

    パスワードログインより安全なので、必ずキーペア方式で接続しましょう。


    🖥️ サーバーの基本構成

    用途内容
    リバースプロキシサーバーHTTPS接続の受付、Nginxによるリダイレクト、SSL証明書の管理
    FlaskアプリサーバーPython環境とFlaskアプリを動作させる、Gunicornなどを起動する
    • リバースプロキシ側は、外部からのHTTP/HTTPSアクセスを許可します。
    • Flaskサーバー側は、リバースプロキシサーバーからのアクセスだけ許可する設定にしましょう(例:ファイアウォール設定、セキュリティグループの制限)。

    🌐 IPアドレスの固定化(必要に応じて)

    サーバーを再起動すると、IPアドレスが変わる場合があります。
    この場合は、以下の方法でIPを固定するのが安心です:

    • 固定IPプランに変更(クラウドサービス側の設定)
    • DDNS(動的DNS)を利用する

    これで、アプリとHTTPS通信を受ける2つのサーバーが用意できました!
    次は、取得したドメイン名とサーバーをつなぐための「DNS設定(Aレコード登録)」に進みましょう。




    4-3. DNSのAレコードを設定する

    ドメインを取得して、サーバーも準備できたら、次は「ドメイン名」と「リバースプロキシサーバーのIPアドレス」を結びつける必要があります。そのために使うのが、DNSのAレコード設定です。


    🌍 DNSってなに?

    DNS(Domain Name System)は、インターネットの“住所録”のようなものです。


    📌 Aレコードとは?

    DNSにはいろいろなレコードがありますが、ここで設定するのは 「Aレコード」

    Aレコードとは:「このドメイン名は、このIPアドレスのサーバーにつながっていますよ」という指定のこと。


    🛠️ ムームードメインでの設定手順(例)

    ムームードメインを使っている場合は、以下のように設定します:

    1. ムームードメインにログイン
    2. メニューから「ドメイン操作」>「ムームーDNS」を選択
    3. 対象のドメイン名をクリック
    4. 「カスタム設定」を選び、次のように入力:
    項目内容(例)
    サブドメイン空欄(または www など)
    種別A
    内容リバースプロキシサーバーのパブリックIPアドレス
    優先度空欄でOK
    1. 「セットアップ情報変更」ボタンで保存
    2. 数分〜最大24時間で反映(早ければ5分ほどで使えます)

    ✅ うまく設定できたか確認するには?

    ターミナルで次のコマンドを実行して、IPが返ってくればOKです:

    nslookup yourapp.com

    またはブラウザで「http://yourapp.com」にアクセスして、**Nginxのデフォルトページなどが表示されるか**をチェックしてみましょう。

    これで、ドメイン名であなたのサーバーにアクセスできるようになりました!
    次は、いよいよリバースプロキシサーバーに Nginxをインストールして設定していきます。




    4-4. Nginxでリバースプロキシを構築する

    ここからはいよいよ、**HTTPS通信の玄関口となるNginx(エンジンエックス)**の設定に入っていきます。Nginxは軽量かつ高速なWebサーバーとして有名で、リバースプロキシとしてもとても優秀です。


    🔁 リバースプロキシとは?

    「リバースプロキシ」という言葉にピンとこない方のために、ざっくり説明します。

    簡単に言えば「インターネットの外と中をつなぐ仲介役」がリバースプロキシです!


    🧰 Nginxのインストール(Ubuntuの場合)

    以下の手順で、リバースプロキシ用サーバーにNginxをインストールします:

    sudo apt update
    sudo apt install nginx -y

    インストール後、サービスを起動しておきましょう:

    sudo systemctl start nginx
    sudo systemctl enable nginx

    🌐 Webブラウザでアクセス確認

    サーバーのパブリックIPアドレスをブラウザで開いてみてください。

    http://<サーバーのIPアドレス>

    デフォルトのNginxのウェルカムページ(「Welcome to nginx!」)が表示されればOKです。


    ⚙️ Nginxの設定ファイルを作成

    Nginxの仮想ホスト設定を /etc/nginx/sites-available/yourapp に作成します。以下は最初のHTTP設定(HTTPSは次のステップで追加):

    server {
    listen 80;
    server_name yourapp.com www.yourapp.com;

    location / {
    proxy_pass http://FLASK_SERVER_PRIVATE_IP:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    }

    FLASK_SERVER_PRIVATE_IP には、Flaskアプリを動かすサーバーのプライベートIPアドレスを指定します。


    🔗 設定ファイルを有効にする

    1. シンボリックリンクを作成:
    sudo ln -s /etc/nginx/sites-available/yourapp /etc/nginx/sites-enabled/
    1. 設定が正しいか確認:
    sudo nginx -t
    1. Nginxを再起動:
    sudo systemctl reload nginx

    🔥 ファイアウォールの設定(必要な場合)

    次のようにしてHTTPトラフィックを許可しておきます:

    sudo ufw allow 'Nginx Full'

    またはポート80と443を個別に許可:

    sudo ufw allow 80
    sudo ufw allow 443

    ここまでで、NginxがHTTPでリクエストを受け取り、Flaskアプリに中継する基本設定ができました。

    ただしこの時点ではまだHTTPS(暗号化通信)にはなっていません
    次はSSL証明書を発行して、HTTPS対応にしていきます!




    4-5. SSL証明書を取得する(Let’s Encrypt + Certbot)

    Nginxの準備が整ったら、次はいよいよSSL証明書の取得です。これによって、あなたのWebアプリは「https://」で始まる安全な暗号化通信に対応できるようになります。

    今回は、無料で使えるSSL証明書サービス Let’s Encrypt(レッツ・エンクリプト) と、その取得ツール Certbot(サートボット) を使います。


    🔐 Let’s Encryptとは?

    Let’s Encryptは、非営利団体が運営する無料の認証局(CA)です。誰でも手軽にSSL証明書を発行でき、3ヶ月ごとの自動更新にも対応しています。

    • 完全無料(更新も0円)
    • 世界中のWebサーバーで広く利用中
    • Certbotを使えばコマンド1つで取得できる

    ⚙️ Certbotのインストール(Ubuntuの場合)

    まずは、CertbotとNginx用のプラグインをインストールします。

    sudo apt update
    sudo apt install certbot python3-certbot-nginx -y

    🌐 ドメインのAレコードが有効になっているか確認

    この時点で、すでに設定したドメイン(例:yourapp.com)がNginxにアクセスできるようになっている必要があります。
    ブラウザや curl コマンドで、80番ポートが正しく応答しているかをチェックしておきましょう。


    🚀 CertbotでSSL証明書を取得・設定(超簡単!)

    以下のコマンドを実行すると、自動で証明書の取得・Nginx設定までやってくれます:

    sudo certbot --nginx

    途中でいくつか質問されます:

    1. 使用するドメイン名を選択(例:yourapp.com)
    2. HTTPからHTTPSへのリダイレクトを有効にするか → 「リダイレクトを有効にする」がおすすめ

    正常に完了すると、次のようなメッセージが表示されます:

    Congratulations! You have successfully enabled HTTPS on https://yourapp.com

    📅 自動更新の確認(重要!)

    Let’s Encryptの証明書は90日間有効です。自動更新が有効かどうか、次のコマンドで確認しておきましょう:

    sudo systemctl status certbot.timer

    有効になっていれば、定期的に自動更新されます。手動でのテスト実行もできます:

    sudo certbot renew --dry-run

    ✅ HTTPSでのアクセス確認

    ブラウザで「https://yourapp.com」にアクセスして、以下を確認しましょう:

    • 鍵マーク🔒が表示される
    • 「保護された通信」などの表示が出る
    • 証明書の有効期限が正しく設定されている

    これで、あなたのWebアプリは安全なHTTPS通信に対応できるようになりました!

    ただし、まだFlaskアプリ本体が動いていない状態です。
    次は、Flaskアプリを起動し、リバースプロキシ経由でリクエストを受け取れるように設定していきましょう!




    4-6. Flaskアプリの起動と設定

    HTTPS通信の準備が整ったら、いよいよFlaskアプリ本体を起動しましょう。ここでは、アプリサーバーにFlaskをセットアップし、リバースプロキシ(Nginx)と連携できるように構成していきます。


    🐍 Python環境の準備

    まずは、Flaskアプリが動作する環境を整えます。

    1. Pythonがインストールされているか確認:
    python3 --version
    1. 仮想環境(venv)を作成:
    python3 -m venv venv
    source venv/bin/activate
    1. FlaskとWSGIサーバー(Gunicorn)をインストール:
    pip install flask gunicorn

    📝 Flaskアプリの準備

    たとえば、app.py という名前でFlaskアプリがあるとします:

    from flask import Flask
    app = Flask(__name__)

    @app.route('/')
    def index():
    return 'Hello, HTTPS world!'

    このファイルを、アプリサーバー上の任意のディレクトリに配置しておきましょう。


    🚀 Gunicornでアプリを起動

    Gunicornは本番運用向けのWSGIサーバーです。以下のように起動します:

    gunicorn -w 4 -b 0.0.0.0:8000 app:app
    • -w 4 はワーカー数(並列処理用)
    • -b 0.0.0.0:8000 はポート8000で待機する指定
    • app:app は「ファイル名:Flaskアプリの変数名」

    起動後は、ポート8000でリクエストを受け付けられる状態になります。


    🔁 ProxyFixミドルウェアの導入(重要)

    リバースプロキシ経由でアクセスされた場合、リクエスト元のIPアドレスやHTTPSフラグが正しく認識されないことがあります。
    これを防ぐために、Flaskに ProxyFix を追加します:

    from flask import Flask
    from werkzeug.middleware.proxy_fix import ProxyFix

    app = Flask(__name__)
    app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1)

    この設定により、Nginxから転送されたヘッダー情報が正しく処理され、リダイレクトやセキュリティ判定がうまく動作します。


    🛡️ セキュリティ対策も少しだけ

    • Flaskの debug=True絶対に本番環境で使わないようにしましょう!
    • エラー画面やスタックトレースが外部に見えてしまう原因になります。

    ✅ 動作確認

    1. Flaskアプリサーバー上でGunicornを起動
    2. リバースプロキシサーバー経由で https://yourapp.com にアクセス
    3. Flaskアプリのレスポンス(例:Hello, HTTPS world!)が表示されれば成功!



    4-7. アプリの常駐化・自動起動設定

    ここまでで、FlaskアプリをHTTPS経由でアクセスできる状態まで整えることができました。ですが、今のままではサーバーを再起動するたびに 手動でGunicornを起動し直す必要がある ため、実運用には不向きです。

    このステップでは、アプリを常駐プロセスとして動かし、自動起動できるように設定する方法を紹介します。


    ⚙️ systemdとは?

    Linuxサーバーで一般的に使われている「systemd(システムディー)」は、サービスやプロセスの起動・停止・管理を行う仕組みです。

    Gunicornを systemd のサービスとして登録しておくことで:

    • サーバー起動時に 自動でFlaskアプリが立ち上がる
    • プロセスが落ちても 自動再起動される
    • systemctl コマンドで 簡単に再起動やログ確認ができる

    という便利な運用が可能になります。


    📝 Gunicorn用の systemd サービスファイルを作成

    以下は例として、/etc/systemd/system/flaskapp.service にサービス定義ファイルを作成します:

    sudo nano /etc/systemd/system/flaskapp.service

    内容は以下のように記述します(適宜パスを自分の環境に合わせて変更してください):

    [Unit]
    Description=Gunicorn instance to serve Flask App
    After=network.target

    [Service]
    User=ubuntu
    Group=www-data
    WorkingDirectory=/home/ubuntu/yourapp
    Environment="PATH=/home/ubuntu/yourapp/venv/bin"
    ExecStart=/home/ubuntu/yourapp/venv/bin/gunicorn -w 4 -b 0.0.0.0:8000 app:app

    [Install]
    WantedBy=multi-user.target

    🚀 サービスを起動して確認

    # デーモンの再読み込み
    sudo systemctl daemon-reexec
    sudo systemctl daemon-reload

    # サービスを有効化(起動時に自動起動)
    sudo systemctl enable flaskapp

    # サービスの起動
    sudo systemctl start flaskapp

    # ステータス確認
    sudo systemctl status flaskapp

    正常に起動できていれば、Active: active (running) の表示が出るはずです。


    📋 ログを確認する方法

    もしうまく動かない場合は、次のコマンドでログを確認してみましょう:

    journalctl -u flaskapp

    アプリのエラー内容やパスミス、環境変数の間違いなどが出ていることがあります。


    ✅ 自動起動されるか確認(再起動テスト)

    最後に、サーバーを再起動してもアプリが自動起動するかをチェックしておきましょう:

    sudo reboot

    再起動後、ブラウザで「https://yourapp.com」にアクセスして、アプリが問題なく動作していれば完了です!

    これでFlaskアプリの常駐化&HTTPS対応がすべて完了しました!




    5. 動作確認とHTTPS接続の確認ポイント

    ここまでで、FlaskアプリをHTTPSで公開するための設定はすべて完了しました。
    あとは実際にブラウザからアクセスして、きちんと暗号化通信ができているか、アプリが正しく動作しているかを確認するだけです!

    このセクションでは、チェックしておくべきポイントをまとめて紹介します。


    ✅ ブラウザでアクセスしてみよう

    まずは、ブラウザを開いて以下のようにアクセスしてみましょう:

    https://yourapp.com

    無事にFlaskアプリのトップページ(たとえば「Hello, HTTPS world!」など)が表示されれば、基本的な接続はOKです!


    🔒 HTTPS接続が有効か確認する方法

    アドレスバーの**鍵マーク(🔒)**をクリックすると、HTTPS接続が有効かどうかがわかります。

    確認すべきポイント:

    • 「接続は保護されています」と表示されるか?
    • 有効なSSL証明書が使われているか?
    • ドメイン名と証明書の発行先が一致しているか?
    • 有効期限が正しいか?

    ChromeやFirefoxでは「証明書を表示」から詳細を見ることができます。


    🧪 リダイレクトも確認しておこう

    次に、HTTPからHTTPSへの自動リダイレクトが正しく設定されているかを確認します。

    以下のURLをブラウザで開いてみてください:

    http://yourapp.com

    自動的に「https://yourapp.com」に転送される場合はOKです。

    うまくリダイレクトされない場合は、Nginxの設定ファイルで return 301 https://$host$request_uri; が正しく書かれているか見直してみましょう。


    🛠️ よくある不具合チェック

    現象考えられる原因
    アクセスできないDNS設定がまだ反映されていない、またはポート未開放
    HTTPSでエラーが出る証明書のインストールミス、Nginxの設定ミス
    ページは表示されるが鍵マークが出ない外部リンクや画像がHTTPのまま(混在コンテンツ)
    サーバー再起動後にアプリが動かないsystemdの設定がうまくいっていない

    🌐 外部ツールでチェックするのも便利!

    以下のような無料ツールを使えば、HTTPS設定の確認やセキュリティ診断ができます。

    • SSL Labs SSL Test
       → SSL証明書の詳細と評価が表示されます。
    • Why No Padlock?
       → HTTPS混在コンテンツ(画像やスクリプト)をチェックできます。

    🎉 おめでとうございます!

    ここまでのすべてのチェックをクリアすれば、あなたのFlaskアプリはHTTPS通信で安全にインターネット上へ公開されている状態です!

    ただし、HTTPS化は「安全な通信経路を作った」というだけであり、アプリのセキュリティ対策はまだ始まりにすぎません

    今後は、次のような追加対策も考えていきましょう:

    • SQLインジェクションやXSS対策
    • Web Application Firewall(WAF)の導入
    • アクセス制限やレートリミットの設定



    6. まとめ

    この記事では、Flaskで作ったWebアプリをHTTPS対応で安全に公開するための手順を、ひとつずつ丁寧に解説してきました。

    ここで改めて、ポイントを振り返ってみましょう。


    🔁 本記事で紹介した流れ

    1. 独自ドメインを取得する
       → あなたのアプリの“住所”を決める
    2. リバースプロキシサーバーとFlaskサーバーを準備
       → HTTPS通信とアプリ処理を役割分担
    3. DNSのAレコードを設定する
       → ドメイン名からサーバーへつなぐ
    4. Nginxをインストールしてリバースプロキシを構築
       → 外部からのリクエストをFlaskアプリへ中継
    5. Let’s EncryptとCertbotでSSL証明書を発行
       → 無料でHTTPSを実現!
    6. Flaskアプリの起動と設定(ProxyFixとGunicorn)
       → 本番運用に必要な構成に対応
    7. systemdによるアプリの常駐化と自動起動設定
       → サーバー再起動後も自動で動く!
    8. HTTPSの動作確認と証明書のチェック
       → ブラウザと外部ツールで最終チェック!

    💡 HTTPS対応のメリット

    • 通信内容が暗号化され、ユーザーの個人情報を守れる
    • SEO対策にも有利(GoogleはHTTPSを評価)
    • 鍵マーク🔒が表示されて信頼性がアップ
    • 無料で導入できる(Let’s Encrypt)

    HTTPS対応は、現代のWeb開発において“必須”ともいえるステップです。
    「難しそう」と思うかもしれませんが、手順をひとつひとつ進めれば、個人開発でも安全なアプリを公開することは十分に可能です!

    今回紹介した手順をベースに、さらにセキュリティや運用性を高めて、長く安心して使えるWebアプリを育てていきましょう!


    よくある質問(Q&A)

    Q
    SSL証明書って本当に無料で使えるの?
    A

    はい、無料で使えます。Let’s Encryptという認証局を使えば、誰でも無料でSSL証明書を取得できます。しかも自動更新にも対応しているので、商用でない個人アプリにもぴったりです。

    Q
    FlaskアプリをHTTPSにしたら、もうセキュリティ対策は完璧?
    A

    いいえ。HTTPSは通信を暗号化するだけなので、アプリ内部の脆弱性(例:SQLインジェクション、XSSなど)は別の対策が必要です。セキュリティの“第一歩”としてHTTPSを導入するという位置づけです。

    Q
    サーバーは1台でも大丈夫ですか?
    A

    可能です。ただし、本記事のようにリバースプロキシ(Nginx)とFlaskアプリを分ける構成にしたほうが、セキュリティやスケーラビリティ、保守性の面で有利です。小規模な開発やテスト用途であれば1台構成でも動作します。

    ※当サイトはアフィリエイト広告を利用しています。リンクを経由して商品を購入された場合、当サイトに報酬が発生することがあります。

    ※本記事に記載しているAmazon商品情報(価格、在庫状況、割引、配送条件など)は、執筆時点のAmazon.co.jp上の情報に基づいています。
    最新の価格・在庫・配送条件などの詳細は、Amazonの商品ページをご確認ください。

    スポンサーリンク