Настройка сервера nginx для работы как на домене, так и на подконтрольном домене (один из них статический, а другой обслуживается приложением Next JS)

Вопрос или проблема

У меня есть VPS с Ubuntu 24.10 на Digitalocean, и я хочу разместить два веб-сайта, используя Nginx.

Один из них – website-name.com, где я хочу разместить статическую версию сайта на Next JS, содержимое которого я скопировал в папку /var/www/out, а другой – subdomain.website-name.com, где я хочу разместить приложение на Next JS, которое работает на localhost:3000.

В папке /etc/nginx/sites-available/ у меня есть конфигурационный файл с именем myapp, который служит прокси для localhost:3000. Этот конфигурационный файл выглядит следующим образом:

limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;

server {
    listen 80;
    server_name subdomain.website-name.com;

    # Перенаправить все HTTP-запросы на HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name subdomain.website-name.com;

    ssl_certificate /etc/letsencrypt/live/website-name.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/website-name.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # Включить ограничение скорости
    limit_req zone=mylimit burst=20 nodelay;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        # Отключить буферизацию для поддержки потоковой передачи
        proxy_buffering off;
        proxy_set_header X-Accel-Buffering no;
    }
}

У меня есть еще один конфигурационный файл в папке /etc/nginx/sites-available/ с именем website-name.com, который обслуживает статический веб-сайт, содержимое которого доступно в папке /var/www/out. Этот конфигурационный файл выглядит следующим образом:

server {
  listen 80;
  server_name website-name.com;

  root /var/www/out;

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

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

Я получил эту конфигурацию с страницы документации по Next JS.

Вместо того, чтобы получить статический веб-сайт по адресу https://website-name.com, я получаю приложение Next JS, работающее на localhost:3000.

По адресу https://subdomain.website-name.com приложение Next JS отображается корректно, как и требуется.

Я не могу понять, в чем проблема. Может кто-то помочь?

Примечание: Я использовал certbot для расширения сертификата для website-name.com на subdomain.website-name.com (я следовал ответу на этот вопрос для этого). Я также создал запись A для subdomain.website-name.com.

Ответ или решение

Для решения проблемы с конфигурацией Nginx на вашем сервере, нужно убедиться, что оба конфигурационных файла настроены корректно и что они не конфликтуют друг с другом. В вашем случае вы сталкиваетесь с тем, что статический сайт на домене website-name.com не работает должным образом, в то время как поддомен subdomain.website-name.com отображает приложение Next.js, запущенное на localhost:3000.

1. Проверка конфигурации Nginx

Ниже приведены конфигурации для вашего домена и поддомена. Убедитесь, что вы правильно настроили каждый из них.

website-name.com (статический сайт)

server {
    listen 80;
    server_name website-name.com www.website-name.com;  # Добавьте www если это необходимо

    root /var/www/out;
    index index.html index.htm;

    location / {
        try_files $uri $uri.html $uri/ =404;  # Загрузка статических файлов
    }

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    # Перенаправление на HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name website-name.com www.website-name.com;  # Добавьте www если это необходимо

    ssl_certificate /etc/letsencrypt/live/website-name.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/website-name.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/out;
    index index.html index.htm;

    location / {
        try_files $uri $uri.html $uri/ =404;  # Загрузка статических файлов
    }

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}

subdomain.website-name.com (приложение Next.js)

Убедитесь, что конфигурация для поддомена, как вы уже указали, выглядит корректно. Она должна оставаться прежней, как вы указали:

limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;

server {
    listen 80;
    server_name subdomain.website-name.com;

    # Перенаправление на HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name subdomain.website-name.com;

    ssl_certificate /etc/letsencrypt/live/website-name.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/website-name.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    limit_req zone=mylimit burst=20 nodelay;

    location / {
        proxy_pass http://localhost:3000;  # Проксирование на приложение
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        proxy_buffering off;
        proxy_set_header X-Accel-Buffering no;
    }
}

2. Проверка выбора конфигурации

Иногда Nginx может выбирать неправильное серверное направление, если конфигурации не соответствуют входящим запросам. Убедитесь, что в каждом server блоке в конфигурации используется правильное серверное имя (server_name).

3. Перезагрузка Nginx

После внесения изменений в конфигурацию Nginx необходимо перезапустить сервер для применения изменений:

sudo nginx -t  # Проверка конфигурации на наличие ошибок
sudo systemctl restart nginx  # Перезапуск Nginx

4. Linode и DNS записи

Также, проверьте настройки DNS для вашего домена. Убедитесь, что записи A указаны правильно и что ваш VPS доступен с обоих доменов. Используйте команды nslookup или dig, чтобы проверить, правильно ли выполняется разрешение имен.

5. Логирование

В случае, если проблема все еще сохраняется, проверьте файлы журналов Nginx:

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

Таким образом, вы сможете быстро определить, какие ошибки или проблемы возникают при попытке доступа к вашему сайту.

Итог

Убедившись, что все конфигурации заданы верно и что Nginx корректно перезапущен после изменений, вы должны быть в состоянии получить доступ к статическому сайту по https://website-name.com, в то время как приложение Next.js будет доступно по https://subdomain.website-name.com. Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться.

Оцените материал
Добавить комментарий

Капча загружается...