Drupal themes only working while in Maintenance Mode due to nginx/php-fpm

General Discussions General
1

Greetings!

I have a problem where Olivero theme (or any other theme) is working in Maintenance mode, but once I switch maintenance mode off, I have a white page with a long list of menu item w/o any styling (see screenshot).

image
image2161×1189 160 KB

Initially, I installed drupal:10-fpm-alpine using Docker, which is now updated to drupal 10.2.4. It has nginx 1.22.1, PHP 8.2.12 and MySQL 8.0.35.

I found one suggested solution on a Drupal forum (theming - Upgrade to Drupal 10.1.6, Theme Doesn't Load Outside Maintenance Mode - Drupal Answers), which said:

======================================

Drupal 10.1.x introduced CSS and JavaScript aggregation performance improvements in that there is change to .htaccess file as well.

Sites using nginx/php-fpm may need to update their nginx.conf file to pass through the css/js path to Drupal.

Before

# Passes style generation to PHP.

location ~ ^/sites/.*/files/styles/ {

  try_files $uri @rewrite;

}

After

# Passes image style and asset generation to PHP.

location ~ ^/sites/.*/files/(css|js|styles)/ {

  try_files $uri @rewrite;

}

======================================

The thing is that being a newbie, I’m not sure how to apply that suggestion, because I only have these two nginx.conf files:

/var/lib/docker/overlay2/464cd198c9f1ece0e669690a0a61d353e1d3f8b457489ab24eee2f12c637aff3/merged/etc/nginx/nginx.conf /var/lib/docker/overlay2/ae457ff4ced0f9e2e384a51fc1fc502f299652899cf0bd5321b7777f2e7568c5/diff/etc/nginx/nginx.conf

that don’t have the

# Passes style generation to PHP.
location ~ ^/sites/.*/files/styles/ {
  try_files $uri @rewrite;
}

or anything PHP related. I suppose I should be editing some other file, but which? Any advice will be most welcome!

2

I hope you don’t edit the files there. What you need is just nginx configuration. I think the only Docker-related part is how you copy the original nginx file out and mount it back.

Copy:

docker cp containername:/etc/nginx/nginx.conf nginx.conf

Edit the file and mount it back. Here I have lots of examples: Everything about Docker volumes - DEV Community

3

Thank you, Ákos!

I read your tutorial about Docker volumes. Although it is a bit too complicated for me for now, at least I understood the basics of where Docker is storing the volumes and containers. In my example below, if I have 3 containers and need to copy nginx.conf out of the container, edit and copy it back to the container, which container should I copy from, webserver or drupal?

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b74cb0ba0ff7 nginx:1.22.1-alpine “/docker-entrypoint.…” 3 months ago Up 2 days 0.0.0.0:80->80/tcp, :::80->80/tcp, 0.0.0.0:443->443/tcp, :::443->443/tcp webserver
72e491583c31 drupal:10-fpm-alpine “docker-php-entrypoi…” 3 months ago Up 2 days 9000/tcp drupal
98111e5a1d64 mysql:8.0 “docker-entrypoint.s…” 3 months ago Up 2 days 3306/tcp, 33060/tcp mysql

4

Oh, I figured this out. There is a nginx.conf in the “webserver” container. So I copied it into my home directory and I wonder how to edit. Right now, it doesn’t have any mention of PHP:

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

In order to fix my problem with theme not working outside of the Maintenance mode, I am supposed to replace the existing PHP snippet (which isn’t there) by this one:

# Passes image style and asset generation to PHP.

location ~ ^/sites/.*/files/(css|js|styles)/ {

  try_files $uri @rewrite;

}

Should I just paste it somewhere into the nginx.conf?

By the way, what command should I use to mount it back?

5

If you also try the examples, that can help to understand it, but I wrote the blogpost so I don’t have to repeat myself as that takes a lot of time and I don’t have time to answer new questions.

It is not a command. But the whole blogpost was about different ways to mount. You need the bind mount and you should use compose file as I did in the examples, but I lso mentioned -v and --mount options as well to use with the docker cli.

I recommend visiting the nginx documentation as well. If you search for “nginx location” on Google, you will find this documentation and also other tutorials

https://nginx.org/en/docs/beginners_guide.html

Sorry, but these are really general Nginx questions and I don’t configure nginx daily either so I also forgot that nginx has the folder that you can see in the nginx config:

There should be a default.conf. In that file you will find the server block and also locations blocks. You will also find examples in comments.

So instead of copying the main nginx config out, you should either copy the default and mount that back to the container using bind mounts.