MENU
計算科学屋が運営するウェブサイト
  1. Home
  2. Linux
  3. 【Linux】Nginxを最速で設定する方法

【Linux】Nginxを最速で設定する方法

Linux
Let's Encrypt Linux nginx SSL/TLS Ubuntu

WebサイトやWebアプリケーションを公開するとき、Nginxを利用すると簡単にWebサーバを構成できます。

Nginxでは、HTML、CSS、JavaScript、画像ファイルなどをそのまま公開できます。

また、FastAPI、Node.js、Djangoなどのアプリケーションを直接外部公開するのではなく、Nginxを前段に置くことで、ドメインからバックエンドアプリケーションへアクセスできるようにもできます。

この記事では、Ubuntu 26.04 LTSにNginxをインストールし、以下の2パターンでWebサイトを公開する方法をまとめます。

・静的サイトを公開する場合
・バックエンドアプリケーションを公開する場合

この記事では、以下について記述しています。

・Nginxのインストール
・Nginxの起動確認
・静的サイト用の設定ファイル作成
・バックエンドアプリケーション用のリバースプロキシ設定
・Nginxの設定反映
・HTTPS化
・動作確認

目次

前提環境

本記事では、以下の環境を前提とします。

・Ubuntu 26.04 LTS
・ドメインを使用する場合は、DNSのAレコードをサーバーのIPアドレスに向けていること

ここでは例として、以下の値を使用します。

・ドメイン：example.com
・静的サイトの公開ディレクトリ：/var/www/example.com
・バックエンドアプリケーション：http://127.0.0.1:8000

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

また、127.0.0.1:8000 は、自分のバックエンドアプリケーションが待ち受けているアドレスに置き換えてください。

SSL/TLSサーバ証明書の取得については、下記記事を参照してください。

あわせて読みたい
Let’s EncryptのSSL/TLSサーバ証明書を取得する方法 ウェブブラウザのアクセスでは，当然のごとく通信の暗号化が求められています． 近年は特に厳しくなっており，HTTPSのウェブサイトでないとGoogleは検索にヒットしない…

Nginxのインストール

まず、パッケージリストを更新します。


apt update

Nginxをインストールします。


apt install -y nginx

インストール後、Nginxの状態を確認します。


systemctl status nginx

active (running) と表示されていれば、Nginxは起動しています。

Nginxの初期表示確認

Nginxをインストールすると、標準では80番ポートでWebサーバが起動します。

サーバ上で確認する場合は、下記コマンドを実行します。


curl http://localhost

HTMLが返ってくれば、Nginx自体は正常に動作しています。

Nginxの設定ファイルを作成

次に、ドメイン用の設定ファイルを作成します。

UbuntuのNginxでは、サイトごとの設定ファイルを /etc/nginx/sites-available/ に作成し、/etc/nginx/sites-enabled/ にシンボリックリンクを作成して有効化します。

今回は、example.com 用の設定ファイルを作成します。

下記ファイルを作成します。

/etc/nginx/sites-available/example.com

静的サイトを公開する場合と、バックエンドアプリケーションを公開する場合で設定内容が異なります。

どちらか一方を選択して設定してください。

静的サイトを公開する場合

HTML、CSS、JavaScript、画像ファイルなどをそのまま公開する場合は、Nginxの root に公開ディレクトリを指定します。

ここでは、npm run build などで作成した静的サイトを公開することを想定します。

たとえば、ViteやReactなどでビルドした成果物を、下記ディレクトリに配置する前提とします。

/var/www/example.com

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

まず、公開用ディレクトリを作成します。


mkdir -p /var/www/example.com

次に、ビルド済みの静的ファイルを /var/www/example.com に配置します。

たとえば、ビルド成果物が dist ディレクトリに作成されている場合は、dist の中身を /var/www/example.com に配置します。


cp -r dist/* /var/www/example.com/

Nginxから読み取れるように権限を設定します。


chown -R www-data:www-data /var/www/example.com
chmod -R 755 /var/www/example.com

Nginxの設定ファイルは下記のようにします。


server {
    listen 80;
    listen [::]:80;

    server_name example.com;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

server_name には、使用するドメインを指定します。


server_name example.com;

root には、公開するディレクトリを指定します。


root /var/www/example.com;

index には、ディレクトリにアクセスしたときに表示するファイルを指定します。


index index.html;

try_files では、リクエストされたファイルが存在するか確認します。


try_files $uri $uri/ =404;

ファイルが存在しない場合は、404を返します。

ReactやViteなどで作成したSPAを公開する場合は、存在しないパスを index.html にフォールバックさせることがあります。

その場合は、location / を下記のようにします。


location / {
    try_files $uri $uri/ /index.html;
}

バックエンドアプリケーションを公開する場合

FastAPI、Node.js、Djangoなどのバックエンドアプリケーションを公開する場合は、Nginxをリバースプロキシとして設定します。

この場合、Nginxは外部からのリクエストを受け付け、バックエンドアプリケーションへリクエストを転送します。

ここでは、バックエンドアプリケーションが以下で起動している前提とします。

http://127.0.0.1:8000

Nginxの設定ファイルは下記のようにします。


server {
    listen 80;
    listen [::]:80;

    server_name example.com;

    location / {
        proxy_pass http://127.0.0.1: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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server_name には、使用するドメインを指定します。


server_name example.com;

proxy_pass には、バックエンドアプリケーションのアドレスを指定します。


proxy_pass http://127.0.0.1:8000;

たとえば、FastAPIを8000番ポートで起動している場合は、上記の設定でNginxからFastAPIにリクエストを転送できます。

proxy_set_header では、バックエンドアプリケーション側で元のリクエスト情報を扱えるようにしています。


proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

Nginxの設定を有効化

作成した設定ファイルを有効化します。

sites-enabled にシンボリックリンクを作成します。


ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com

標準の設定ファイルが不要であれば、無効化します。


rm -f /etc/nginx/sites-enabled/default

Nginxの設定ファイルに問題がないか確認します。


nginx -t

下記のように表示されれば、設定ファイルに問題はありません。


syntax is ok
test is successful

設定を反映します。


systemctl reload nginx

ここまでで、Nginxの設定は完了です。

確認

ブラウザでhttp://example.comにアクセスします。

静的サイトの場合は、ビルドしたWebサイトが表示されれば成功です。

バックエンドアプリケーションの場合は、Nginx経由でバックエンドアプリケーションのレスポンスが返ってくれば成功です。

たとえば、バックエンドアプリケーションがトップページを返す場合は、その画面が表示されます。

API専用のバックエンドアプリケーションの場合は、JSONやテキストなどのレスポンスが返る場合があります。

FastAPIの場合は、下記のように /docs にアクセスすると確認しやすいです。

サーバ上で確認する場合は、下記コマンドを実行します。


curl http://example.com

FastAPIなどで確認用のエンドポイントがある場合は、下記のように確認します。


$ curl http://example.com/docs

502 Bad Gateway ではなく、バックエンドアプリケーション側のレスポンスが返ってくれば、Nginxからバックエンドアプリケーションへの転送はできています。

502 Bad Gatewayになる場合

Nginxの設定後に 502 Bad Gateway が表示される場合、Nginxからバックエンドアプリケーションに接続できていない可能性があります。

まず、バックエンドアプリケーションが起動しているか確認します。


curl http://127.0.0.1:8000

ここで応答がなければ、Nginxではなくバックエンドアプリケーション側の問題です。

次に、Nginxの設定ファイルで proxy_pass のアドレスとポート番号が正しいか確認します。

/etc/nginx/sites-available/example.com


...
proxy_pass http://127.0.0.1:8000;
...

バックエンドアプリケーションが別のポートで起動している場合は、この値を修正します。

設定を変更した場合は、構文確認を行います。


nginx -t

問題がなければ、Nginxの設定を再読み込みします。


systemctl reload nginx

HTTPS化

これまで実施すればNginxは適切に動作していますが、実用上Webサーバを公開するにあたりHTTPS化をすることを推奨します。

HTTPで正常に表示できることを確認したら、HTTPS化します。

SSL/TLSサーバ証明書の取得方法については、下記記事を参照してください。

あわせて読みたい
Let’s EncryptのSSL/TLSサーバ証明書を取得する方法 ウェブブラウザのアクセスでは，当然のごとく通信の暗号化が求められています． 近年は特に厳しくなっており，HTTPSのウェブサイトでないとGoogleは検索にヒットしない…

この記事では、証明書の取得後、以下のファイルが作成されている前提で進めます。


/etc/letsencrypt/live/example.com/fullchain.pem
/etc/letsencrypt/live/example.com/privkey.pem

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

静的サイトをHTTPS化する場合

静的サイトをHTTPS化する場合は、Nginxの設定ファイルを下記のように変更します。

/etc/nginx/sites-available/example.com


server {
    listen 80;
    listen [::]:80;

    server_name example.com;

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

server {
    listen 443 ssl;
    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;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

1つ目の server ブロックでは、HTTPアクセスをHTTPSへリダイレクトしています。


...
return 301 https://$host$request_uri;
...

2つ目の server ブロックでは、443番ポートでHTTPSアクセスを受け付けます。


...
listen 443 ssl;
listen [::]:443 ssl;
...

SSL/TLSサーバ証明書は、下記で指定します。


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

fullchain.pem にはサーバ証明書と中間証明書が含まれています。

privkey.pem は秘密鍵です。外部に公開しないように注意してください。

バックエンドアプリケーションをHTTPS化する場合

バックエンドアプリケーションをHTTPS化する場合は、Nginxの設定ファイルを下記のように変更します。

/etc/nginx/sites-available/example.com


server {
    listen 80;
    listen [::]:80;

    server_name example.com;

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

server {
    listen 443 ssl;
    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 / {
        proxy_pass http://127.0.0.1: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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

proxy_pass には、バックエンドアプリケーションのアドレスを指定します。


proxy_pass http://127.0.0.1:8000;

HTTPS設定を反映

HTTPS用にNginxの設定ファイルを変更したら、設定に問題がないか確認します。


nginx -t

下記のように表示されれば、設定ファイルに問題はありません。


syntax is ok
test is successful

問題がなければ、Nginxの設定を再読み込みします。


systemctl reload nginx

HTTPSの確認

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

https://example.com

静的サイトの場合は、ビルドしたWebサイトが表示されれば成功です。

バックエンドアプリケーションの場合は、Nginx経由でバックエンドアプリケーションのレスポンスが返ってくれば成功です。

サーバ上で確認する場合は、下記コマンドを実行します。


curl -I https://example.com

下記のように 200 や 301 などのレスポンスが返ってくれば、NginxがHTTPSで応答しています。


HTTP/2 200

また、HTTPでアクセスした場合にHTTPSへ転送されることも確認します。


curl -I http://example.com

下記のように Location が https:// になっていれば、HTTPからHTTPSへのリダイレクトも設定されています。


HTTP/1.1 301 Moved Permanently
Location: https://example.com/

証明書更新後にNginxを再読み込み

Let’s Encryptの証明書は定期的に更新する必要があります。

証明書の更新方法は、下記記事を参照してください

あわせて読みたい
Let’s EncryptのSSL/TLSサーバ証明書を取得する方法 ウェブブラウザのアクセスでは，当然のごとく通信の暗号化が求められています． 近年は特に厳しくなっており，HTTPSのウェブサイトでないとGoogleは検索にヒットしない…

Nginxに証明書を設定している場合、証明書の更新後にNginxを再読み込みすると、新しい証明書が反映されます。

Certbotの更新後にNginxを再読み込みしたい場合は、deploy hookを作成します。

deploy hook用のディレクトリを作成します。


mkdir -p /etc/letsencrypt/renewal-hooks/deploy

下記ファイルを作成します。

/etc/letsencrypt/renewal-hooks/deploy/reload-nginx.sh


#!/bin/sh
systemctl reload nginx

実行権限を付与します。


chmod 755 /etc/letsencrypt/renewal-hooks/deploy/reload-nginx.sh

更新テストを行います。


certbot renew --dry-run

問題がなければ、証明書の自動更新時にNginxも再読み込みされます。

よく使う確認コマンド

Nginxの設定後によく使うコマンドをまとめます。

設定ファイルの構文確認です。


nginx -t

Nginxの再読み込みです。


systemctl reload nginx

Nginxの状態確認です。


systemctl reload nginx

80番ポートで待ち受けているか確認します。


ss -ltnp | grep ':80'

443番ポートで待ち受けているか確認します。


ss -ltnp | grep ':443'

アクセスログの確認です。


tail -f /var/log/nginx/access.log

エラーログの確認です。


tail -f /var/log/nginx/error.log

Nginxの設定を変更した場合は、基本的に下記の流れで確認します。


nginx -t
systemctl reload nginx

nginx -t で設定ファイルを確認してから、systemctl reload nginx で設定を反映します。

まとめ

この記事では、Ubuntu 26.04 LTSでNginxを設定する方法をまとめました。

静的サイトを公開する場合は、root に公開ディレクトリを指定します。

root /var/www/example.com;

バックエンドアプリケーションを公開する場合は、proxy_pass にバックエンドアプリケーションのアドレスを指定します。

proxy_pass http://127.0.0.1:8000;

HTTPS化する場合は、取得済みのSSL/TLSサーバ証明書をNginxに設定します。

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

基本的な流れは下記の通りです。

・Nginxをインストールする
・静的サイトまたはバックエンド用の設定ファイルを作成する
・sites-enabled で設定を有効化する
・nginx -t で設定を確認する
・systemctl reload nginx で設定を反映する
・HTTPS化する場合は、SSL/TLSサーバ証明書をNginxに設定する

Nginxを使うことで、静的サイトの公開とバックエンドアプリケーションの公開をどちらも簡単に構成できます。

Linux
Let's Encrypt Linux nginx SSL/TLS Ubuntu
よかったらシェアしてね！
目次