0

I have installed a simple vue project via cli. I've created Dockerfile and docker-compose.yml file.

But after docker-compose build && docker-compose up I get 404 page

Project Structure

  • simple-chat
    • docker
      • docker-compose.yml
      • Dockerfile
    • public
    • src
    • package.json

the commands

cd docker 
docker build -t simple-chat .. 
winpty docker run -it -p 8080:8080 --rm --name simple-chat simple-chat

opens http://localhost:8080 correctly

The commands

docker-compose build --no-cache 
docker-compose up

returns 404 page in browser

What I did wrong ?

Dockerfile

FROM node:lts-alpine
RUN npm install -g http-server

WORKDIR /app/simple-chat

COPY ../package*.json ./
RUN yarn install
COPY ../ .
RUN yarn build

EXPOSE 8080
CMD [ "http-server", "dist", "--host", "0.0.0.0"]

docker-compose.yml

version: '3.5'
services:

  simple-chat:
    build:
      context: ../
      dockerfile: docker/Dockerfile
    image: simple-chat
    ports:
      - '8080:8080'
    volumes:
      - ../:/app/simple-chat
Marine Gasparyan
  • 63
  • 7
  • by using `volumes` you're not containerizing the application, as you want to run from a local folder, and compose, if only one service, you don't even need to use it, right? the `docker run` would ultimately run it... – balexandre Jan 10 '21 at 00:00

1 Answers1

1

Answer

You have mistaken the http-server path on Dockerfile

CMD [ "http-server", "/app/simple-chat/dist"]

Remove the volumes: from compose if you want containerize app (you copy everything on Dockerfile) otherwise remove the COPY from Dockerfile and set volumes:

Consideration

  1. Is possible to build a vuecli app without vuecli but you know some consideration see this stackoverflow post.
Max
  • 6,821
  • 3
  • 43
  • 59
  • 1
    the OP is probably running `docker` under Windows, see e.g. [this SO question](https://stackoverflow.com/q/48623005/9164010) which deals with winpty. – ErikMD Jan 10 '21 at 18:46
  • Also, you only said that `docker-compose` is not necessary, but the crux of the issue raised by the OP is probably the unexpected `volumes:` field, which should be removed, as pointed out by [@balexandre's comment](https://stackoverflow.com/questions/65648243/dockerize-vue-project/65656891#comment116070088_65648243) – ErikMD Jan 10 '21 at 18:48
  • 1
    Finally, note that even if one only has one container, `docker-compose` can still be handy to easily run the container with a single command (`docker-compose up`), avoiding a long list of CLI arguments and relying on a "declarative spec" (docker-compose.yml): see e.g. [this SO answer](https://stackoverflow.com/a/65570951/9164010) where I gave a pointer to a tool that can *automate* the generation of the docker-compose.yml file. – ErikMD Jan 10 '21 at 18:51
  • @ErikMD I updated the answer with your suggestions – Max Jan 10 '21 at 21:13
  • OK! but it doesn't seem you actually took them into account? (regarding `docker-compose` :) – ErikMD Jan 10 '21 at 23:31