Nginx 不渲染样式

Question

我正在开发一个简单的 Wordpress 应用程序并在 nginx 和 docker 上测试负载平衡。 问题是页面的样式在 http 网站上加载，但不能在 https 上工作，因为你可以在图像上工作。

我的 docker-compose.yml：

services:
    nginx:
        image: nginx:stable-alpine
        restart: always
        ports: 
            - 80:80
            - 443:443
        volumes:
            - ./nginx/nginx.conf:/etc/nginx/nginx.conf
            - ./cert/:/etc/nginx/ssl
            - ./nginx-logs:/var/log/nginx
        depends_on:
            - wordpress-1
            - wordpress-2
        networks:
            - wpsite

    wordpress-1:
        build: 
            context: ./wordpress
            dockerfile: Dockerfile
        container_name: wordpress-test-1
        ports:
            - 8000:80
        restart: always
        volumes: 
            - ./:/var/www/html:delegated
        environment:
            WORDPRESS_DB_HOST: mysql:3306
            WORDPRESS_DB_USER: wordpress
            WORDPRESS_DB_PASSWORD: wordpress
        depends_on:
            - mysql 
        networks:
            - wpsite
    
    wordpress-2:
        build: 
            context: ./wordpress
            dockerfile: Dockerfile
        container_name: wordpress-test-2
        ports:
            - 8080:80
        restart: always
        volumes: 
            - ./:/var/www/html:delegated
        environment:
            WORDPRESS_DB_HOST: mysql:3306
            WORDPRESS_DB_USER: wordpress
            WORDPRESS_DB_PASSWORD: wordpress
        depends_on:
            - mysql
            - wordpress-1
        networks:
            - wpsite        

    mysql:
        image: mysql:latest
        volumes:
            - db_data:/var/lib/mysql
        restart: always
        environment: 
            MYSQL_DATABASE: wordpress
            MYSQL_USER: wordpress
            MYSQL_PASSWORD: wordpress
            MYSQL_ROOT_PASSWORD: secret
        networks:
            - wpsite

networks:
    wpsite:
        driver: bridge
volumes:
  db_data:

我的 Nginx.conf 文件：

events { 
    worker_connections 1024; 
}

http{

    upstream all {
        server wordpress-1;
        server wordpress-2;
    }    

    server {
        server_name wordpress-docker.test;
        
        listen 80;
        listen 443 ssl;

        ssl_certificate     /etc/nginx/ssl/wordpress-docker.test+4.pem;
        ssl_certificate_key /etc/nginx/ssl/wordpress-docker.test+4-key.pem;

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
        
        location / {
            proxy_pass         http://all;
            proxy_set_header Host            $host;
            proxy_set_header X-Real-IP       $proxy_protocol_addr;
            proxy_set_header X-Forwarded-For $proxy_protocol_addr;
        }
    }
}

HTTPS 结果

HTTP 结果

我希望有人可以帮助我解决这个问题。 :)

Answer 1

我终于明白了。

要解决这个问题，我只需要添加“proxy_set_header X-Forwarded-Proto https;”到 nginx.conf 文件中。

events { 
    worker_connections 1024; 
}

http{

    upstream all {
        server wordpress-1;
        server wordpress-2;
    }    

    server {
        server_name wordpress-docker.test;
        
        listen 80;
        listen 443 ssl;

        ssl_certificate     /etc/nginx/ssl/wordpress-docker.test+4.pem;
        ssl_certificate_key /etc/nginx/ssl/wordpress-docker.test+4-key.pem;

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
        
        location / {
            proxy_pass         http://all;
            proxy_set_header Host            $host;
            proxy_set_header X-Real-IP       $proxy_protocol_addr;
            proxy_set_header X-Forwarded-For $proxy_protocol_addr;
            proxy_set_header X-Forwarded-Proto https;
        }
    }
}

在我刚刚添加的 wp-config.php 中：

define('FORCE_SSL_ADMIN', true);
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
 $_SERVER['HTTPS']='on';

define('WP_HOME','https://wordpress-docker.test');
define('WP_SITEURL','https://wordpress-docker.test');

我希望这会有所帮助。