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
    19 июн 2022 в 16:41
  • Что бы домен существовал его нужно прописать в DNS. Одного конфига nginx недостаточно.
    – Alexey Ten
    19 июн 2022 в 16:44
  • Читать не писать. А после еще и попытаться соблюсти орфографию :) То-есть регистрировать новое доменное имя? 19 июн 2022 в 16:56
  • В случае твоего предложения newsexplorer.example.com/api/, то у меня так же возникает проблема с реализацией, ибо на руты приложение не отзывается. 19 июн 2022 в 17:01
  • 1
    Поддомены уже купленного домена не нужно регистрировать. Но нужно их прописать в DNS что бы компьютеры знали где же им искать сайт. Впрочем для чисто потестировать можно их прописать на своём компьютере в etc/hosts
    – Alexey Ten
    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 записей, но поддомены все равно не откликаются 20 июн 2022 в 5:33
  • Так же добавил записи A и NS на стороне VPS. Прописал в конфиге настройки по твоему примеру, поддомен все равно не откликается ( 20 июн 2022 в 6:07
  • В общем, в твоих ответах содержалось все, что мне нужно. Сделал конфиг по твоей рекомендации. На сайте VDS прописал поддомены вида A и CNAME записи. Подождал какое-то время и nginx стал возвращать ответ. 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;
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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