Question

我使用npm run-script build捆绑我的react应用，然后将构建输出文件与nginx.config文件一起复制到Nginx docker映像中。当我运行创建的Docker映像时，css和映像在第一次中无法正确加载-因为此UI组件呈现为未对齐。但是，如果我从其他页面导航回到主页，则所有组件都会正确加载（css，图像和其他实质性ui组件，对齐方式）。我看到这与从相对路径加载静态资源有关，但是找不到解决方法。

我的React应用配置

我在homepage-package.json中设置了homepage: "/home/"。
还尝试在PUBLIC_URL文件中设置.env变量

Nginx.conf

server {

    listen 8080 default_server;

    root /var/www;
    index index.html index.htm;      

    location ~* \.(?:manifest|appcache|html?|xml|json)$ {
      expires -1;
    }

    location ~* \.(?:css|js)$ {
      try_files $uri =404;
      expires 1y;
      access_log off;
      add_header Cache-Control "public";
    }

    location ~ ^.+\..+$ {
      try_files $uri =404;
    }

    location /home/ {
        try_files $uri $uri/ /home/index.html;
    }
}

我错过了什么吗？

在Nginx Docker容器中运行React应用程序时出现问题

0 个答案: