You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何编写脚本自动化启动Angular与Django后端Docker容器

我来帮你搞定这个自动化启动的问题!最简洁可靠的方式是用一个统一的Docker Compose配置文件来管理你的Angular前端和Django后端容器,这样你只需要一条命令就能同时启动两者,还能自动处理容器间的网络通信和启动依赖。

步骤1:整合Docker Compose配置

把你的前端和后端服务都放到同一个docker-compose.yml文件里,Compose会自动创建共享网络,让前端容器能直接访问后端服务。下面是完整的配置:

version: '3'
services:
  # Django后端服务
  web:
    build: ./django-backend  # 替换为你的Django项目实际目录路径
    command: bash -c "python manage.py makemigrations && python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
    container_name: app_service
    volumes:
      - ./django-backend:/app_service  # 本地代码映射到容器内,方便开发调试
    ports:
      - "8000:8000"
    networks:
      - app-network

  # Angular前端服务
  angular:
    build: ./angular-frontend  # 替换为你的Angular项目实际目录路径
    container_name: av-app-multistage
    ports:
      - "80:80"  # Nginx默认80端口,映射到本地80端口方便访问
    depends_on:
      - web  # 指定依赖后端服务,Compose会优先启动后端
    networks:
      - app-network

# 定义共享网络,确保两个容器能互相通信
networks:
  app-network:
    driver: bridge

步骤2:调整Angular的API访问地址

因为两个容器在同一个Compose网络里,你可以直接用后端服务名web来访问API(不用localhost或IP)。打开Angular项目的src/environments/environment.ts(生产环境用environment.prod.ts),修改API地址:

export const environment = {
  production: false,
  apiUrl: 'http://web:8000/api/'  // 用服务名代替localhost
};

这样Angular应用就能在容器内正确访问到Django后端了。

步骤3:一键启动所有服务

在存放这个docker-compose.yml的目录下,运行以下命令:

# 第一次运行或修改Dockerfile后,构建镜像并启动容器
docker-compose up --build

# 后续启动已构建好的镜像,直接用
docker-compose up

这条命令会自动完成:

  • 构建(如果需要)Django和Angular的镜像
  • 先启动app_service后端容器
  • 再启动av-app-multistage前端容器
  • 自动配置好两者的网络通信

如果需要后台运行容器,添加-d参数:

docker-compose up -d

停止服务时运行:

docker-compose down

备选方案:Shell脚本启动(不推荐)

如果你一定要用Shell脚本而非Docker Compose,也可以实现,但这种方式需要手动处理网络和启动顺序,可靠性较差。示例脚本如下:

#!/bin/bash

# 启动Django后端容器
echo "启动Django后端容器..."
docker run -d --name app_service -p 8000:8000 -v $(pwd)/django-backend:/app_service 你的Django镜像名

# 简单延迟等待后端服务启动(不够精准,仅作示例)
sleep 10

# 启动Angular前端容器,并连接到后端网络
echo "启动Angular前端容器..."
docker run -d --name av-app-multistage -p 80:80 --network container:app_service 你的Angular镜像名

注意:需要替换脚本中的镜像名称,且--network方式不如Compose的网络管理灵活,因此更推荐使用前面的Docker Compose方案。

内容的提问来源于stack exchange,提问作者aditya singh

火山引擎 最新活动