Doar un avertisment: este prima dată când încerc să implementez o aplicație react pe un server Windows personalizat, dar am reușit să o fac cu succes pe Heroku și Linux (PM2), așa că știu că arhitectura aplicației este presupune să funcționeze corect.
Scenariul:
Am construit un server de găzduire Windows Server 2016 / 64 de biți pentru a găzdui mai multe site-uri web. Am folosit VPS Contabo pentru a face acest lucru. Am testat toate caracteristicile care ar trebui să funcționeze, chiar și cu alte aplicații precum ASP.NET, PHP, certificate SSL și totul funcționează bine.
În ceea ce privește proiectul specific node js pe care încerc să-l găzduiesc pe acest server, acesta constă din 2 părți principale:
- Backend în nod împreună cu un CMS, dezvoltat și în nod / javascript.
Am creat un spațiu de găzduire pe un subdomeniu pentru acesta și funcționează perfect, chiar și cu certificatul Letâs Encrypt SSL. În cazul în care cineva dorește să-l acceseze, ar fi pe:
https://backendnode.fullstackwebdesigner.com/system
- Redarea front-end în partea serverului react.
Aici apare problema. Dacă cineva dorește să-l acceseze, iată link-ul:
https://fullstackwebdesigner.com/
Am folosit practic aceeași tehnică pentru amândoi:
- iisnode;
- extensie de rescriere URL;
- modulele nod iis;
- configurarea fișierului web.config;
Problema:
Am reușit să se încarce ca site web, la fel ca și cu backend-ul, dar problema este că nu se încarcă fișierele CSS, imaginile și așa mai departe. Deci aspectul nu se încarcă. Pe consolă, există un mesaj de eroare:
Eroare de sintaxă neprinsă: indicativ neașteptat „<”
Aplicația de reacție:
După cum am spus mai devreme, a fost făcută ca o aplicație de redare pe partea serverului și a fost inclusă cu webpack. Deci, creează fișierele incluse într-un director numit â/buildâ. Și în acest director, există un director â/publicâ în care se află toate elementele, cum ar fi fișierele CSS și imaginile.
În timpul dezvoltării, aș rula construirea pe terminal ca:
node build/bundle.react.js
Și oricât de ciudat ar părea, când rulez asta pe terminalul de pe serverul Windows, funcționează perfect. Dar poate fi accesat doar prin:
http://localhost:3001
Încarcă tot ceea ce ar trebui să încarce.
Iată o reprezentare simplificată a structurii fișierului:
- /construi/
--bundle.react.js
--/build/public/
---/fisiere-aspect/
---/fonturi/
---bundle.react.client.js
Iată, de asemenea, fișierul web.config pe care îl folosesc pe spațiul de găzduire a site-ului web pentru construirea react:
<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>
Are cineva idee despre ce ar putea lipsi sau se întâmplă, deoarece nu au existat multe referințe despre redarea serverului de găzduire pe serverul Windows pe web? Poate o configurație suplimentară pe IIS, web.config sau pe spațiul de găzduire a site-ului?
Editați | ×:
Un test interesant pe care tocmai l-am făcut: pe computerul meu de dezvoltare locală, când rulez prin terminal:
node bundle.react.js
din interiorul folderului /build, obțin același rezultat ca și problema care se întâmplă online (fără aspect, stiluri, imagini și așa mai departe).
Dar când alerg prin terminal:
node build/bundle.react.js
din afara folderului /build (din directorul de baza), se incarca perfect.
Pe mai multe lucruri. Directoarele de bază sunt organizate astfel:
â¦(unele dosare)
- /construi/
--bundle.react.js
--/build/public/
---/fisiere-aspect/
---/fonturi/
---bundle.react.client.js
-node_module
â¦(unele fișiere rădăcină, cum ar fi webpack și așa mai departe)
Bănuiesc că există un fel de problemă la referirea folderului /node_modules din cauza modului în care am scris fișierul web.config, dar nu am idee cum ar trebui să-l facă referire.
