Блог

У меня есть express на серверной части и react.js на интерфейсе, но у меня также есть страница администратора с движком просмотра pug, работающим на экспресс-маршрутах, как я могу использовать их в одном домене

Expressjs действительно хорошо комбинируется. У вас может быть экспресс-приложение верхнего уровня, которое перенаправляется в приложения sub-express и обслуживает ваши индивидуальные сервисы.

Допустим, вы хотите обслуживать свой интерфейс react с www.example.com , ваш администратор (просмотры pug) с www.example.com/admin , и вы также хотите иметь api, который обслуживает интерфейс react на www.example.com/api `.

Вы хотели бы что-то вроде следующего примера кода, который демонстрирует состав приложений Express. Я не запускал код, но этого должно быть достаточно, чтобы вы начали.

 // This parent app acts as a parent layer and router
// for all your "sub apps". Any middleware you apply
// to this express app will apply to *all your other
// sub-apps*.
const parentApp = express();

// We now create another express instance, this will
// house the API. It can be in another file and you
// could require in something like "require('api');"
// instead but for brevity we'll keep it all in one
// file.
const apiApp = express();
apiApp.get('/info', (req, res, next) => {
    console.log('/info');
    return res.sendStatus(200);
});

// Mount the sub app on the /api route. This means
// you can how hit 'www.example.com/api/info' and
// you'll get back a 200 status code.
parentApp.use('/api', apiApp);

// Now we setup the admin app which we'll add pug
// views into. This is an example so just pretend
// the views exist.
const adminApp = express();
adminApp.set('views', './views');
adminApp.set('view engine', 'pug');
adminApp.get('/login', (req, res, next) => {
    return res.render('login', { title: 'Hey' });
});

// Mount the sub app on the /admin route. This way
// we can hit www.example.com/admin/login to get
// our login page rendered.
parentApp.use('/admin', adminApp);

// Now we create and mount the frontend app that
// serves our fully built react app. You could do
// this with nginx instead but you wanted to do
// it with express so lets do it that way.
const frontendApp = express();
frontendApp.use(express.static('/frontend));

parentApp.use('/', frontendApp);
  

Если вы не хотите создавать самостоятельно приложение Express верхнего уровня (и, таким образом, создавать что-то вроде монолитного приложения), я бы рекомендовал ознакомиться с документацией nginx или документами для используемого вами HTTP-сервера. Вы должны иметь возможность направлять запросы к определенным конечным точкам различным приложениям узла, работающим на разных портах. Затем статические файлы могут обслуживаться изначально вашим HTTP-сервером. Это определенно более эффективный и элегантный подход, но поскольку вы спросили о express, я хотел продемонстрировать этот подход в первую очередь.