Docker: Serve static files e.g. reports logos

Hi there! It is unclear to me how to make either docker or nginx server static files such as logos and other images used for ireport reports & labels.

Hi fedoras! What does your current nginx configuration look like? I notice the following is sometimes present in example nginx.conf files for serving static files.

    location /static/ {
        root /volumes;
        rewrite ^/static/config/(.*)$ /specify6/config/$1 break;
        rewrite ^/static/depository/(.*)$ /static-files/depository/$1 break;
        rewrite ^/static/(.*)$ /static-files/frontend-static/$1 break;
    }
1 Like

Hi Mark!

Yes, it does look like that, but how to go from there to serving static images is unclear to me.

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx;
    client_max_body_size 100M;

    location /static/ {
        root /volumes;
        rewrite ^/static/config/(.*)$ /specify6/config/$1 break;
        rewrite ^/static/depository/(.*)$ /static-files/depository/$1 break;
        rewrite ^/static/(.*)$ /static-files/frontend-static/$1 break;
    }

    location / {
        resolver 127.0.0.11 valid=30s;
        set $backend "http://specify7:8000";
        proxy_pass $backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Hi Fedoras,

So it looks like you can get static files that are in /specifyweb/frontend/static/img via a path like so https://sp7demofish.specifycloud.org/static/img/apple-touch-icon.png. Another example being https://sp7demofish.specifycloud.org/static/img/splash_screen.svg

So placing additional image files in that directory should allow them to be accessible through the method above?

1 Like

But that directory is inside the docker container. In what folder outside of the docker container do I place images so that they are able to be served from within the docker container?

My nginx config file is place in /root/specify/nginx

My docker compose runs from /root/specify/

Good morning Fedoras,

You can add files into the container using docker cp, including while the container is running. You could probably also use docker exec, however I decided to test the docker cp method as it is likely easier.

First, you will need to get the container id to copy into, and the container you will want to copy into is the main specify7-service. An easy way to see the container id is to run docker ps.

Next, run docker cp <path_of_image_to_copy> <containerId>:/opt/specify7/specifyweb/frontend/static/img/<image-filename>.

Restart (not docker compose down) the container, and your image should be accessible through the pathways outlined in the previous reply! Note you will have to run this command whenever you pull a fresh container. From the docker cp documentation it doesn’t look like the -r option that is normally available for the shell cp command is available, and so it may make sense to build a simple shell script that will loop over all the files you look to copy, that you then just run after any updates.

nice, discussion, would just chip-in by saying mounting that file might be easier (rather worrying about copying)

2 Likes

Yeah, it would seem much easier to just mount a folder with files instead having to go the entire process everytime I simply want to restart my container for whatever reason. Isn’t there a way to do that? I mean I am mounting several folders for my specify container to begin with, so can’t you do that with the nginx container as well?

Totally agree with Vinayak, mounting is much easier than copying. You should be able to mount the folder from within the docker compose for the volume

Thanks, but generic pointers don’t help me much. I’m asking for specific information.

Below is the “specify.conf” in my nginx folder, as referred to in my docker-compose.yml for nginx. How do I either adjust or apply the information in it to be able to server my static files?

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx;
    client_max_body_size 100M;

    location /static/ {
        root /volumes;
        rewrite ^/static/config/(.*)$ /specify6/config/$1 break;
        rewrite ^/static/depository/(.*)$ /static-files/depository/$1 break;
        rewrite ^/static/(.*)$ /static-files/frontend-static/$1 break;
    }

    location / {
        resolver 127.0.0.11 valid=30s;
        set $backend "http://specify7:8000";
        proxy_pass $backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

And for completion sake, here is the part of the contents of my docker-compose.yml that specifies the nginx settings:

  nginx:
    restart: unless-stopped
    image: docker.io/nginx
    ports:
      - "80:80"

    volumes:
      - "static-files:/volumes/static-files:ro"
      - "specify6:/volumes/specify6:ro"

      - "./nginx/specify.conf:/etc/nginx/conf.d/default.conf:ro"

Hi @fedoras

In your docker-compose.yml add a line like the following for the main specify container. The images in the examples below get placed in the same directory as your docker-compose.yml.

specify7:
    restart: unless-stopped
    image: specifyconsortium/specify-service:v7.9.5
    init: true
    volumes:
       - "specify6:/opt/Specify:ro"
       - "static-files:/volumes/static-files"
       - "./test_image.jpg:/opt/specify7/specifyweb/frontend/static/img/test_image.jpg"
...

You can also use a directory instead of a single file. I placed two images, test_image2.jpg and test_image3.jpg in a directory called test-images, again in the same directory as your docker compose (hence the ./)

volumes:
     - "./test-images:/opt/specify7/specifyweb/frontend/static/img"

Nothing about the nginx container or the nginx configuration should need to be touched. I have tested both of the configurations above using three test birds and confirmed that all three are accessible through localhost/static/img/test_image{n}.jpg once docker compose up is run.

2 Likes

Thank you, Mark! Using the below configuration works, but has led to other issues:

version: '3.7'
services:

  specify7:
    restart: unless-stopped
    image: docker.io/specifyconsortium/specify7-service:v7
    init: true
    volumes:
      - "specify6:/opt/Specify:ro"
      - "static-files:/volumes/static-files"
      - "./static/img:/opt/specify7/specifyweb/frontend/static/img"

Now other static images, like especially the specify logo, are no longer accessible:

image

When I out-comment the line in question, these static images are served again…

Hi Fedoras,

Yes, the directory ./static/img will take the place of the directory /opt/specify7/specifyweb/frontend/static/img, thus if you only have your custom images in your ./static/img directory the images that come bundled with the image from docker hub will not be present.

There are three solutions to this:

  1. Copy the images in specify7/specifyweb/frontend/static/img at production · specify/specify7 · GitHub and include them in your ./static/img directory. This is the easiest method in my opinion with the least maintenance. The static images of specify (logos etc) are unlikely to change.
  2. If you only have a couple of images to add, you could use the single file method.
  3. Add your custom images in a subdirectory (so that the path is frontend/static/img/custom/<file> etc.
3 Likes

OK I’m trying with:

#version: '3.7'
services:

  specify7:
    restart: unless-stopped
    image: docker.io/specifyconsortium/specify7-service:v7
    init: true
    volumes:
      - "specify6:/opt/Specify:ro"
      - "static-files:/volumes/static-files"
      - "./resources/logo:/opt/specify7/specifyweb/frontend/static/img/logo"

Placing files as follows:

[root@testifyweb01fl specify]# ls -l
total 4
drwxr-xr-x. 2 root root  119 Jun 12 08:10 archive
-rw-r--r--. 1 root root 2452 Jun 12 08:36 docker-compose.yml
drwxr-xr-x. 2 root root   26 Apr 19 12:42 nginx
drwxr-xr-x. 3 root root   42 Jun 12 08:35 resources
drwxr-xr-x. 2 root root   89 May  3 12:33 tmp
[root@testifyweb01fl specify]# ls resources/logo/ -l
total 276
-rw-r--r--. 1 root root 149573 Jun 10 16:31 KU.jpeg
-rw-r--r--. 1 root root 127845 Jun 10 16:31 msjn_large.png

Rebooted, and it works! :grinning:

image

1 Like