CODEWITHSUNDEEP
dockernginxflask
tree em
tree em

Reputation: 21781

deploy to docker , cannot load stylesheet and javascript

Here is my docker-compose.yml

version: '2'

services:
  web:
    restart: always
    build: ./web
    expose:
      - "8000"
    volumes:
      - /usr/src/app/web/project/static
    command: /usr/local/bin/gunicorn -w 2 -b :8000 project:app
    depends_on:
      - postgres

  nginx:
    restart: always
    build: ./nginx
    ports:
      - "80:80"
    volumes:
      - /www/static
    volumes_from:
      - web
    depends_on:
      - web

  data:
    image: postgres:9.6
    volumes:
      - /var/lib/postgresql
    command: "true"

  postgres:
    restart: always
    build: ./postgresql
    volumes_from:
      - data
    expose:
      - "5432"

When I deployed to docker container, the site has no style css, js loaded correctly, anyone please help ?

UPDATED

# Define the parameters for a specific virtual host/server
server {
    # Define the directory where the contents being requested are stored
    # root /usr/src/app/project/;

    # Define the default page that will be served If no page was requested
    # (ie. if www.ezloan.amkcambodia.com is requested)
    # index index.html;

    # Define the server name, IP address, and/or port of the server
    listen 80;
    # server_name xxx.yyy.zzz.aaa

    # Define the specified charset to the “Content-Type” response header field
    charset utf-8;

    # Configure NGINX to deliver static content from the specified folder
    location /static {
        alias /usr/src/app/web/project/static;
    }

    # Configure NGINX to reverse proxy HTTP requests to the upstream server (Gunicorn (WSGI server))
    location / {
        # Define the location of the proxy server to send the request to
        proxy_pass http://web:8000;

        # Redefine the header fields that NGINX sends to the upstream server
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # Define the maximum file size on file uploads
        client_max_body_size 5M;
        client_body_buffer_size 5M;
    }
}

Upvotes: 0

Views: 1823

Answers (1)

shahaf
shahaf

Reputation: 4983

try to change the volumes directive on the web to

volumes:
   - /usr/src/app/web/project/static:<path of app on the container>

regard the Nginx

where the static files stored? in the web container or the nginx? if they stored in the nginx you need to point the alias to the location on the nginx container, where you mount your nginx's volumes like 

volumes:
    - /usr/src/app/web/project/static:/www/static

and in nginx conf use 

location /static {
    alias /www/static;
}

if the static stored in the web container than nginx need to redirect the call to the web, thus location /static is not needed

Upvotes: 2

Related Questions