реагировать на маршрутизатор, nginx, узел, файлы c - PullRequest
Новая
       10

реагировать на маршрутизатор, nginx, узел, файлы c

0 голосов
/ 11 июля 2020

Я знаю, что задавались похожие вопросы, но я не могу найти ответа для наиболее распространенного node / response / nginx config.

Приложение Backend node Я хочу изменить прокси на клиент on: port построен с помощью приложения create-response-app и построен. Я хочу, чтобы работали « глубокие ссылки » с маршрутизатором реакции. Я хочу обслуживать файлы stati c с 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: Приложение отлично работает на root например, 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- варианты

1 Ответ

0 голосов
/ 12 июля 2020

Хорошо, проблема для меня после долгого выдергивания волос заключалась в том, что некоторые исходные файлы c имели неправильные разрешения. Это может сэкономить время кому-то еще.

Я использую 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, но он работает!

final nginx config: 

# 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

...