django nuxt 应用程序的 Nginx 配置，docker 托管在 ec2 上

Question

我有一个 dockerized 应用程序，它在我的主机上的开发模式下运行良好。我试图弄清楚如何使用启动实例时创建的默认 IP 地址在 ec2 上托管我的应用程序。

我的文件夹结构如下。

backend
|---projectname
|---Dockerfile
|---requirements.txt 
|---wait-for-it.sh

config/nginx
|---app.conf

frontend
|---nuxt folders 
|---Dockerfile

这是我当前正在使用的 docker compose 文件

docker-compose.yml

version: '3.4'

services:
db:
    restart: always
    image: postgres
    volumes:
    - pgdata:/var/lib/postgresql/data  
    env_file: .env

    ports:
    - "5432:5432"
    expose:
    - 5432  

redis:
    restart: always
    image: redis
    volumes:
    - redisdata:/data


django:
    build:
    context: ./backend
    env_file: .env

    command: >
    sh -c  "./wait-for-it.sh db:5432 && 
            cd autobets && python manage.py collectstatic --noinput &&
            gunicorn --workers=2 --bind=0.0.0.0:8000 autobets.wsgi:application" 
    ports:
    - "8000:8000"
    volumes:
    - ./backend:/app
    depends_on:
    - db
    restart: on-failure


nuxt:
    build:
    context: ./frontend
    environment:
    - API_URI=http://django:8000/api

    command: bash -c "npm install && npm run dev"
    volumes:
    - ./frontend:/app
    ports:
    - "3000:3000"
    depends_on:
    - django
    - redis

volumes:
  pgdata:
  redisdata:

config/nginx/app.config

upstream django {
ip_hash;
server django:8000;
}

upstream nuxt {
ip_hash;
server nuxt:3000;
}

server {
location ~ /(api|admin|static)/ {
    proxy_pass http://django;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Host $host;
}
location / {
    proxy_pass http://nuxt;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Host $host;
}
listen 8000;
server_name localhost;
}

如果我的 ec2 域名指针是 ec2-52-204-122-132.compute-1.amazonaws.com 如何在我的应用中设置 nginx 以接受与我的应用前端的 http 连接？

在后端 localhost:8000/admin 是我的管理页面，我也想使用 ec2 域名访问它。

更改配置的最佳方法是什么，以便在添加域名指针后推送我的应用程序时，我可以访问托管在 ec2 上的应用程序？

我一直在阅读文档，但找不到任何有关在 ec2 上运行的 dockerized django vue 类型应用程序的有用信息。

Answer 1

首先，您需要确保附加到您的盒子的安全组对于 NGinx 侦听的端口上的传入连接是开放的

对于您想要放置在 NGinx 配置上的每个容器，您需要找到它们的执行方式：

docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' container_name_or_id

NGinx 不在容器内，docker-compose 所以，nginx.conf

upstream django {
    ip_hash;
    server <container IP>:8000;     # <-- Change this, with container IP
}

upstream nuxt {
    ip_hash;
    server <container IP>:3000;     # <-- Change this, with container IP
}

server {
    location ~ /(api|admin|static)/ {
        proxy_pass @django               # <-- Change this, with container IP
        proxy_pass <container IP>:8000;  # <-- OR Change this, with container IP
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Host $host;
    }

    location / {
        proxy_pass @nuxt                # <-- Change this, add port
        proxy_pass <container IP>:3000  # <-- OR Change this, add port
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Host $host;
    }

    listen 8000;    # <-- Change port number, django already use this host port
    server_name localhost ec2-52-204-122-132.compute-1.amazonaws.com;   # <-- change this line, add EC2 public domain
}

docker-compose.yml

version: '3.4'

services:
    db:
        restart: always
        image: postgres
        volumes:
            - pgdata:/var/lib/postgresql/data
        env_file: .env

        ports:
            - "5432:5432"
        expose:
            - 5432
        networks:           # <-- Add this
            - random_name   # <-- Add this

    redis:
        restart: always
        image: redis
        volumes:
            - redisdata:/data
        networks:           # <-- Add this
            - random_name   # <-- Add this

    django:
        build:
        context: ./backend
        env_file: .env

        command: >
            sh -c  "./wait-for-it.sh db:5432 &&
                    cd autobets && python manage.py collectstatic --noinput &&
                    gunicorn --workers=2 --bind=0.0.0.0:8000 autobets.wsgi:application"
        ports:
            - "8000:8000"
        volumes:
            - ./backend:/app
        depends_on:
            - db
        restart: on-failure
        networks:           # <-- Add this
            - random_name   # <-- Add this


    nuxt:
        build:
        context: ./frontend
        environment:
            - API_URI=http://django:8000/api # <-- Wrong
            # From you Javascript on the client point of view,
            # you will request the public server, not the internal name of
            # you backend inside a container, that the public will never see
            - API_URI=http://ec2-52-204-122-132.compute-1.amazonaws.com/api # <-- Right
        command: bash -c "npm install && npm run dev"
        volumes:
            - ./frontend:/app
        ports:
            - "3000:3000"
        depends_on:
            - django    # <-- will become useless if change API_URI=
            - redis     # <-- bad design
        networks:           # <-- Add this
            - random_name   # <-- Add this

volumes:
  pgdata:
  redisdata:
networks:           # <-- Add this
  - random_name:    # <-- Add this wanto make sure container can communicate

AWS 上的安全组应该在您将用于侦听 NGinx 的端口上打开，主机 8000 已被 django 使用，因此请在上使用另一个

从应用架构 POV 来看，您的后端应该使用 Redis 来处理缓存，而不是前端。复杂性或后端响应缓存应该缓存在控制器的某个后端。您的客户端应该只缓存统计资产。但是你来这里是为了让你在服务器上工作，而不是说archi。