如何为 VueJs 应用程序构建 docker 文件

Question

我是码头工人的新人。我使用 VueJs2 构建了一个与外部 API 交互的应用程序。我想在 docker 上运行该应用程序。

这是我的 docker-compose.yml 文件

version: '3'

services:

    ew_cp:
        image: vuejs_img
        container_name: ew_cp
        build:
            context: .
            dockerfile: Dockerfile
        volumes:
            - '.:/app'
            - '/app/node_modules'
        ports:
            - '8080:8080'

这是我的 Dockerfile：

FROM node:14.17.0-alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
RUN yarn install
COPY . .
EXPOSE 8080
CMD ["node"]

这是我运行的用于将图像构建为容器的构建命令。

docker-compose up -d

图像和容器正在构建，没有错误，但是当我运行容器时，它立即停止。所以容器没有运行。DockerFile 和 compose 文件设置是否正确？

Answer 1

首先，运行npm install和yarn install，它做同样的事情，只是使用不同的包管理器。其次，您使用CMD ["node"]的不会启动您的 vue 应用程序，因此没有作业正在运行并且 docker 正在关闭。

对于 vue 应用程序，您通常希望使用静态资源构建应用程序，然后运行一个简单的 http 服务器来提供静态内容。

FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy 'package.json' to install dependencies
COPY package*.json ./
# install dependencies
RUN npm install
# copy files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

你的docker-compose文件可以很简单

version: "3.7"

services:
  vue-app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: vue-app
    restart: always
    ports:
      - "8080:8080"
    networks:
      - vue-network
networks:
  vue-network:
    driver: bridge

要从 docker-compose 运行服务，请使用command您的属性docker-compose.yml。

services:
  vue-app:
    command: >
      sh -c "yarn serve"