React-router và nginx

Tôi đang chuyển ứng dụng phản ứng của mình từ webpack-dev-server sang nginx.

Khi tôi truy cập url gốc "localhost: 8080 / login", tôi chỉ nhận được 404 và trong nhật ký nginx của mình, tôi thấy rằng nó đang cố lấy:

my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:8080"
my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET /login HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-"

Tôi nên tìm cách sửa chữa ở đâu?

Bộ định tuyến bit trong phản ứng của tôi trông như thế này:

render(

  <Provider store={store}>
    <MuiThemeProvider>
      <BrowserRouter history={history}>
        <div>
          Hello there p
          <Route path="/login" component={Login} />
          <App>

            <Route path="/albums" component={Albums}/>

            <Photos>
              <Route path="/photos" component={SearchPhotos}/>
            </Photos>
            <div></div>
            <Catalogs>
              <Route path="/catalogs/list" component={CatalogList}/>
              <Route path="/catalogs/new" component={NewCatalog}/>
              <Route path="/catalogs/:id/photos/" component={CatalogPhotos}/>
              <Route path="/catalogs/:id/photos/:photoId/card" component={PhotoCard}/>
            </Catalogs>
          </App>
        </div>
      </BrowserRouter>
    </MuiThemeProvider>
  </Provider>, app);

Và tệp nginx của tôi như thế này:

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
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;

    server {
        listen 8080;
        root /wwwroot;

        location / {
            root /wwwroot;
            index index.html;

            try_files $uri $uri/ /wwwroot/index.html;
        }


    }
}

BIÊN TẬP:

Tôi biết rằng hầu hết các thiết lập hoạt động vì khi tôi truy cập localhost: 8080 mà không đăng nhập, tôi cũng nhận được trang đăng nhập. điều này không thông qua chuyển hướng đến localhost: 8080 / login - nó là một số mã phản ứng.

Khối vị trí trong cấu hình nginx của bạn phải là:

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

Vấn đề là các yêu cầu đến tệp index.html hoạt động, nhưng bạn hiện không yêu cầu nginx chuyển tiếp các yêu cầu khác tới tệp index.html.

Đây là giải pháp của tôi

cố gắng đơn giản:

location / {
    root /var/www/mysite;
    try_files $uri /index.html;
}

không cố gắng nữa cho các loại không phải html:

location / {
    root /var/www/mysite;
    set $fallback_file /index.html;
    if ($http_accept !~ text/html) {
        set $fallback_file /null;
    }
    try_files $uri $fallback_file;
}

không cố gắng nữa cho các loại và thư mục không phải html (làm cho try_filestương thích với indexvà / hoặc autoindex):

location / {
    root /var/www/mysite;
    index index.html;
    autoindex on;
    set $fallback_file /index.html;
    if ($http_accept !~ text/html) {
        set $fallback_file /null;
    }
    if ($uri ~ /$) {
        set $fallback_file /null;
    }
    try_files $uri $fallback_file;
}

Có thể đây không phải là trường hợp chính xác ở đây nhưng đối với bất kỳ ai đang chạy vùng dockerchứa cho reactdự án của họ react-routervà webpack-dev-server, trong trường hợp của tôi, tôi đã có mọi thứ tôi cần trong nginx.conf:

server {
    listen 80;
    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    } 
    error_page 404 /index.html;
    location = / {
      root /usr/share/nginx/html;
      internal;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }

Nhưng nginx vẫn không gửi 404 erros đến thư mục gốc /. Sau khi xem xét vùng chứa, tôi nhận thấy rằng có một số cấu hình trong /etc/nginx/conf.d/default.confđó bằng cách nào đó sẽ ghi đè các cấu hình của tôi, vì vậy xóa tệp đó trong tôi đã dockerfilegiải quyết được vấn đề:

...
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf  # <= This line solved my issue
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Đây là giải pháp phù hợp với tôi trong máy chủ trực tiếp:

Tôi vừa làm theo hướng dẫn này và với cấu hình Nginx cơ bản chỉ cần cấu hình khối vị trí.

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

Đối với tôi, không có gì hoạt động cho đến khi tôi thêm một chỉ thị gốc. Điều này cũng hoạt động đối với tôi khi sử dụng proxy ngược để truy cập điểm cuối / api / webserver.

location / {
    root   /usr/share/nginx/html;
    try_files $uri /index.html;
}

Tôi đã đối phó với cùng một vấn đề và tôi nghĩ rằng đó là một lỗi thông báo nhưng không. Tôi đang sao chép tệp conf vào /etc/nginx/conf.d/thư mục. Điều đó hoạt động trong nhà phát triển nhưng trong phiên bản xây dựng gây ra vấn đề đó. Khi định tuyến không thành công, nginx không dự phòng để lập chỉ mục.

Chỉ cần sao chép tệp conf vào đúng thư mục: /etc/nginx/conf.d/default.conf

Ví dụ về hướng dẫn Dockerfile: COPY .docker/prod/nginx.conf /etc/nginx/conf.d/default.conf

Hy vọng nó giúp.