☰

Nginx React 服务器只会在根目录查找静态资产

tag-icon • tag-icon nginx
Nginx React 服务器只会在根目录查找静态资产

如果 nginx 反向代理设置如下，我的 React 应用程序就可以工作：

server {
    listen       80;
    server_name  my_public_vps_addr; 

    location / {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

我可以在http://my_public_vps_addr/正确加载页面。

但我想通过 http://my_public_vps_addr/ecapp/ 访问该网站。

所以我配置了nginx：

server {
    listen       80;
    server_name  my_public_vps_addr; 

    location /ecapp/ {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

现在，如果我加载 http://my_public_vps_addr/ecapp/ 页面并检查控制台，我会得到：

GET http://my_public_vps_addr/static/js/bundle.js
[HTTP/1.1 404 Not Found 147ms]
GET http://my_public_vps_addr/static/js/0.chunk.js
[HTTP/1.1 404 Not Found 433ms]
GET http://my_public_vps_addr/static/js/main.chunk.js
[HTTP/1.1 404 Not Found 424ms]

我已经确定了一个可能的原因。资产应从http://my_public_vps_addr/ecapp/static/js/bundle.jsetc 而不是 中获取http://my_public_vps_addr/static/js/bundle.js。

为了修复这个错误，我将列出相关的源代码：

服务器.js

const express = require('express');
const compression = require('compression');
const path = require('path');
const app = express();

app.use(compression());
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(`App is running on port ${PORT}`);
});

我尝试过app.use('/ecapp/static', express.static(path.join(__dirname, 'build')));，但没有成功。

路线.js

const Routes = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={Home} />
                ...
            </Switch>
        </BrowserRouter>
    );
};

我尝试过<BrowserRouter basename='/ecapp'></BrowserRouter>，但没有成功。

我认为，如果我可以配置页面以查找资产，应用程序将在 http://my_public_vps_addr/ecapp/ 正确加载。http://my_public_vps_addr/ecapp/static/*我需要帮助才能做到这一点。

答案1

我已经明白了，所以我在这里发布我的解决方案。

客观的

在 http://my_public_vps_addr:port/sub_path 托管 create-react-app 网站。

程序

  1. 在 .env 文件中：a）设置 NODE_ENV=production b）将 PUBLIC_URL 设置为 http://my_public_vps_addr:port/sub_path
  2. 设置基本名称：<Router basename=’/sub_path’></Router>
  3. npm run build a) 这会在 build/ 目录中生成静态文件。
  4. 将内容 build/* 复制到 /var/www/sub_path/html/sub_path/
  5. cd 到 /var/www/sub_path/html/ a) sudo find . -type d -exec chmod 755 {} \; b)sudo find . -type f -exec chmod 644 {} \;
  6. touch /etc/nginx/sites-available/sub_path a) ln -s /etc/nginx/sites-available/sub_path /etc/nginx/sites-enabled/sub_path
  7. /etc/nginx/sites-available/sub_path 的内容
    server {
      listen port;
      listen [::]:port;
      root /var/www/sub_path/html;
      index index.html index.htm index.nginx-debian.html;
      server_name my_public_vps_addr:port;
      location /sub_path {
        try_files $uri $uri/ /index.html =404
      }
    }
  1. 重启 nginx 服务： a) sudo systemctl restart nginx.service
  2. 您的网站应该可以从 http://my_public_vps_addr:port/sub_path 访问
  3. 就是这样！

答案2

我改为：

location /ecapp/ {
        sub_filter '<script src="/static' '<script src="/ecapp/static';
        sub_filter_once off;
        proxy_set_header Accept-Encoding "";
        proxy_pass      http://127.0.0.1:3000;
}

现在view-source:http://my_public_vps_ip_addr/ecapp/是：

<!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>

但是现在加载 http://my_public_vps_ip_addr/ecapp/ 会出现以下情况：

The script from “http://my_public_vps_addr/ecapp/static/js/bundle.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
...
Uncaught SyntaxError: expected expression, got '<'

http://my_public_vps_addr/ecapp/static/js/bundle.js等不返回任何内容。

相关内容