Question 197612 in Docker Question posted in
The official documentation can be found here.

How do I create a working Docker Image from html, css, js files?

I’m completely new to Docker but for university purposes I needed to code a website (html, css, js) and eventually need to provide it as docker-compose configuration. I’ve watched countless hours of tutorials and questioned chat gpt extensively but every time I build an imagine and launch it used to get redirected to the nginx index.html page. Now after some more tries I’ve somehow managed to manually copy my index.html into the Docker image, but neither my styles.css nor my scripts.js are found when starting up a new container. I am completely lost at this point.

Dockerfile:

`FROM nginx:latest
RUN rm /etc/nginx/conf.d/default.conf

COPY nginx.conf /etc/nginx/conf.d/nginx.conf

COPY index.html /var/www/html/index.html
COPY styles.css /var/www/html/style.css
COPY scripts.js /var/www/html/script.js

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]`

nginx.conf:

`server {
    listen 80;
    server_name test.local;
    index index.html;
    root /var/www/html;
}`

and my docker-compose.yml:

`version: '3'
services:
    web:
    image: nginx:latest
    volumes:
        - "./nginx.conf:/etc/nginx/conf.d/default.conf"
        - "./code:/var/www/html"
    ports:
        - "80:80"`

Within Docker Desktop itself my logs show this error:

2023/06/30 11:09:37 [error] 20#20: *1 open() "/var/www/html/styles.css" failed (2: No such file or directory)
2023/06/30 11:09:37 [error] 21#21: *2 open() "/var/www/html/scripts.js" failed (2: No such file or directory)
Tags:

2

Answers


  1. 0

    Dockerfile:

    FROM nginx

COPY nginx.conf /etc/nginx/conf.d/

COPY index.html /var/www/html/
COPY styles.css /var/www/html/
COPY scripts.js /var/www/html/

    Explanation:

    • You shouldn’t remove default.conf.
    • Since the names of your files on your local machine are gonna match with those inside the container, you can completely omit the names of the files inside the container.
    • EXPOSE and CMD instructions are already provided in the base nginx image. Unless you wanna do something else, you generally shouldn’t be explicit there.

    docker-compose.yml:

    services:
  web:
    image: nginx
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/:ro
      - ./code:/var/www/html
    ports:
      - 80:80

    Explanation

    • version declaration can be omitted since docker-compose version 3.
    • The nginx config has been made read-only inside the container (which is pretty much a common norm).

    nginx.conf looks fine.

    Login or Signup to reply.
  2. 0

    With your setup, the Dockerfile is completely ignored. You’re using the unmodified nginx image, and then trying to inject files into the container using volumes:. It’s worth noting that the file paths in the Dockerfile and Compose file don’t match: the volumes: hide the image’s /var/www/html directory and replace it with the host’s ./code directory, but the Dockerfile copies files out of the build-context directory and not a subdirectory.

    You need to tell Compose to build: the image; you do not need to specify the image: name unless you’re planning to push the image somewhere (and you definitely should not set image: nginx which will cause the base image to be overwritten). You should remove the volumes: so that you’re using the files actually built into the image.

    version: '3.8' # most recent version supported by all Compose implementations
services:
  web:
    build: .  # add
    ports:
      - '80:80'
    # image: registry.example.com/myimage  but only if you're planning to push it
    # no volumes:
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search