ウェブサイトやAPIを運営しているなら、ドメイン、サブドメイン、そして厄介なCORSの問題に対処する必要があるでしょう。ステップバイステップで分解して、すべてをスムーズに設定しましょう。

Nginxでのドメインとサブドメインの設定

Nginxは複数のドメインやサブドメインを簡単に設定できます。サーバーブロック（仮想ホストとも呼ばれます）を設定して、Nginxにどのドメインがどこを指すべきかを教えるだけです。

Nginxをリバースプロキシとして使用する

この場合、Nginxをリバースプロキシとして使用しています。つまり、Nginxは受信したリクエストを受け取り、サブドメインに基づいて適切なバックエンドサーバーに転送します。この設定は、負荷分散、セキュリティ、リクエスト処理の集中化に役立ちます。

HTTPをHTTPSにリダイレクトする

すべてのトラフィックが安全にHTTPSを通過するように、ポート80から443へのリダイレクトを設定します:

server {
    listen 80;
    server_name example.com *.example.com;
    return 301 https://$host$request_uri;
}

動的プロキシパスを使用したドメインと複数のサブドメインの処理

メインドメイン（example.com）と複数のサブドメイン（api.example.com、blog.example.comなど）を動的に処理したい場合は、サブドメインを抽出してリクエストを適切にプロキシできます:

server {
    listen 443 ssl;
    server_name *.example.com;

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    set $subdomain "default";
    if ($host ~* ^(.+?)\.example\.com$) {
        set $subdomain $1;
    }

    location / {
        proxy_pass http://backend.$subdomain.example.com;
        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_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Authorization $http_authorization;
    }
}

この設定は、リクエストからサブドメインを動的に抽出し、対応するバックエンドサーバー（backend.<subdomain>.example.com）にリクエストをプロキシします。さらに、必要なヘッダーが正しく転送されることを保証します。

さあ、設定を有効にしてNginxを再起動しましょう:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

やった！あなたのドメインとすべてのサブドメインがHTTPSと動的プロキシで動作するようになりました。

NginxでのCORS（クロスオリジンリソースシェアリング）処理

CORSとは？

CORSは、フロントエンドが別のドメインにホストされたAPIを呼び出すのをブロックするものです。もしあなたのフロントエンドがapp.example.comにあり、APIがapi.example.comにある場合、クロスオリジンリクエストを許可する必要があります。

NginxでのCORSの有効化

APIが別のドメインからのリクエストを受け入れるようにするには、Nginxに正しいヘッダーを追加する必要があります。

すべてのオリジンを許可する（常に推奨されるわけではありません） 

server {
    listen 443 ssl;
    server_name api.example.com;

    ssl_certificate /etc/nginx/ssl/api.example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/api.example.com.key;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

これにより、誰でもあなたのAPIにアクセスできるようになります。これはパブリックAPIには問題ありませんが、プライベートAPIにはリスクがあります。

特定のドメインのみを許可する

アクセスをapp.example.comに制限したいですか？その場合は、次のようにします:

add_header 'Access-Control-Allow-Origin' 'https://app.example.com';

プレフライトリクエストの処理

ブラウザは時々、実際のAPI呼び出しを行う前にOPTIONSリクエストを送信します。これを処理しないと、問題が発生します。プレフライトリクエストを許可する方法は次のとおりです:

location / {
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        return 204;
    }
}

まとめ

Nginxでドメイン、サブドメイン、CORSを正しく設定するのは、何を調整すればよいかを知っていればそれほど難しくありません。正しい設定を行えば、頭痛を避け、アプリをスムーズに運営できます。コーディングを楽しんでください！