How to build docker file for a VueJs application

Question

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?

oshell · Accepted Answer · 2021-11-04 15:05:10Z

10

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

to run the service from docker-compose use command property in you docker-compose.yml.

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

edited Nov 4, 2021 at 15:05

answered Nov 2, 2021 at 9:22

oshell

9,1511 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fury Over a year ago

Thank you. It is working but when I add RUN yarn serve the image won't get created unless I remove the RUN yarn serve and then I exec into the built container and RUN yarn serve manually. Is there anyway to get this fixed?

oshell Over a year ago

you can also run the service via docker-compose. I edited my answer to reflect that

DevChris Over a year ago

Sidenote for Mac M1 Users: If you get an Error something like exec /usr/local/bin/docker-entrypoint.sh: exec format error CHANGE your FROM:. For Example if you defined FROM: node:14-alpine, extend it to FROM: --platform=linux/amd64 node:14-alpine. The reason is the codeset that docker uses. If you have more questions, please tag me so I can read it ;)

Narges Pms · Accepted Answer · 2021-11-02 09:29:42Z

1

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.

edited Nov 2, 2021 at 9:29

answered Nov 2, 2021 at 9:21

Narges Pms

5502 silver badges16 bronze badges

2 Comments

oshell Over a year ago

you should not run npm run dev in docker, if you want to use the file for production deployment. this would just be useful to have streamlined development environment. but even then it's better to use env file to check how to run the service.

Narges Pms Over a year ago

I edited it, but I meant for the development, and generally, the main script for running the app was my point.

Collectives™ on Stack Overflow

How to build docker file for a VueJs application

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related