Nginx Question posted in
The official documentation can be found here.

How to add CSS & JS to Docker image – Nginx

I’ve got 3 scripts

index.html style.css and script.js

$(document).mousemove(function (event) {
  $('.torch').css({
    'top': event.pageY,
    'left': event.pageX
  });
});
html {
  height: 100%;
}

body {  
  height: 100%;
  background: url("https://wallpapercave.com/wp/6SLzBEY.jpg") no-repeat left top;
  background-size: cover;  
  overflow: hidden;
    
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.text h1{
  color: #011718;
    margin-top: -200px;
  font-size: 15em;
    text-align: center;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7), -10px 10px 0px rgba(0,0,0,0.4), -15px 15px 0px rgba(0,0,0,0.2);
    font-family: monospace;
  font-weight: bold;
}

.text h2{
  color: black;
  font-size: 5em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    text-align: center;
    margin-top: -150px;
    font-family: monospace;
  font-weight: bold;
}
.text h3{
  color: white;
    margin-left: 30px;
  font-size: 2em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    margin-top: -40px;
    font-family: monospace;
  font-weight: bold;
}
.torch {
  margin: -150px 0 0 -150px;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 9999em #000000f7;
    opacity: 1;
  border-radius: 50%;
  position: fixed;
    background: rgba(0,0,0,0.3);
  
  &:after {
    content: '';
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    box-shadow: inset 0 0 40px 2px #000,
            0 0 20px 4px rgba(13,13,10,0.2);  
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
<link rel="stylesheet" href="style.css">
  <h1>404</h1>
    <h2>Hello Foo</h2>
  <h3>Sorry you're lost.. Come back later</h3>
</div>
<div class="torch"></div>

All in a src directory.

I’m trying to bundle this into a docker image in order to create a 404 error page.
I able to build the image and it renders the index.html page but the CSS isn’t loading and being new to this I’m not sure what I’m doing wrong.

This is my dockerfile.

FROM nginx:stable
COPY src/ /usr/share/nginx/html
Tags:

2

Answers


  1. 0

    Set the /usr/share/nginx/html directory to **VOLUME: ** VOLUME ["/usr/share/nginx/html"] in docker and run container with -v ./src:/usr/share/nginx/html option

    Login or Signup to reply.
  2. 0

    The problem is not with docker but the html. You haven’t included your script.js and the html you posted is just a fragment of a page, a not full html5 page

    Assuming you have this directory structure, it will work once you include your js

    ./Dockerfile
./src
./src/index.html
./src/script.js
./src/style.css

    Just run

    docker build -t demo-nginx .
docker run -it --rm -d -p 8080:80 --name demonginx demo-nginx && docker attach demonginx
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search