Nginx不呈现样式

Question

我正在开发一个简单的Wordpress应用程序，并在nginx和docker上测试负载平衡。问题是页面的样式是在http网站上加载的，而不是像在图像上那样处理https。

我的码头-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转发-Proto；“添加到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');

我希望这能帮上忙。