无法在Docker容器中运行的Nginx的子目录下部署React应用

Question

我无法在docker容器中运行的nginx的子目录下部署我的React应用。

下面是详细信息

1. 反应应用程序的基本名称设置BrowserRouter basename ='/ myreactapp'
2. Package.json具有“主页”：“ / myreactapp”

3. nginx.conf

   server {
   
       server_name localhost;
   
       index index.html;
   
       error_log  /var/log/nginx/error.log;
   
       access_log /var/log/nginx/access.log;
   
       root /usr/share/nginx/html;
   
       location /myreactapp {
   
           try_files $uri $uri/ /myreactapp/index.html;
   
       }
   
   }
   

4. Docker文件

   FROM nginx:1.14.1
   COPY /build /usr/share/nginx/html
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

5. 与此同时，它仍然从“ /”根目录托管应用程序，但不能 / myreactapp

Answer 1

在您的Dockerfile中，替换以下行：

COPY /build /usr/share/nginx/html

与此：

COPY /build /usr/share/nginx/html/myreactapp

Answer 2

对我来说，遵循这两篇文章

https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1

https://medium.com/@darshanpawar/nginx-configuration-changes-after-you-deploy-react-application-in-a-sub-directory-f5b36453fed1

我的nginx.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

我的Dockerfile

# replace nginx.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
# copy files from build stage
COPY --from=build-stage /app/build /usr/share/nginx/html/myreactappenter