如何在Docker、NextJS和Nginx中创建隔离网络中的正确端点

t9aqgxwy  于 2023-02-21  发布在  Nginx
关注(0)|答案(1)|浏览(132)

我有一个Docker网络,它是一个独立的网络和反向代理,为本地主机提供NextJS应用程序。不幸的是,每当我打开浏览器时,后端获取失败。但是,curl http://rustserver-dc:10000/会响应数据。我不希望数据库和后端暴露,只有在浏览时才能从NextJS应用程序中获取。
Nginx配置:

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  sendfile on;

  upstream api {
    server nextjs-app:3000;
  }

  server {
    listen 80 default_server;

    location / {
      proxy_pass http://api;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
}

对接-组合:

version: '3.8'

services:

  nginx:
    image: nginx:latest
    restart: always
    depends_on:
      - rust-server
      - nextjs-app
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - "80:80"
    networks:
      - app_network
 

  nextjs-app:
    build: 
      context: ./client
      dockerfile: Dockerfile
    container_name: nextjs-app
    environment:
      - CHOKIDAR_USEPOLLING=true
      - DB_USER=${DB_USER}
      - DB_PASS=${DB_PASS}
    expose:
      - "3000"
    networks:
      - app_network

  rust-server:
    build:
      context: ./userserver
      dockerfile: Dockerfile
    container_name: rustserver-dc
    expose:
      - "10000"
    networks:
      - app_network
    volumes:
      - './userserver:/usr/src/userserver'
      - '/usr/src/userserver/target'
    environment:
      - MY_LOG_LEVEL=info
      - MY_LOG_STYLE=Always
      - DATABASE_URL=${DATABASE_URL}
      - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
      - STRIPE_PUBLISH_KEY=${STRIPE_PUBLISH_KEY}
      - ACCESS_TOKEN_SECRET=${ACCESS_TOKEN_SECRET}
      - REFRESH_TOKEN_SECRET=${REFRESH_TOKEN_SECRET}
      - RESET_PASSWORD_SECRET=${RESET_PASSWORD_SECRET}
      - REDIS_URL=${REDIS_URL}

  surrealdb:
    image: surrealdb/surrealdb
    environment:
      - DB_USER=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
    expose:
      - "8000"
    networks:
      - app_network
    volumes:
      - data:/var/lib/surrealdb/data
    command: "start --user ${DB_USER} --pass {DB_PASSWORD} --log full 
file://var/lib/surreal/data"

networks:
  app_network:
    driver: bridge
    

volumes:
  data:

下一个js索引页:

import Head from 'next/head'
import axios from 'axios';
import { useState, useEffect } from 'react';

export default function Home() {
  const [data, setData] = useState(null);
  useEffect(() => {
    axios.get('http://rustserver-dc:10000')
      .then(res => {
        setData(res.data);
      })
      .catch(err => {
        console.log(err);
      })
  }, []);

  console.log(data);
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div>Welcome to the app</div>
      </main>
    </>
  )
}

控制台中发生错误:
加载资源失败:网络::错误名称未解决rustserver-dc:10000/:1
当我尝试连接Kubernetes中的两个节点时,遇到了同样的问题,并且通过Nginx反向代理只暴露NextJS应用程序

tquggr8v

tquggr8v1#

如果希望next在docker网络上获取数据并将其发送到客户机,可以在请求页面时使用getServerSideProps获取数据,或者在构建时使用getStaticProps检索数据。

export async function getServerSideProps(context) {
  const res = await axios.get('http://rustserver-dc:10000')
  return {
    props: res.data, // will be passed to the page component as props
  }
}

如果您需要客户机在这些时间之外发出对rustserver-dc的请求,您可以向next添加一个API route,它将请求代理到rustserver-dc服务上。

相关问题