Điểm:0

Máy chủ Nginx React sẽ chỉ tìm kiếm các tài sản tĩnh ở gốc

lá cờ cn

Ứng dụng phản ứng của tôi hoạt động nếu proxy ngược nginx được đặt như sau:

người phục vụ {
    nghe 80;
    server_name my_public_vps_addr; 

    địa điểm / {
        proxy_pass http://127.0.0.1:3000/;
    }
}

Tôi có thể tải trang chính xác tại http://my_public_vps_addr/.

Nhưng tôi muốn truy cập trang web qua http://my_public_vps_addr/ecapp/.

Vì vậy, tôi đã cấu hình nginx:

người phục vụ {
    nghe 80;
    server_name my_public_vps_addr; 

    vị trí /ecapp/ {
        proxy_pass http://127.0.0.1:3000/;
    }
}

Bây giờ nếu tôi tải trang tại http://my_public_vps_addr/ecapp/ và kiểm tra bảng điều khiển, tôi nhận được:

NHẬN http://my_public_vps_addr/static/js/bundle.js
[HTTP/1.1 404 Không tìm thấy 147 mili giây]
NHẬN http://my_public_vps_addr/static/js/0.chunk.js
[HTTP/1.1 404 Không tìm thấy 433ms]
NHẬN http://my_public_vps_addr/static/js/main.chunk.js
[HTTP/1.1 404 Không tìm thấy 424ms]

Tôi đã xác định được một nguyên nhân có thể. Nội dung nên được lấy từ http://my_public_vps_addr/ecapp/static/js/bundle.js vv thay vì http://my_public_vps_addr/static/js/bundle.js.

Để khắc phục lỗi này, tôi sẽ liệt kê mã nguồn có liên quan:

máy chủ.js

const express = require('express');
const nén = yêu cầu ('nén');
const đường dẫn = yêu cầu ('đường dẫn');
ứng dụng const = express();

app.use(nén());
app.use(express.static(path.join(__dirname, 'build')));

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
    console.log(`Ứng dụng đang chạy trên cổng ${PORT}`);
});

tôi đã thử app.use('/ecapp/static', express.static(path.join(__dirname, 'build'))); nhưng không có may mắn.

Routes.js

const Các tuyến = () => {
    trở lại (
        <Bộ định tuyến trình duyệt>
            <Chuyển đổi>
                <Đường dẫn tuyến đường = "/" thành phần chính xác = {Trang chủ} />
                ...
            </Chuyển>
        </BrowserRouter>
    );
};

tôi đã thử <BrowserRouter basename='/ecapp'></BrowserRouter> nhưng không có may mắn.

Tôi nghĩ ứng dụng sẽ tải chính xác tại http://my_public_vps_addr/ecapp/ nếu tôi có thể định cấu hình trang để tìm nội dung tại http://my_public_vps_addr/ecapp/static/*. Tôi cần giúp đỡ trong việc này.

Ivan Shatsky avatar
lá cờ gr
Đây là SO nhiều hơn câu hỏi SF. Tôi không phải là chuyên gia về React, nhưng có thể đề xuất kiểm tra [Cách triển khai ứng dụng React vào thư mục con](https://medium.com/@svinkle/how-to-deploy-a-react-app-to- a-subdirectory-f694d46427c1), nó sẽ giúp một số người có câu hỏi tương tự về SO thực hiện những gì bạn đang yêu cầu.
rafawhs avatar
lá cờ cn
Nếu nginx của bạn có cấu hình phức tạp cho quy tắc vị trí/bộ đệm, hãy bật nhật ký gỡ lỗi docs.nginx.com/nginx/admin-guide/monitoring/logging và xem quy tắc nào đang được áp dụng.Tôi gặp vấn đề tương tự và đó là một số xung đột giữa cài đặt hết hạn js và html.
Điểm:1
lá cờ cn

Tôi đã tìm ra nó vì vậy tôi đăng giải pháp của mình ở đây.

KHÁCH QUAN

Để lưu trữ trang web tạo ứng dụng phản ứng tại http://my_public_vps_addr:port/sub_path.

THỦ TỤC

  1. trong tệp .env: a) đặt NODE_ENV=sản xuất b) đặt PUBLIC_URL thành http://my_public_vps_addr:port/sub_path
  2. đặt tên cơ sở: <Router basename=’/sub_path’></Router>
  3. npm chạy xây dựng a) điều này tạo ra các tệp tĩnh bên trong thư mục build/.
  4. Sao chép nội dung build/* sang /var/www/sub_path/html/sub_path/
  5. cd vào /var/www/sub_path/html/ một) Sudo tìm thấy . -type d -exec chmod 755 {} \; b) Sudo tìm thấy . -type f -exec chmod 644 {} \;
  6. chạm /etc/nginx/sites-available/sub_path a) ln -s /etc/nginx/sites-available/sub_path /etc/nginx/sites-enabled/sub_path
  7. Nội dung của /etc/nginx/sites-available/sub_path
    người phục vụ {
      cổng nghe;
      nghe [::]:cổng;
      gốc /var/www/sub_path/html;
      chỉ mục index.html index.htm index.nginx-debian.html;
      server_name my_public_vps_addr:port;
      vị trí /sub_path {
        try_files $uri $uri/ /index.html =404
      }
    }
  1. Khởi động lại dịch vụ nginx: a) Sudo systemctl khởi động lại nginx.service
  2. Trang web của bạn sẽ có sẵn từ http://my_public_vps_addr:port/sub_path
  3. Đó là nó!
Ivan Shatsky avatar
lá cờ gr
Mặc dù nói chung, đây là cách tiếp cận phù hợp, đặc biệt là khi so sánh với cách sử dụng `sub_filter`, lệnh `try_files` của bạn không đúng. Cái đúng là `try_files $uri $uri/ /sub_path/index.html` (hoặc thậm chí có thể là `try_files $uri /sub_path/index.html`).
Điểm:0
lá cờ cn

tôi đổi thành:

vị trí /ecapp/ {
        sub_filter '<script src="/static' '<script src="/ecapp/static';
        sub_filter_once tắt;
        proxy_set_header Mã hóa chấp nhận "";
        proxy_pass http://127.0.0.1:3000;
}

Và bây giờ nguồn xem: http://my_public_vps_ip_addr/ecapp/ Là:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="/manifest.json" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/ecapp/static/js/bundle.js"></script><script src="/ecapp/static/js/0.chunk.js"></script><script src="/ecapp/static/js/main.chunk.js"></script></body>
</html>

Nhưng bây giờ tải http://my_public_vps_ip_addr/ecapp/ cho:

Tập lệnh từ âhttp://my_public_vps_addr/ecapp/static/js/bundle.jsâ đã được tải mặc dù loại MIME của nó (âtext/htmlâ) không phải là loại MIME JavaScript hợp lệ.
...
Uncaught SyntaxError: biểu thức dự kiến, có '<'

http://my_public_vps_addr/ecapp/static/js/bundle.js vv không trả lại nội dung.

lá cờ us
Đây là một cách tiếp cận chỉ gây đau đầu trong tương lai. Bạn cần định cấu hình đúng ứng dụng React của mình như được chỉ ra trong các nhận xét ở trên.

Đăng câu trả lời

Hầu hết mọi người không hiểu rằng việc đặt nhiều câu hỏi sẽ mở ra cơ hội học hỏi và cải thiện mối quan hệ giữa các cá nhân. Ví dụ, trong các nghiên cứu của Alison, mặc dù mọi người có thể nhớ chính xác có bao nhiêu câu hỏi đã được đặt ra trong các cuộc trò chuyện của họ, nhưng họ không trực giác nhận ra mối liên hệ giữa câu hỏi và sự yêu thích. Qua bốn nghiên cứu, trong đó những người tham gia tự tham gia vào các cuộc trò chuyện hoặc đọc bản ghi lại các cuộc trò chuyện của người khác, mọi người có xu hướng không nhận ra rằng việc đặt câu hỏi sẽ ảnh hưởng—hoặc đã ảnh hưởng—mức độ thân thiện giữa những người đối thoại.