Question

我想使用 docker-compose 将一个 worker (FastApi) 和一个 web (react) 容器部署到 Heroku。在本地运行，一切正常。但是在 Heroku 上，前端无法到达后端。

Dockerfile.worker

FROM tiangolo/uvicorn-gunicorn-fastapi:python3.7

WORKDIR /app
COPY app .
COPY requirements.txt ./requirements.txt

ENV IS_IN_DOCKER=true

RUN pip3 install -r requirements.txt
RUN pip3 install -r ./custom_model/custom_requirements.txt

CMD uvicorn main:app --host 0.0.0.0 --port 8800

Dockerfile.web

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

docker-compose.yml（前端使用来自 heroku 的 Port Env 变量，在本地我有一个 PORT=80 的 .env 文件）

version: '3.7'
services:
  ml-starter-frontend:
    depends_on:
      - ml-starter-backend
    container_name: ml-starter-frontend
    build:
      context: ./frontend
      dockerfile: Dockerfile.web
    ports:
      - '${PORT}:3000'
    restart: always
   ml-starter-backend:
     container_name: ml-starter-backend
     build:
       context: ./backend
       dockerfile: Dockerfile.worker
     restart: always

React src 中的 setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api/*',
        createProxyMiddleware({
            target: 'http://ml-starter-backend:8800',
            changeOrigin: true,
        })
    );
};

在 React 前端调用后端

export const getConfiguration = () => async (dispatch) =>{

    const {data} = await axios.get('/api/configs')
    dispatch({type: GET_CONFIGURATION, payload: data })

}

在本地运行调用有效： Locally

部署到heroku：

heroku container:push --recursive --app {appName}
heroku container:release worker --app {appName}
heroku container:release web --app {appName}

前端无法访问后端： Heroku

Heroku Worker (FastAPI) 日志

2021-04-09T10:10:55.322684+00:00 app[worker.1]: INFO:     Application startup complete.
2021-04-09T10:10:55.325926+00:00 app[worker.1]: INFO:     Uvicorn running on http://0.0.0.0:8800 (Press CTRL+C to quit)

Heroku Web (React) 日志

2021-04-09T10:11:21.572639+00:00 app[web.1]: [HPM] Proxy created: /  -> http://ml-starter-backend:8800

.....

2021-04-09T10:25:37.404622+00:00 app[web.1]: [HPM] Error occurred while trying to proxy request /api/configs from {appName}.herokuapp.com to http://ml-starter-backend:8800 (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)

如果可能的话，我想避免使用 nginx，因为我已经花了 2 个小时试图让它与 prod 构建中的代理一起工作。有没有人有使用 heroku 和 docker-compose 的经验，可以给我一个提示如何解决这个问题？

Answer 1

对于有类似问题的每个人..实际上我最终找到了一个解决方法..我制作了一个包含后端和前端的dockerfile..并将其作为网络应用程序部署到Heroku..

在我的搜索过程中，我发现 Heroku 工作人员并不真正适合 HTTP 场景。如果我理解正确，它们是用于从队列中读取消息.. https://devcenter.heroku.com/articles/background-jobs-queueing

Answer 2

是的，我也做了类似 Loki34 所做的事情。我的方法是运行 npm run build，然后让 FastAPI 提供这些构建文件。就像 Loki34 所说的那样，这是一种变通方法，这意味着在 Docker 容器中部署前端和后端时，它可能不是最好的方法。无论如何，那些对我是如何做到的感到好奇的人可以查看我所做的这个应用程序：https://github.com/yxlee245/app-iris-ml-react-fastapi

在 Heroku 上使用 Docker-Compose 部署 React 前端、FastApi 后端

2 个答案: