我有一个应用程序: 客户端在反应。 Django 中的服务器。
该应用程序是容器化的:
backend-container
和frontend-container
如下(docker-compose.yaml
):
version: '3.8'
services:
backend:
build:
context: ./backend
dockerfile: Dockerfile
args:
POSTGRES_USER: ${POSTGRES_USER}
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
POSTGRES_HOST: ${POSTGRES_HOST}
SECRET_KEY: ${SECRET_KEY}
DEBUG: ${DEBUG}
CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
image: backend
container_name: backend-container
ports:
- "8000:8000"
environment:
POSTGRES_USER: ${POSTGRES_USER}
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
POSTGRES_HOST: ${POSTGRES_HOST}
SECRET_KEY: ${SECRET_KEY}
DEBUG: ${DEBUG}
CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
frontend:
build:
context: ./frontend
dockerfile: Dockerfile
args:
REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
image: frontend
container_name: frontend-container
ports:
- "3000:3000"
environment:
NODE_ENV: production
REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
该应用程序托管在 EC2 实例上,使用 github 操作进行部署: 名称:我的工作流程
on: workflow_dispatch
jobs:
first-job:
runs-on: self-hosted
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Build the Docker backend image
env:
POSTGRES_USER: ${{ secrets.POSTGRES_USER }}
POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
POSTGRES_HOST: ${{ secrets.POSTGRES_HOST }}
SECRET_KEY: ${{ secrets.SECRET_KEY }}
DEBUG: ${{ secrets.DEBUG }}
CORS_ALLOWED_ORIGIN: ${{ secrets.CORS_ALLOWED_ORIGIN }}
REACT_APP_ALLOWED_HOST: ${{ secrets.REACT_APP_ALLOWED_HOST }}
run: |
sudo docker-compose -p fullstack down
sudo POSTGRES_USER=$POSTGRES_USER POSTGRES_PASSWORD=$POSTGRES_PASSWORD POSTGRES_HOST=$POSTGRES_HOST SECRET_KEY=$SECRET_KEY DEBUG=$DEBUG CORS_ALLOWED_ORIGIN=$CORS_ALLOWED_ORIGIN REACT_APP_ALLOWED_HOST=$REACT_APP_ALLOWED_HOST docker-compose -p fullstack up --build -d
我可以看到容器正在我的 EC2 实例上运行。
我在 EC2 实例上配置了 nginx:
server {
listen 80;
server_name _;
location / {
proxy_pass http://172.20.0.3:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 90;
proxy_connect_timeout 90;
proxy_redirect off;
}
}
172.20.0.3
是我的frontend-container
的本地网络地址。
我的react-app当前尝试通过backend:8000(后端是我的docker-compose中的服务名称)从代码访问我的后端容器,如下所示:
const App = () => {
const [books, setBooks] = useState([]);
useEffect(() => {
fetch(http://${process.env.REACT_APP_ALLOWED_HOST}:8000/demoapp/allBooks)
.then(response => response.json())
.then(data => setBooks(data.books)) // Access the 'books' property of the response
.catch(error => console.error('Error fetching data:', error));
}, []);
...
我的 API 请求
http://backend:8000/demoapp/allBooks
就这样失败了。
我可能错过了 nginx 配置的一些东西,但我不知道到底是什么。
尝试在 nignx 配置中添加类似的内容:
server {
listen 80;
server_name your.domain.com;
location / {
# Forward requests to the frontend
proxy_pass http://172.20.0.3:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /api/ {
# Forward API requests to the backend
proxy_pass http://backend-container:8000; # Use container name for internal Docker communication
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}