反应路由器，nginx，节点，static 文件

Question

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

后端节点应用程序我想反向代理到 on：端口客户端是用 create-react-app 构建的，并且我想用 react-router 构建“ 深度链接”来工作我想用 ZEE434023CF89D7DFB21F63D64F0 提供 static 文件而不是节点

编译客户端后，我将其移动到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应用程序直接在：端口上运行良好：应用程序在根目录下运行良好，例如 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

Answer 1

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

我对这些任务使用Makefile并添加了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

然后部署只是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