В общем, рано или поздно разработчик, по-моему мнению, сталкивается с тем, что у него возникает потребность в реализации бэка и фронта на одном домене.
В 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.
При обращении на 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: "Запрашиваемый ресурс не найден"}
Пытался в конфиге в блоке 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.
Как видно из скрина, что есть предупреждения по поводу новых настроек в конфиге, но, как я понимаю, что вроде все равно конфиг запуститься может. Пытаюсь обратиться по новому домену и поддомену.
Получить желаемый результат снова не получается.
Postman выдает, будто что такого домена(поддомена) и не существует:
В общем это все, что я смог настроить и попытался предпринять для решения своей проблемы. Надеюсь на вашу помощь, коллеги (смайлик жму руку).
newsexplorer.example.com
для фронта иnewsexplorer.example.com/api/
для бэка. И никаких заморочек с CORS.