在 Docker 中部署 Angular 项目 - 为什么我的前端没有出现？

Question

我一直在尝试在 DigitalOcean 液滴上使用 docker 启动我的 MEAN 堆栈应用程序。我一直在运行 docker-compose up 并且可以看到我的容器已成功创建，但 Angular 前端没有出现在 {{ip_from_digital_ocean}}:4200 上。我也尝试将 dist 文件夹复制到 nginx，但没有成功。

Angular 的 Dockerfile

FROM node:12 as node
RUN mkdir -p /frontend
WORKDIR /frontend
COPY package*.json ./
RUN npm install
COPY . /frontend
EXPOSE 4200
CMD ["npm", "start"]

Node/Express 的 Dockerfile

FROM node:12
RUN mkdir -p /backend
WORKDIR /backend
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

最后是 docker-compose.yml

version: '3'

services: 
    angular:
        container_name: handi-tracker-ui
        build: ./handicap-helper
        ports:
            - '4200:4200'
    express: 
        container_name: handi-tracker-service
        restart: always
        build: ./backend
        ports: 
            - '3000:3000'
        links:
            - mongo
    mongo: 
        container_name: mongo
        image: mongo
        volumes: 
            - /mongo-volume:/data/db
        ports:
            - '27017:27017'

Answer 1

您可以创建一个简单的镜像来构建 Angular，然后使用 Docker 多阶段功能创建另一个镜像来托管您的应用程序。以下是一些 cmets 的示例。

前端

# First Stage  
FROM node:12.18.2-alpine as build
WORKDIR /usr/src/app
COPY package*.json ./

# npm install is just installing dependencies of the project.
RUN npm install

# After having your dependencies resolved, you can copy the rest of the project
COPY . .

# Then, you need to run the build script of the angular app.
RUN npm run install

# Second Stage 
FROM 'your_server_image'

# Moving files, assuming the dist output is 'dist'
COPY --from=build/usr/src/app/dist /the/server/path

# For example, if you use Nginx
# COPY --from=build/usr/src/app/dist /usr/share/nginx/html