反应路由器，nginx，节点，静态文件

Posted 2023-02-21

【中文标题】反应路由器，nginx，节点，静态文件

【英文标题】：react router, nginx, node, static files

【发布时间】：2020-11-01 03:00:58

【问题描述】：

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

后端节点应用程序我想反向代理到：端口 客户端使用 create-react-app 构建并构建 我希望带有 react-router 的“deep links”能够工作 我想用 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 and nginx

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

【问题讨论】：

它正在尝试加载样式表，但try_files 没有找到$uri，可能是因为它实际上在build 目录中，所以它发回了index.html 的内容。尝试将build/ 添加到root。

问题是我还有一些其他的静态文件，例如/images 目录。

【参考方案1】：

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

我对这些任务使用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

然后 deploy 只是 make deploy 甚至使用 zsh 完成文件名。 Old 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