NextJS+Laravel+Nginx+Docker环境下getServerSideProps无法调用API问题

问题原因 #

1. getServerSideProps 运行在NextJS容器的服务端环境，请求走Docker内部网桥，不使用你本机的hosts配置
2. 你当前请求的地址是http://laravel/api/events/1，而laravel容器仅暴露9000端口运行php-fpm服务，没有监听80端口提供HTTP服务，所有Laravel的HTTP请求都需要经过Nginx容器转发处理
3. 你的Nginx容器才是统一的HTTP入口，监听80端口，且配置了local.api.hike.com的server块对应Laravel后端服务

解决方案（二选一即可） #

方案1：直接请求Nginx服务，指定Host头

同属app-network网络的容器可以直接通过服务名互相访问，请求时携带Host头告诉Nginx要匹配的站点即可：

export async function getServerSideProps(context) {
    const eventDetails = await Axios.get('http://nginx/api/events/1', {
        headers: {
            'Host': 'local.api.hike.com'
        }
    })
    .then(result => {
        console.log('result', result);
        return result.data.data
    })
    .catch(error => {
        console.log('error', error);
        return {}
    });
    // 注意补充返回props的逻辑
    return {
        props: { eventDetails }
    }
}

方案2：给NextJS容器添加域名映射，前后端统一请求地址

修改docker-compose.yml中的nextjs服务配置，添加extra_hosts参数，把local.api.hike.com指向Nginx容器：

nextjs:
  build: ./hike-frontend
  container_name: nextjs
  volumes:
    - ./hike-frontend:/usr/app
    - /app/node_modules
    - /app/.next
  restart: always
  networks:
    - app-network
  # 新增以下配置
  extra_hosts:
    - "local.api.hike.com:nginx"

修改后重启容器，就可以在getServerSideProps里直接用和客户端一致的地址请求，无需区分运行环境：

const eventDetails = await Axios.get('http://local.api.hike.com/api/events/1')

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