How to build docker file for a VueJs application-CodePudding

I am new in docker. I've built an application with VueJs2 that interacts with an external API. I would like to run the application on docker.

Here is my docker-compose.yml file

version: '3'

services:

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

Here is my 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"]

Here is the building command I run to build my image an container.

docker-compose up -d

The image and container is building without error but when I run the container it stops immediately. So the container is not running. Are the DockerFile and compose files set correctly?

CodePudding user response：

First of all you run npm install and yarn install, which is doing the same thing, just using different package managers. Secondly you are using CMD ["node"] which does not start your vue application, so there is no job running and docker is shutting down.

For vue applicaton you normally want to build the app with static assets and then run a simple http server to serve the static content.

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" ]

Your docker-compose file could be as simple as

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

CodePudding user response：

I'm not sure about the problem but by using command: tail -f /dev/null in your docker-compose file , it will keep up your container so you could track the error within it and find its problem. You could do that by running docker exec -it <CONTAINER-NAME> bash and track the error logs in your container.

version: '3'

services:

    ew_cp:
        image: vuejs_img
        container_name: ew_cp
        build:
            context: .
            dockerfile: Dockerfile
        volumes:
            - '.:/app'
            - '/app/node_modules'
    
        command: tail -f /dev/null

        ports:
            - '8080:8080'

In your Dockerfile you have to start your application e.g. npm run start or any other scripts that you are using for running your application in your package.json.