时间戳

首页 > 解决方案 > 反应路由器，nginx，节点，静态文件

node.js - 反应路由器，nginx，节点，静态文件

问题描述

我知道有人问过类似的问题，但我找不到最常见的 node/react/nginx 配置的答案。

后端节点应用程序我想将代理反向代理到：端口客户端是使用 create-react-app 构建的，我希望使用 react-router 的“深层链接”工作我想使用 nginx 而非节点提供静态文件

编译客户端后，我将其移入server/build 然后部署整个server文件夹。

所以问题 1 是这是否是最好的最终部署结构？我喜欢这个的原因是构建的文件干净地在一个build目录中，而不是public与其他服务器端文件（例如图像）混在一起，因此可以在下一次构建时轻松替换。

所以服务器看起来像这样：

/mnt/ext250/web-apps/cbg.rik.ai/
├── build
│   └── index.html
│   └── static
│       ├── css
│       ├── js
│       └── media

// files that were in server/public

├── public
│   └── images
│       ├── items
│       ├── logo
│       └── rooms

server.js

所以我 pm2 启动server.js 应用程序直接在 :port 上运行良好：应用程序在根目录下运行良好，例如 domain.com，我可以使用客户端链接。但是当我直接加载“深层链接”时，服务器会超时。

所以问题是如何配置index要为深层链接提供服务并仍然保持 API 路由到节点后端的工作。

我是否需要明确不同的路线，例如：

  # declare API routes first
  location /api {
    try_files $uri @backend ;
  }

  # then everything else?
  location / {
    try_files $uri build/index.html;
  }

当我设置它时，似乎主站点被用作错误的 mimetype 或其他东西......：

Uncaught SyntaxError: Unexpected token '<'
main.dd03fa6d.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
cbg.rik.ai/:1 Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://cbg.rik.ai/static/css/main.573d8e92.chunk.css".

完整配置：


server {
  listen 80;
  server_name cbg.rik.ai;
  root /mnt/ext250/web-apps/cbg.rik.ai;

  access_log /var/log/nginx/cbg.access.log;
  error_log /var/log/nginx/cbg.error.log;

  index index.html;

  # for other browser deep link routes serve the index file
  location / {
    try_files $uri build/index.html @backend;
  }

  # proxy to node app @backend
  location @backend {
    proxy_pass http://localhost:33010;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # Following is necessary for Websocket support
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  # certbot stuff
}

相关： React-router 和 nginx

try_files 文档 https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/#trying-several-options

标签： node.jsreactjsnginxproxycreate-react-app

解决方案

好吧，在拉了很多头发之后，我遇到的问题是一些源静态文件的权限错误。这可能会为其他人节省一些时间。

我将 aMakefile用于这些任务并添加了一个fixPermissions任务。Makefile 可以很好地处理相关任务，因此我可以拥有：

clean:
    rm -rf client/build
    rm -rf server/build

# image files can have wrong permissions when copied from internet
fixPermissions:
    # directories 755
    find server/cdn -type d -exec chmod 755 {} \;
    # files 644
    find server/cdn -type f -exec chmod 644 {} \;

build: clean fixPermissions
    cd client && npm run build

move:
    mv client/build server

prep: clean build move


sync:
    rsync -avi --delete \
        server/ ${login}:${deploydir}

    echo "done"

deploy: prep sync pm2restart

然后 deploy 是公正的make deploy，甚至使用 zsh 完成文件名。老Skool，但它的工作原理！

最终的 nginx 配置：

# cbg.rik.ai
# port: 33010

server {
  listen 80;
  server_name cbg.rik.ai;

  access_log /var/log/nginx/cbg.access.log;
  error_log /var/log/nginx/cbg.error.log;
  root /mnt/ext250/web-apps/cbg.rik.ai/build;

  # static files from server/cdn
  # make sure files are 644
  # better to use alias than have two roots
  location /cdn/ {
    alias /mnt/ext250/web-apps/cbg.rik.ai/cdn/;
    try_files $uri $uri/ default.png;
  }

  # for other browser deep link routes serve the index file
  location / {
    try_files $uri $uri/ /index.html;
  }

  # proxy to node app @backend
  location /api {
    proxy_pass http://localhost:33010;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # Following is necessary for Websocket support
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  # followed by certbot stuff

}

我不太确定位置的排序是否有影响。无论如何，在这些东西上浪费了几个小时，所以希望能帮助别人。或者可能后来我：0

推荐阅读