Question

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

我想将代理反向代理到：port 客户端使用create-react-app构建并构建我想让“ deep links”与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;
  }

当我设置了此选项后，似乎主站点被用作错误的模仿类型或其他内容：

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

Answer 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

然后部署仅为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

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

1 个答案: