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

huangapple
go评论84阅读模式
英文:

How to create correct endpoints within an isolated network in Docker, NextJS and Nginx

问题

Nginx配置：

  1. worker_processes 1;
  3. events {
  4.   worker_connections 1024;
  5. }
  7. http {
  8.   sendfile on;
  10.   upstream api {
  11.     server nextjs-app:3000;
  12.   }
  14.   server {
  15.     listen 80 default_server;
  17.     location / {
  18.       proxy_pass http://api;
  19.       proxy_set_header Host $host;
  20.       proxy_set_header X-Real-IP $remote_addr;
  21.     }
  22.   }
  23. }

docker-compose：

  1. version: '3.8'
  3. services:
  5.   nginx:
  6.     image: nginx:latest
  7.     restart: always
  8.     depends_on:
  9.       - rust-server
  10.       - nextjs-app
  11.     volumes:
  12.       - ./nginx/nginx.conf:/etc/nginx/nginx.conf
  13.     ports:
  14.       - "80:80"
  15.     networks:
  16.       - app_network
  18.   nextjs-app:
  19.     build:
  20.       context: ./client
  21.       dockerfile: Dockerfile
  22.     container_name: nextjs-app
  23.     environment:
  24.       - CHOKIDAR_USEPOLLING=true
  25.       - DB_USER=${DB_USER}
  26.       - DB_PASS=${DB_PASS}
  27.     expose:
  28.       - "3000"
  29.     networks:
  30.       - app_network
  32.   rust-server:
  33.     build:
  34.       context: ./userserver
  35.       dockerfile: Dockerfile
  36.     container_name: rustserver-dc
  37.     expose:
  38.       - "10000"
  39.     networks:
  40.       - app_network
  41.     volumes:
  42.       - './userserver:/usr/src/userserver'
  43.       - '/usr/src/userserver/target'
  44.     environment:
  45.       - MY_LOG_LEVEL=info
  46.       - MY_LOG_STYLE=Always
  47.       - DATABASE_URL=${DATABASE_URL}
  48.       - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
  49.       - STRIPE_PUBLISH_KEY=${STRIPE_PUBLISH_KEY}
  50.       - ACCESS_TOKEN_SECRET=${ACCESS_TOKEN_SECRET}
  51.       - REFRESH_TOKEN_SECRET=${REFRESH_TOKEN_SECRET}
  52.       - RESET_PASSWORD_SECRET=${RESET_PASSWORD_SECRET}
  53.       - REDIS_URL=${REDIS_URL}
  55.   surrealdb:
  56.     image: surrealdb/surrealdb
  57.     environment:
  58.       - DB_USER=${DB_USER}
  59.       - DB_PASSWORD=${DB_PASSWORD}
  60.     expose:
  61.       - "8000"
  62.     networks:
  63.       - app_network
  64.     volumes:
  65.       - data:/var/lib/surrealdb/data
  66.     command: "start --user ${DB_USER} --pass {DB_PASSWORD} --log full file://var/lib/surreal/data"
  68. networks:
  69.   app_network:
  70.     driver: bridge
  72. volumes:
  73.   data:

Next.js首页页面：

  1. import Head from 'next/head';
  2. import axios from 'axios';
  3. import { useState, useEffect } from 'react';
  5. export default function Home() {
  6.   const [data, setData] = useState(null);
  7.   useEffect(() => {
  8.     axios.get('http://rustserver-dc:10000')
  9.       .then(res => {
  10.         setData(res.data);
  11.       })
  12.       .catch(err => {
  13.         console.log(err);
  14.       })
  15.   }, []);
  17.   console.log(data);
  18.   return (
  19.     <>
  20.       <Head>
  21.         <title>Create Next App</title>
  22.         <meta name="description" content="Generated by create next app" />
  23.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  24.         <link rel="icon" href="/favicon.ico" />
  25.       </Head>
  26.       <main>
  27.         <div>Welcome to the app</div>
  28.       </main>
  29.     </>
  30.   )
  31. }

控制台中出现的错误：

  1. Failed to load resource: net::ERR_NAME_NOT_RESOLVED rustserver-dc:10000/:1

以上为您提供的翻译内容，不包括代码部分。

英文:

I have a Docker network that is an isolated network and reverse proxy that serves the NextJS app to the localhost. Unfortunately, fetch to the backend gets failed whenever I open the browser. However, curl http://rustserver-dc:10000/ responds with the data. I do not want the DB and backend to get exposed, only is available from NextJS app when browsing.

Nginx conf:

  1. worker_processes 1;
  3. events {
  4.   worker_connections 1024;
  5. }
  7. http {
  8.   sendfile on;
  10.   upstream api {
  11.     server nextjs-app:3000;
  12.   }
  14.   server {
  15.     listen 80 default_server;
  17.     location / {
  18.       proxy_pass http://api;
  19.       proxy_set_header Host $host;
  20.       proxy_set_header X-Real-IP $remote_addr;
  21.     }
  22.   }
  23. }

docker-compose:

  1. version: &#39;3.8&#39;
  3. services:
  5.   nginx:
  6.     image: nginx:latest
  7.     restart: always
  8.     depends_on:
  9.       - rust-server
  10.       - nextjs-app
  11.     volumes:
  12.       - ./nginx/nginx.conf:/etc/nginx/nginx.conf
  13.     ports:
  14.       - &quot;80:80&quot;
  15.     networks:
  16.       - app_network
  17.  
  19.   nextjs-app:
  20.     build: 
  21.       context: ./client
  22.       dockerfile: Dockerfile
  23.     container_name: nextjs-app
  24.     environment:
  25.       - CHOKIDAR_USEPOLLING=true
  26.       - DB_USER=${DB_USER}
  27.       - DB_PASS=${DB_PASS}
  28.     expose:
  29.       - &quot;3000&quot;
  30.     networks:
  31.       - app_network
  33.   rust-server:
  34.     build:
  35.       context: ./userserver
  36.       dockerfile: Dockerfile
  37.     container_name: rustserver-dc
  38.     expose:
  39.       - &quot;10000&quot;
  40.     networks:
  41.       - app_network
  42.     volumes:
  43.       - &#39;./userserver:/usr/src/userserver&#39;
  44.       - &#39;/usr/src/userserver/target&#39;
  45.     environment:
  46.       - MY_LOG_LEVEL=info
  47.       - MY_LOG_STYLE=Always
  48.       - DATABASE_URL=${DATABASE_URL}
  49.       - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
  50.       - STRIPE_PUBLISH_KEY=${STRIPE_PUBLISH_KEY}
  51.       - ACCESS_TOKEN_SECRET=${ACCESS_TOKEN_SECRET}
  52.       - REFRESH_TOKEN_SECRET=${REFRESH_TOKEN_SECRET}
  53.       - RESET_PASSWORD_SECRET=${RESET_PASSWORD_SECRET}
  54.       - REDIS_URL=${REDIS_URL}
  56.   surrealdb:
  57.     image: surrealdb/surrealdb
  58.     environment:
  59.       - DB_USER=${DB_USER}
  60.       - DB_PASSWORD=${DB_PASSWORD}
  61.     expose:
  62.       - &quot;8000&quot;
  63.     networks:
  64.       - app_network
  65.     volumes:
  66.       - data:/var/lib/surrealdb/data
  67.     command: &quot;start --user ${DB_USER} --pass {DB_PASSWORD} --log full 
  68. file://var/lib/surreal/data&quot;
  70. networks:
  71.   app_network:
  72.     driver: bridge
  73.     
  75. volumes:
  76.   data:

Next js index page:

  1. import Head from &#39;next/head&#39;
  2. import axios from &#39;axios&#39;;
  3. import { useState, useEffect } from &#39;react&#39;;
  5. export default function Home() {
  6.   const [data, setData] = useState(null);
  7.   useEffect(() =&gt; {
  8.     axios.get(&#39;http://rustserver-dc:10000&#39;)
  9.       .then(res =&gt; {
  10.         setData(res.data);
  11.       })
  12.       .catch(err =&gt; {
  13.         console.log(err);
  14.       })
  15.   }, []);
  17.   console.log(data);
  18.   return (
  19.     &lt;&gt;
  20.       &lt;Head&gt;
  21.         &lt;title&gt;Create Next App&lt;/title&gt;
  22.         &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
  23.         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
  24.         &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
  25.       &lt;/Head&gt;
  26.       &lt;main&gt;
  27.         &lt;div&gt;Welcome to the app&lt;/div&gt;
  28.       &lt;/main&gt;
  29.     &lt;/&gt;
  30.   )
  31. }

Error occurring in console:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED rustserver-dc:10000/:1

Had the same issue when I was trying to connect two nodes in Kubernetes, and exposing only NextJS app via Nginx reverse proxy

答案1

得分: 1

如果您希望在 Docker 网络上获取数据并将其发送给客户端，您可以使用 getServerSideProps 来在页面请求时获取数据，或者使用 getStaticProps 在构建时检索数据。

  1. export async function getServerSideProps(context) {
  2.   const res = await axios.get('http://rustserver-dc:10000')
  3.   return {
  4.     props: res.data, // 作为 props 传递给页面组件
  5.   }
  6. }

如果您需要客户端在这些时间之外请求 rustserver-dc，您可以添加一个 API 路由 到 Next.js，以将请求代理到 rustserver-dc 服务。

英文:

If you want next to fetch the data on the docker network and send it to the client you could use getServerSideProps to fetch the data when the page is requested, or getStaticProps to retrieve the data build time.

  1. export async function getServerSideProps(context) {
  2.   const res = await axios.get(&#39;http://rustserver-dc:10000&#39;)
  3.   return {
  4.     props: res.data, // will be passed to the page component as props
  5.   }
  6. }

If you need the client to make requests for rustserver-dc outside of those times, you could add an API route to next that proxies the request onto the rustserver-dc service.

huangapple
  • 本文由 发表于 2023年2月19日 23:14:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/75501119.html
  • docker
  • next.js
  • nginx
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定