Реакция приложения маршрутизатора на сервере nginx

У меня есть приложение с двумя роутерами и результатами. На домашней странице мне нужно перейти к нашим микросервисам авторизации и вернуться к моему реагирующему приложению на страницу результатов, но файл result.html не существует, потому что это реагирующее приложение, поэтому я получаю ошибку 404.

Я пытаюсь использовать следующую конфигурацию на своем nginx:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}

    # Any route that doesn't have a file extension (e.g. /devices)
    location / {
        try_files $uri $uri/ /results.html;
    }
}

но все еще не работает. Любое предложение, пожалуйста.


reactjs nginx react-router
person Jean    schedule 20.06.2017    source источник
comment
Когда вы говорите, что у меня нет html-файла, потому что это реагирующее приложение, вы имеете в виду, что выполняете веб-пакет на своем сервере?   -  person Vashnak    schedule 20.06.2017
comment
Вы создали что-то для сервера ваших файлов React JS, например экспресс?   -  person ickyrr    schedule 20.06.2017
comment
Вам нужно запустить приложение React JS поверх express или любого другого веб-сервера, чтобы оно заработало.   -  person ickyrr    schedule 20.06.2017
comment
@Vashnak У меня есть скрипт, который генерирует индекс и все активы, такие как файлы js, css и т. д. Так что у меня есть только index.html   -  person Jean    schedule 20.06.2017
comment
И это не сработает, если вы замените results.html на index.html? Кстати, лучший способ сделать это создать сервер для рендеринга ваших файлов (например, экспресс)   -  person Vashnak    schedule 20.06.2017
comment
@ickyrr нет ickyrr, вы можете использовать любой веб-сервер, например apache или nginx, в моем случае у меня есть докер nginx для сервера веб-страницы реагирования   -  person Jean    schedule 20.06.2017
comment
Я думаю, вам все еще нужен экспресс-сервер (или что вы хотите) для рендеринга вашего js-файла. Вот как я делаю для своих реагирующих приложений с докером   -  person Vashnak    schedule 20.06.2017
comment
@Vashnak, не могли бы вы поделиться своим файлом конфигурации экспресс-сервера в ответе ???   -  person Jean    schedule 20.06.2017
comment
Готово, прокомментируйте, если вам нужна помощь   -  person Vashnak    schedule 20.06.2017
comment
@Vashnak спасибо, но использование экспресса не вариант, мне нужно установить правильную конфигурацию для моего nginx, чтобы это работало   -  person Jean    schedule 20.06.2017

Ответы (2)


arrow_upward
5
arrow_downward

Вот как я решаю эту проблему без использования сервера expressjs:

это мой файл конфигурации nginx:

# pushState friendly!
# The setup:
#   * website name is `_`
#   * javascript app is located at `/app`

charset utf-8;

tcp_nopush on;
tcp_nodelay off;
client_header_timeout 10s;
client_body_timeout 10s;
client_max_body_size 128k;
reset_timedout_connection on;

gzip on;
gzip_types
    text/css
    text/javascript
    text/xml
    text/plain
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    application/atom+xml
    font/truetype
    font/opentype
    image/svg+xml;

server {
  listen 80;
  server_name localhost;
  root /usr/share/nginx/html;


  # To make sure any assets can get through :)
  location / {
    try_files $uri @rewrites;
  }

  # If no asset matches, send it to your javascript app. Hopefully it's a route in the app!
  location @rewrites {
    rewrite ^(.+)$ /index.html last;
  }
}
person Jean    schedule 20.06.2017

arrow_upward
1
arrow_downward

Этот ответ следует из комментариев в разделе вопросов.

App.js

const app = require('./app');

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}!`);
});

Сервер.js

const express = require('express');
const path = require('path');

const app = express();

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// I always return index.html, react-router takes control
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

module.exports = app;

Затем в моей конфигурации nginx я использую proxy_pass 127.0.0.1:3000. Но вы также можете удалить nginx и напрямую использовать порт 80 в файле App.js. Я держу nginx, потому что у меня есть несколько веб-сайтов в одном и том же vps.

person Vashnak    schedule 20.06.2017
comment
У меня очень похожая установка, но я столкнулся с проблемами. При попытке доступа к обслуживаемым статическим файлам в сборке вместо этого возвращается index.html. Не могли бы вы опубликовать всю конфигурацию nginx? Спасибо! - person Sloth Armstrong; 18.06.2018
comment
Недавно я сделал новую конфигурацию nginx, вы можете найти ее здесь github .com/GreenCom-Networks/Franz-manager/blob/master/ - person Vashnak; 19.06.2018