如何通过docker-compose部署MEAN堆栈应用程序？

Question

自从我尝试使用docker容器部署我的角度应用以来已经三天了。我不断地一点一点地调整设置，我一次又一次陷入同样的​​陷阱。我无法完全构建该应用程序。因为总是有一个黑羊服务试图逃离服务群。我记录了我遵循的所有构建步骤，希望有人能找到弹imp我的应用程序的方法。

我的应用程序由三项服务组成：

1. Angular前端（Nginx + Angular）
2. 后端API（NodeJs + Express）
3. 数据库（MongoDB）

所有过程：

[1）Docker撰写方式

我具有以下上下文：

|frontend
||package.json
||nginx.conf
||frontend.dockerfile
||Jumble
|backend
||package.json
||backend.dockerfile
||server.js
||Jumble
|docker-compose.yml

Docker-compose.yml文件：

services:
  frontend:
    container_name: clockmachine-frontend
    build:
      context: ./frontend
      dockerfile: clockmachine-frontend.dockerfile
    ports:
      - "4200:4200"

  database:
    container_name: mongo
    image: mongo
    ports:
    - "27017:27017"

  backend:
    container_name: clockmachine-api
    image: clockmachine-api
    build:
      context: ./backend
      dockerfile: clockmachine-api.dockerfile
    environment:
      - NODE_ENV=production
    ports:
      - "3000:3000"

我的前端Dockerfile：

#### Stage 0, Build Angular frontend
FROM node:latest as build
WORKDIR /app
COPY package.json package.json
RUN npm install
COPY . .
RUN npm run build -- --prod

####Stage 1, Build Nginx backend
FROM nginx:alpine
COPY --from=build /app/dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf文件：

server {
  listen 0.0.0.0:80;
  listen [::]:80;
  default_type application/octet-stream;
  client_max_body_size  256M;

  root /usr/share/nginx/html/pointeuse;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

后端dockerfile：

#### Stage 0, Build API
FROM node:alpine
LABEL author="Olivier D'Ancona"
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node","server.js"]

我们在这里，

我尝试像这样在主文件夹中构建我的应用程序：

sudo docker-compose build
sudo docker-compose up

至此，该应用程序的构建没有问题。我控制了我的服务状态：

• http://localhost:27017/与Mongo数据库实例连接（似乎您正在尝试通过本机驱动程序端口上的HTTP访问MongoDB。）>
• http://localhost:3000/api/也正常工作（（我已成功连接到mongo的终端连接）>
• http://localhost:8080无法连接（Firefox无法在localhost：8080建立与服务器的连接。）>
• http://localhost:8080/student这是我的应用程序的静态路由（欢迎使用nginx！如果您看到此页面，则说明nginx Web服务器已成功安装并运行。需要进一步的配置。）

所以我无法在运行前端的情况下构建我的应用程序。

所以我试图独自构建和运行前端：

我将目录更改为文件夹/ frontend并输入：

sudo docker build -t mytag -f clockmachine-frontend.dockerfile .
sudo docker run -p 8080:80 mytag
构建过程大约需要10分钟，并且已成功完成。这次到达http://localhost:8080时，应用程序正常运行。
这似乎是端口问题，因为我没有在前端使用EXPOSE 4200，因为上次我尝试将其崩溃，而当我尝试EXPOSE 4200:80时，结果与我所描述的相同。
我不知道如何调试此问题，我希望任何人都可以提供有用的指南。

如何完全构建我的应用程序？我忘记了什么？我应该在配置文件中进行哪些调整？

自从我尝试使用docker容器部署我的角度应用以来已经三天了。我不断地一点一点地调整设置，我一次又一次陷入同样的​​陷阱。我无法...

这是一个适合您的博客：Angular 9 with Docker Step by Step example

Answer 1

这是一个适合您的博客：Angular 9 with Docker Step by Step example