如何在Minikube集群上用Kubernetes部署Strapi FoodAdvisor并解决跨端URL调用问题

你当前配置的http://foodadvisor-api是Kubernetes集群内部的Service DNS域名，仅能被集群内部的Pod解析访问：

• Next.js服务端渲染逻辑运行在集群内的前端Pod中，所以可以正常拉取后端数据完成页面渲染
• 媒体资源的访问链接会直接返回给集群外的用户浏览器，浏览器无法解析这个内部域名，因此请求失败报错

方案1：双环境变量配置（本地测试快速生效） #

利用Next.js的环境变量规则，分别为服务端和客户端配置不同的后端访问地址：

1. 先执行命令获取后端Service的本地访问地址：

minikube service foodadvisor-api --url

该命令会返回类似http://192.168.49.2:31001的外部访问地址，记为PUBLIC_API_URL
2. 修改前端Deployment配置，新增两个环境变量：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: foodadvisor-frontend
spec:
  selector:
    matchLabels:
      app: foodadvisor
      component: frontend
  template:
    metadata:
      labels:
        app: foodadvisor
        component: frontend
    spec:
      containers:
      - name: foodadvisor-client
        image: heraldofsolace/foodadvisor-client
        ports:
          - containerPort: 3000
        env:
          # 仅服务端可用，用内部域名拉取数据
          - name: API_URL
            value: "http://foodadvisor-api"
          # NEXT_PUBLIC_前缀的变量会暴露给客户端，生成媒体链接时用这个外部地址
          - name: NEXT_PUBLIC_API_URL
            value: "替换为你上面拿到的PUBLIC_API_URL"

3. 调整前端代码逻辑：SSR拉取数据时用process.env.API_URL，生成前端页面里的媒体资源链接时用process.env.NEXT_PUBLIC_API_URL即可。

方案2：Next.js Rewrite代理请求（无需暴露后端服务） #

不需要将后端Service设置为LoadBalancer，也不用维护两套域名配置：

1. 在Next.js项目的next.config.js中添加rewrite规则：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://foodadvisor-api/:path*' // 内部代理到后端服务
      }
    ]
  }
}

2. 前端统一把后端请求地址前缀改为/api即可，所有请求都会先发到前端服务，集群内部的前端Pod会自动代理到后端服务，浏览器不需要直接访问后端域名，不会出现解析问题。

方案3：Ingress统一域名（更贴近生产环境的通用方案） #

无需配置两套地址，通过Ingress实现集群内外用同一个域名访问后端：

1. 先开启Minikube的Ingress插件：

minikube addons enable ingress

2. 创建Ingress规则，分别为前后端配置访问域名，比如后端用api.foodadvisor.local，前端用foodadvisor.local，指向对应的Service。
3. 本地修改hosts文件，将上面两个域名都指向Minikube的Ingress Controller IP（可通过kubectl get ingress获取地址）。
4. 前端统一将后端地址配置为http://api.foodadvisor.local即可，集群内部的Pod和外部浏览器都可以正常解析这个域名。

内容的提问来源于stack exchange，提问作者Aniket Bhattacharyea