Рейтинг:0

Как развернуть приложение для рендеринга на стороне сервера (SSR) (в комплекте с веб-пакетом) на сервере Windows 2016 / IIS

флаг cn

Просто на заметку: это первый раз, когда я пытаюсь развернуть реагирующее приложение на специально созданном сервере Windows, но мне удалось успешно сделать это на Heroku и Linux (PM2), поэтому я знаю, что архитектура приложения пусть работает корректно.

Сценарий:

Я построил сервер хостинга Windows Server 2016 / 64 бит для размещения нескольких веб-сайтов. Для этого я использовал VPS Contabo. Я протестировал все функции, которые должны работать, даже с другими приложениями, такими как ASP.NET, PHP, SSL-сертификаты, и все работает нормально.

Что касается конкретного проекта node js, который я пытаюсь разместить на этом сервере, он состоит из двух основных частей:

  • Бэкенд в узле вместе с CMS, также разработанный в узле/javascript.

Я создал хостинг на субдомене для этого, и он отлично работает, даже с SSL-сертификатом Let’s Encrypt. На случай, если кто-то захочет получить к нему доступ, будет включено: https://backendnode.fullstackwebdesigner.com/system

  • Фронтенд в рендеринге на стороне сервера.

Вот где возникает проблема. Если кто-то хочет получить к ней доступ, вот ссылка: https://fullstackwebdesigner.com/

Я использовал в основном одну и ту же технику для них обоих:

  • узел;
  • расширение для перезаписи URL;
  • модули узла iis;
  • конфигурация файла web.config;

Эта проблема:

Мне удалось заставить его загружаться как веб-сайт, как и в случае с серверной частью, но проблема в том, что он, похоже, не загружает файлы CSS, изображения и так далее. Таким образом, макет не загружается. На консоли есть и сообщение об ошибке: Uncaught SyntaxError: неожиданный токен '<'

Реагирующее приложение: Как я уже говорил, это было сделано как приложение для рендеринга на стороне сервера и в комплекте с webpack. Таким образом, он собирает связанные файлы в каталог с именем «/build». И в этом каталоге есть каталог «/public», в котором находятся все активы, такие как файлы CSS и изображения.

Во время разработки я запускал сборку на терминале как: сборка узла/bundle.react.js

И как ни странно, когда я запускаю это на терминале на сервере Windows, оно работает отлично. Но доступ возможен только через: http://локальный: 3001 Он загружает все, что должно загружаться.

Вот упрощенное представление файловой структуры:

- /строить/
--bundle.react.js
--/сборка/общедоступная/
---/файлы-макет/
---/шрифты/
---bundle.react.client.js

Вот также файл web.config, который я использую на хостинге веб-сайта для сборки реакции:

<configuration>
    <system.webServer>
        <iisnode nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />
        
        <handlers>
            <add name="iisnode" path="/build/bundle.react.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <!-- Redirect to HTTPS (alternative). -->
                <rule name="Redirect to HTTPS / SSL" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" redirectType="Found" url="https://{HTTP_HOST}/{R:1}" />
                </rule>

                <!-- Don't interfere with requests for logs. -->
                <rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^[a-zA-Z0-9_\-]+\.js\.logs\/\d+\.txt$" />
                </rule> 
                <!-- Node. -->
                <rule name="sendToNode">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/build/bundle.react.js" />          
                </rule>
            </rules>    
        </rewrite> 
        <defaultDocument>
            <files>
                <clear />
                <add value="/build/bundle.react.js" />
            </files>
        </defaultDocument>
        <security>
            <requestFiltering>
                <hiddenSegments>
                    <add segment="node_modules" />
                </hiddenSegments>
            </requestFiltering>
        </security>
    </system.webServer>
    <system.web>
        <compilation defaultLanguage="js" />
    </system.web>
</configuration>

У кого-нибудь есть какие-либо идеи о том, что может отсутствовать или происходить, поскольку в Интернете не было много ссылок на хостинг рендеринга на стороне сервера на сервере Windows? Может быть, дополнительная конфигурация на IIS, web.config или на хостинге веб-сайта?

Редактировать:

Интересный тест, который я только что сделал: на моем локальном компьютере для разработки, когда я запускаю терминал:

узел bundle.react.js

внутри папки /build я получаю тот же результат, что и проблема, возникающая в Интернете (нет макета, стилей, изображений и т. д.).

Но когда я запускаю терминал:

сборка узла/bundle.react.js

из-за пределов папки /build (из базового каталога) он загружается отлично.

На большее. Базовые каталоги организованы следующим образом:

¦(некоторые папки)
- /строить/
--bundle.react.js
--/сборка/общедоступная/
---/файлы-макет/
---/шрифты/
---bundle.react.client.js
-node_modules
¦(некоторые корневые файлы, такие как webpack и т. д.)

Я предполагаю, что есть какая-то проблема со ссылкой на папку /node_modules из-за того, как я написал файл web.config, но я понятия не имею, как на него ссылаться.

Рейтинг:0
флаг cn

Получил работу! Следующая ссылка помогла мне внести окончательные корректировки вместе с тестом, который я провел: https://www.thecodehubs.com/how-to-deploy-ssr-angular-universal-to-iis/

Подводя итог, оказалось, что мне пришлось скопировать пакет сервера в корневой каталог. И измените файл web.config, чтобы он вызывал корневой файл.Вот как закончился файл web.config, а также некоторые другие конфигурации, которые я нашел интересными в ссылке, которую я разместил (еще не тестировал без дополнительной конфигурации):

<configuration>
    <system.webServer>
        <iisnode nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />
        
        <handlers>
            <add name="iisnode" path="bundle.react.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <!-- Redirect to HTTPS. -->
                <rule name="Redirect to HTTPS / SSL" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" redirectType="Found" url="https://{HTTP_HOST}/{R:1}" />
                </rule>

                <!-- Don't interfere with requests for logs. -->
                <rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^[a-zA-Z0-9_\-]+\.js\.logs\/\d+\.txt$" />
                </rule>
                
                <!-- Node. -->
                <rule name="sendToNode">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="bundle.react.js" />
                </rule>
                
                <rule name="StaticContent" stopProcessing="true">
                  <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
                  <action type="None" />
                </rule>
            </rules>
        </rewrite> 
        
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" />
            <remove fileExtension=".svg" />
            <remove fileExtension=".eot" />
            <remove fileExtension=".ttf" />
            <remove fileExtension=".woff" />
            <remove fileExtension=".woff2" />
            <remove fileExtension=".otf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
            <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
            <mimeMap fileExtension=".otf" mimeType="application/otf" />
        </staticContent>
        
        
        <defaultDocument>
            <files>
                <clear />
                <add value="bundle.react.js" />
            </files>
        </defaultDocument>

        <security>
          <requestFiltering>
            <hiddenSegments>
              <add segment="node_modules" />
              <!--add segment="iisnode" /-->
            </hiddenSegments>
          </requestFiltering>
        </security>
    </system.webServer>
    <system.web>
        <compilation defaultLanguage="js" />
    </system.web>
</configuration>

Ответить или комментировать

Большинство людей не понимают, что склонность к познанию нового открывает путь к обучению и улучшает межличностные связи. В исследованиях Элисон, например, хотя люди могли точно вспомнить, сколько вопросов было задано в их разговорах, они не чувствовали интуитивно связи между вопросами и симпатиями. В четырех исследованиях, в которых участники сами участвовали в разговорах или читали стенограммы чужих разговоров, люди, как правило, не осознавали, что задаваемый вопрос повлияет — или повлиял — на уровень дружбы между собеседниками.