首页 > 解决方案 > 在 React 和 Node 之间执行客户端请求,都在单独的 Docker 容器中

问题描述

我无法在 React 应用程序和 Express 应用程序之间执行客户端(浏览器)请求。我想为每个请求附加/验证一个标头令牌,我还希望能够仅 console.log 每个请求。

我正在开发一个带有 Express-GraphQL 后端的 React 前端。在开发过程中,我需要记录从客户端发送到服务器的请求标头,主要是为了确保我走在正确的道路上。所有教程都只是编写代码,没有调试等,一切正常。

这在我当前使用 CRA、Express 和 Docker 的设置中不起作用。我完全能够记录请求/向端点发送响应。

这两个应用程序在两个独立的容器中运行。我一直在尝试在我的 Docker 设置中同时使用链接、depends_on 和网络。可能是错的。但是我的客户既依赖又链接到我的服务器。服务器运行在 8000 端口,客户端 3000。

记录客户端请求:

// Debugging
server.express.use((req, res, next) => {
  console.log(req);
  next();
});

码头工人-compose.yml:

version: '3'
services:
  server:
    build:
      context: ./server
      dockerfile: Dockerfile
    expose:
      - 8000
    ports:
      - 8000:8000
    volumes:
      - ./server:/server
      - /server/node_modules
    networks:
      - webapp-network
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    expose:
      - 3000
    ports:
      - 3000:3000
    volumes:
      - ./client:/client
      - /client/node_modules
    networks:
      - webapp-network

networks:
  webapp-network:
    driver: bridge

用于客户端和服务器的 Dockerfile

FROM node:11-alpine
WORKDIR /server
COPY package.json ./
RUN yarn install
EXPOSE 8000
CMD [ "yarn", "dev" ]
FROM node:11-alpine
WORKDIR /client
COPY package.json ./
RUN yarn install
EXPOSE 3000
CMD [ "yarn", "start" ]

我怀疑我的 Docker 配置没有任何问题,因为我没有收到任何错误并且能够记录特定的端点请求,但我的 devops 知识。我很难将自己的主机和图像主机分开。我应该在哪里同时到达我的前端并仍然将请求记录到我的后端?我真的需要一个 Nginx 代理来进行开发吗?

有趣的是,我一直在研究 Next.js 和一个自定义服务器,通过该设置,这个特定场景就可以工作。我启动了 Express 服务器和 Next,然后一切都很好,但我的小型项目不需要 Nextjs。我一直在通过 Nextjs 代码库搜索任何提示。该设置如何处理?

使用 server.js 文件更新:

require('dotenv').config();
const express = require('express');
const createServer = require('./createServer');
const server = createServer();

// Middleware

// Debugging
server.express.use((req, res, next) => {
  console.log('req');
  next();
});

server.start({ port: process.env.PORT /* 8000 */ }, server =>
  console.log(`Listen to ${server.port}`)
);

我也试过不使用中间件,即。

server.get('*', (req, res) => {
  console.log(req);
});
server.express.get('/', (req, res) => {
  console.log(req);
});

更新为创建服务器 fn。

const { prisma } = require('../generated/prisma-client');
const { GraphQLServer } = require('graphql-yoga');
const Query = require('./resolvers/Query');
const Mutation = require('./resolvers/Mutation');

function createServer() {
  return new GraphQLServer({
    typeDefs: './src/schema.graphql',
    resolvers: {
      Query,
      Mutation
    },
    context: request => {
      return {
        ...request,
        prisma
      };
    },
    debug: process.env.NODE_ENV === 'production',
    resolverValidationOptions: { requireResolversForResolveType: false }
  });
}

module.exports = createServer;

标签: node.jsreactjsdockerexpressdocker-compose

解决方案


推荐阅读