prerender.io с create-реагировать-приложение на nginx не обслуживает статические файлы из корня проекта, а предварительно пре-рендеринга. Также реагирует-снимок не работает

Question

prerender.io с create-реагировать-приложение на nginx не обслуживает статические файлы из корня проекта, а предварительно пре-рендеринга. Также реагирует-снимок не работает

Я выполнил большую часть необходимой настройки nginx с помощью create-реакции-приложения в соответствии с https://prerender.io/documentation но у меня есть несколько вопросов

Но позвольте мне объяснить настройки моего проекта.

Структура моей папки

public /index.html контейнеры src / components
index.js(Контейнерное приложение)

src / index.js выглядит так

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {ConnectedRouter} from 'react-router-redux';

import './index.css';
import './main.css';
import App from './containers/app';
import store, { history } from './store';

const target = document.querySelector('#root');

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    target
);

В моем nginx я указал корень как /path/to/project/public/index.html

Index.html

<body>
<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root">
  My custom text
</div>
<!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->

Подход № 1 - Nginx работает отлично и показывает HTML на этой странице. В комплекте нет по умолчанию. Очевидно, что веб-пакет обрабатывает эту часть, когда мы запускаем запуск пряжи или запуск npm. Как я могу добавить этот bundle.js в index.html, чтобы служба prerender.io нашла его и вернула обратно сгенерированный html для страницы реакции? Или мне вообще нужно так делать?

Подход № 2 - я запустил проект на порту, скажем, 3001(запуск пряжи), а затем, когда мой предварительный сервер был включен, я запустил http://localhost:3000/http://localhost:3001

где http://localhost:3000/ = сервер Prerender.io и http://localhost:3001/ - это место, где выполняется мой проект.

Сейчас,

Он не обслуживает мои статические ресурсы из корня проекта, т.е. http://localhost:3001/, а скорее из http://localhost:3000/
Во-вторых, в этом случае я не чувствую необходимости, если nginx настроен мной вручную. Все, что мне было нужно, это сервер prerender, и мой проект уже запущен через yarn start,
Я чувствую, что пункт 2 работает для локального тестирования. пункт 1 будет применим к фактическому развертыванию предварительного рендеринга.

Подход № 3 - само приложение create-реагировать на приложения имеет снимок реакции для предварительного рендеринга, но в моей настройке это также выдает ошибку

файл index.js

import React from 'react';
// import ReactDOM from 'react-dom';
import { render } from 'react-snapshot';
import {Provider} from 'react-redux';
import {ConnectedRouter} from 'react-router-redux';

import './index.css';
import './main.css';
import App from './containers/app';
import store, { history } from './store';

const target = document.querySelector('#root');

render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    target
);

При запуске выдает ошибку Syntax error: Unexpected token, expected , (15:14)

Правильно ли мышление для подхода № 1 и № 2. А в чем проблема с самым простым подходом № 3?

Обновление - файл nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen 8000;
        server_name localhost;

        root   /Users/vedant/Projects/myProject/build;
        index  index.html;

        location / {
            try_files $uri @prerender;
        }

        location @prerender {
            proxy_set_header X-Prerender-Token eNlgaUedb3xptcXiFlex;

            set $prerender 0;
            if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
                set $prerender 1;
            }
            if ($args ~ "_escaped_fragment_") {
                set $prerender 1;
            }
            if ($http_user_agent ~ "Prerender") {
                set $prerender 0;
            }
            if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
                set $prerender 0;
            }

            #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
            resolver 8.8.8.8;

            if ($prerender = 1) {

                #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
                set $prerender "service.prerender.io";
                rewrite .* /$scheme://$host$request_uri? break;
                proxy_pass http://$prerender;
            }
            if ($prerender = 0) {
                rewrite .* /index.html break;
            }
        }
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    include servers/*;
}

Обновление 2 -

Я попытался получить доступ к http://localhost:8000/localhost:3001 где http://localhost:8000/ - мой сервер nginx.

Но это дает мне только верхний и нижний колонтитулы. Пробовал добавлять <script> window.prerenderReady = false; </script> также. Но это частично оказано.

1

reactjs nginx create-react-app prerender

Источник

user1096194 31 янв '18 в 09:40

1 ответ

Другие вопросы по тегам reactjs nginx create-react-app prerender

user3450859 31 янв '18 в 14:50 2018-01-31 14:50 · Answer 1 · 2018-01-31 14:50

Подход № 2 подходит для локального тестирования. Ожидается просмотр статических ресурсов, запрошенных с http://localhost:3000/, поскольку вы обращаетесь к серверу Prerender непосредственно в браузере. Как только вы правильно настроите конфигурацию nginx, вы будете обслуживать предварительно обработанную страницу через nginx, и эти проблемы исчезнут.

Подход № 1 должен работать в производственном процессе, так как файл комплекта будет включен в index.html, но локально вы захотите, чтобы ваш nginx просто сделал proxy_pass для вашего сервера localhost webpack. Таким образом, вы получите закачанный пакет от npm start.