1

В общем, рано или поздно разработчик, по-моему мнению, сталкивается с тем, что у него возникает потребность в реализации бэка и фронта на одном домене.

В ubuntu, и в VPS, и в nginx я дилетант, но благодаря роликам многих блогеров, хоть что-то, но в настройке базовой страницы более менее разобрался, спасибо за работу вам!

  • nginx v/1.18.0;
  • ubuntu v/20.04LTS

Но передо мной, как перед новичком, встал следущий вопрос: у меня есть основной домен example.com, который будет являться главной страницей.

На этой странице будут ссылки на другие работы, например, есть проект newsexplorer, у которого есть фронт и бекенд.

Возникает вопрос: как их разместить на поддомены вида:

  • newsexplorer.example.com - для фронта;

  • api.newsexplorer.example.com - для бэкэнда.

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

Какие попытки были предприняты для реализации идеи?

P.S. Далее во всем тексте и коде вместо example.com будет использоваться abrosimov.site

В текущий момент времени я пытаюсь добиться того, чтобы при запросе на домен http://abrosimov.site мне выдавалась стандартная приветственная страница nginx (в будущем это будет страница, на которой будут расположены ссылки на все остальные проекты), что и было реализовано, а на поддомен api.newsexplorer.abrosimov.site разместить бэкэнд одной из работ.

Стандартный конфиг nginx default выглядит так:

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

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {

                 try_files $uri $uri/ =404;

        }

В конфигах для abrosimov.site были попытки прописать следующее:

Реализовать размещение api работы по ссылке домена abrosimov.site/newsexplorer/api в location конфига nginx.

Конфиг для домена abrosimov.site.conf

server {
    listen 80;
    listen [::]:80;
    server_name abrosimov.site
    root /var/www/html;
    index index.html index.xml;

    location / {
         // так как страницы для основного домена еще нет
         // то пусть запросы передаются на внутренний порт
         // со стандартным приветствием nginx
         #       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;
    }

    location /newsexplorer/api {
                proxy_pass http://localhost:4000;
                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;
    }
}

При обращении на корневой домен, получаю, что и хотел: страницу приветствия nginx.

Результат обращения на корневой домен: abrosimov.site

При обращении на Api сервер вроде тоже откликается, как и было задумано:

введите сюда описание изображения

В данном для приложения случае, ссылка для него никуда не ведет.

Приложение принимает такие руты, как: /articles, /signin, /signup/, /users.

Код express js приложения, который, по идее, должен работать по поддомену api.newsexplorer.abrosimov.site:

const express = require('express');
require('dotenv').config();
const cors = require('cors');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const mongoose = require('mongoose');
const rateLimit = require('express-rate-limit');
const { errors } = require('celebrate');
const { usersRouter, articlesRouter } = require('./routes');
const { registerUser, login } = require('./controllers/users');
const { authorization, protectionLoginRoute, protectionRegisterRoute } = require('./middlewares/auth');
const { requestLogger, errorLogger } = require('./middlewares/logger');
const { NotFound } = require('./errors/index');

const app = express();

const { PORT = 4000 } = process.env;

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, //  15 min
  max: 99,
  message: 'За последние 15 минут было сделано не менеее 100 запросов. В целях защиты системы от DoS-атак, пожалуйста, повторите запрос позже',
});

mongoose.connect('mongodb://localhost:27017/newsdb', {
  useNewUrlParser: true,
  useCreateIndex: true,
  useFindAndModify: false,
  useUnifiedTopology: true,
});

app.use(cookieParser());

app.use('*', cors({
  origin: true,
}));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(limiter);

app.use(requestLogger);

app.post('/signup', protectionRegisterRoute, registerUser);
app.post('/signin', protectionLoginRoute, login);
app.use('/users', authorization, usersRouter);
app.use('/articles', authorization, articlesRouter);

app.get('*', (req, res) => {
  throw new NotFound('Запрашиваемый ресурс не найден');
});

app.use(errorLogger);

app.disable('etag');

app.use(errors());

app.use((err, req, res, next) => {
  const { statusCode = 500, message } = err;
  if (message === 'jwt expired') {
    return res.status(401).send({ message: 'JWT просрочен' });
  }
  return res.status(statusCode).send({ message: statusCode === 500 ? 'На сервере произошла ошибка' : message });
});

app.listen(PORT);

Сервер выдает уже что нужно, супер! Казалось бы.

Пытаемся перейти по одному из рутов, на которое приложение должно откликаться иначе, кроме как {message: "Запрашиваемый ресурс не найден"}:

Делаем запросы на:

  • abrosimov.site/newsexplorer/api/articles;
  • abrosimov.site/newsexplorer/api/users;
  • abrosimov.site/newsexplorer/api/signin;
  • abrosimov.site/newsexplorer/api/signup;

Получаем все тот же ответ: {message: "Запрашиваемый ресурс не найден"}

Ответы на запросы по рутам express js приложения

Пытался в конфиге в блоке location / {}, в конце вместо слеша в location писать api.newsexplorer$uri и много подобных других вариаций связанных с uri. Но все безрезультатно.

Дальнейшее решение проблемы я не нашел...

Начал искать в ютубе: "как реализовать поддомены на nginx, ubuntu."

Были решения, где одно предложение часто встречалась между разными авторами контента. Суть которого заключалось в том, что в конфиге nginx, создать слушатель server_name сразу на поддомен, например, server_name api.newsexplorer.abrosimov.site. А блок location /{} оставить только для корневого url/.

Окей, пробую. Захожу обратно в abrosimov.site.conf, видоизменяю:

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

    server_name abrosimov.site
    root /var/www/html;
    index index.html index.xml;

    location / {
//  пересылаю ну внутренний :80 порт, в котором выдает стандартное welcome to nginx
#                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;
    }
}

server {
    listen 80;
    listen [::]:80;
    server_name api.newsexplorer.abrosimov.site
    root /var/news-explorer-api/html;
    index index.html index.xml;

   location /  {
                proxy_pass http://localhost:4000;
                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;
    }
}

Проверяю корректность конфига:

  • sudo nano nginx -t;
  • sudo systemctl restart nginx.

Ввод новых параметров к конфиг abrosimov.site.conf

Как видно из скрина, что есть предупреждения по поводу новых настроек в конфиге, но, как я понимаю, что вроде все равно конфиг запуститься может. Пытаюсь обратиться по новому домену и поддомену.

Делаю запросы: Запросы по новым параметрам конфига

Получить желаемый результат снова не получается.

Postman выдает, будто что такого домена(поддомена) и не существует: Postman answers from server

В общем это все, что я смог настроить и попытался предпринять для решения своей проблемы. Надеюсь на вашу помощь, коллеги (смайлик жму руку).

7
  • 1
    Читать много букв мне лень, так что я бы остановился на newsexplorer.example.com для фронта и newsexplorer.example.com/api/ для бэка. И никаких заморочек с CORS.
    – Alexey Ten
    Commented 19 июн. 2022 в 16:41
  • Что бы домен существовал его нужно прописать в DNS. Одного конфига nginx недостаточно.
    – Alexey Ten
    Commented 19 июн. 2022 в 16:44
  • Читать не писать. А после еще и попытаться соблюсти орфографию :) То-есть регистрировать новое доменное имя? Commented 19 июн. 2022 в 16:56
  • В случае твоего предложения newsexplorer.example.com/api/, то у меня так же возникает проблема с реализацией, ибо на руты приложение не отзывается. Commented 19 июн. 2022 в 17:01
  • 1
    Поддомены уже купленного домена не нужно регистрировать. Но нужно их прописать в DNS что бы компьютеры знали где же им искать сайт. Впрочем для чисто потестировать можно их прописать на своём компьютере в etc/hosts
    – Alexey Ten
    Commented 19 июн. 2022 в 17:01

2 ответа 2

2

Я бы сделал так:

server {
    listen 80;
    listen [::]:80;
    server_name newsexplorer.abrosimov.site;
    #         забытая точка-с-запятой! ----^

    root /var/news-explorer-api/html;
    index index.html index.xml;

    location / {
        # что тут у вас для статики ....
    }

    location /api/ {
    #            ^---- очень важный слеш
        proxy_pass http://localhost:4000/;
        #        очень важный слеш -----^
        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;
    }
}

Очень важные слеши нужны что бы в ноду запрос попадал как /users без лишнего префикса /api/ который она не ожидает. Подробнее в документации по proxy_pass.

Ну или наоборот научить ноду ожидать префикс.

3
  • о, это решение выглядит весьма элегентно. Мне оно нравится. В любом случае, нужно поддомен регать. По ссылке, что ты скинул выше, понял, что делать. Зашел на сайт, где брал домен. Зарегал поддомены вида А и NS записей, но поддомены все равно не откликаются Commented 20 июн. 2022 в 5:33
  • Так же добавил записи A и NS на стороне VPS. Прописал в конфиге настройки по твоему примеру, поддомен все равно не откликается ( Commented 20 июн. 2022 в 6:07
  • В общем, в твоих ответах содержалось все, что мне нужно. Сделал конфиг по твоей рекомендации. На сайте VDS прописал поддомены вида A и CNAME записи. Подождал какое-то время и nginx стал возвращать ответ. Commented 21 июн. 2022 в 14:36
0

Возможно, кому-то это сэкономит время.

Важное: когда вы зарегистрируете поддомены и будете настривать конфиг, то у вас для фронта в location не забудьте добавить try_files $uri $url/ /index.html

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

Обратите внимание, что нужно добавить директиву именно для домена, на котором расположен фронтенд, а не бэкэнд

Эта директива сообщает nginx, что при обработке запроса сначала следует интерпритировать его как путь к файлу, затем к папке, а если ни того, ни другого не найдено, передавать его фронтенду в index.html

Теперь, если по пути есть файл, nginx его отдает, в противном случае считает запрос маршрутом на фронтенде.


P.S кому интересно, мой конфиг:

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

    server_name newsexplorer.abrosimov.site;

    index index.html index.xml;

    location /  {
                           root /var/mySites/news-explorer-frontend;
                           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;
                           try_files $uri $uri/ /index.html;
    }


    location /api/  {
                           proxy_pass http://localhost:4010/;
                           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;
    }
}

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.