โปรดทราบ: นี่เป็นครั้งแรกที่ฉันพยายามปรับใช้แอปพลิเคชันตอบสนองบนเซิร์ฟเวอร์ Windows ที่สร้างขึ้นเอง แต่ฉันจัดการได้สำเร็จบน Heroku และ Linux (PM2) ดังนั้นฉันจึงรู้ว่าสถาปัตยกรรมแอปพลิเคชันนั้น สมมติว่าทำงานได้อย่างถูกต้อง
สถานการณ์:
ฉันได้สร้างเซิร์ฟเวอร์โฮสติ้ง Windows Server 2016 / 64 บิตเพื่อโฮสต์เว็บไซต์หลายแห่ง ฉันเคยใช้ VPS Contabo เพื่อทำเช่นนั้น ฉันได้ทดสอบคุณลักษณะทั้งหมดที่ควรจะใช้งานได้ แม้กับแอปพลิเคชันอื่นๆ เช่น ASP.NET, PHP, ใบรับรอง SSL และทุกอย่างทำงานได้ดี
สำหรับโปรเจ็กต์โหนด js เฉพาะที่ฉันพยายามโฮสต์บนเซิร์ฟเวอร์นี้ ประกอบด้วย 2 ส่วนหลัก:
ฉันสร้างพื้นที่โฮสติ้งบนโดเมนย่อยสำหรับโดเมนนี้ และมันก็ทำงานได้อย่างสมบูรณ์ แม้ว่าจะใช้ใบรับรอง SSL ของ Letâs Encrypt ก็ตาม เผื่อใครอยากเข้าจะได้ที่: https://backendnode.fullstackwebdesigner.com/system
นี่คือที่ที่ปัญหาเกิดขึ้น หากใครต้องการเข้าใช้ นี่คือลิงค์: https://fullstackwebdesigner.com/
ฉันใช้เทคนิคเดียวกันโดยพื้นฐานสำหรับทั้งคู่:
ปัญหา:
ฉันจัดการเพื่อให้โหลดเป็นเว็บไซต์ได้ เช่นเดียวกับที่ฉันทำกับแบ็กเอนด์ แต่ปัญหาคือดูเหมือนว่าจะโหลดไฟล์ CSS รูปภาพ และอื่นๆ ไม่ได้ ดังนั้นเลย์เอาต์จึงไม่โหลด บนคอนโซล มีข้อความแสดงข้อผิดพลาด:
Uncaught SyntaxError: โทเค็นที่ไม่คาดคิด '<'
แอปพลิเคชันตอบสนอง: อย่างที่ฉันได้กล่าวไปก่อนหน้านี้ มันถูกสร้างเป็นแอปพลิเคชันการแสดงผลฝั่งเซิร์ฟเวอร์และมาพร้อมกับ webpack ดังนั้นมันจึงสร้างไฟล์รวมไปยังไดเร็กทอรีชื่อ â/buildâ และในไดเร็กทอรีนี้ มีไดเร็กทอรี â/publicâ ที่เนื้อหาทั้งหมดอยู่ในนั้น เช่น ไฟล์ CSS และรูปภาพ
ในขณะที่กำลังพัฒนา ฉันจะรันบิลด์บนเทอร์มินัลเป็น: โหนด build/bundle.react.js
และดูแปลกอย่างที่เห็น เมื่อฉันเรียกใช้สิ่งนี้บนเทอร์มินัลบนเซิร์ฟเวอร์ windows มันทำงานได้อย่างสมบูรณ์ แต่สามารถเข้าถึงได้ผ่าน: http://localhost: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 server บนเว็บ อาจมีการกำหนดค่าเพิ่มเติมบน IIS, web.config หรือบนพื้นที่โฮสต์เว็บไซต์
แก้ไข:
การทดสอบที่น่าสนใจที่ฉันเพิ่งทำ: บนคอมพิวเตอร์สำหรับการพัฒนาในพื้นที่ของฉัน เมื่อฉันรันผ่านเทอร์มินัล:
โหนด Bundle.react.js
จากภายในโฟลเดอร์ /build ฉันได้รับผลลัพธ์เดียวกันกับปัญหาที่เกิดขึ้นทางออนไลน์ (ไม่มีเลย์เอาต์ สไตล์ รูปภาพ และอื่นๆ)
แต่เมื่อฉันวิ่งผ่านเทอร์มินัล:
โหนด build/bundle.react.js
จากภายนอกโฟลเดอร์ /build (จากไดเร็กทอรีฐาน) จะโหลดได้อย่างสมบูรณ์
ในสิ่งที่มากขึ้น ไดเร็กทอรีฐานมีการจัดระเบียบดังนี้:
â¦(บางโฟลเดอร์)
- /สร้าง/
--bundle.react.js
--/สร้าง/สาธารณะ/
---/รูปแบบไฟล์/
---/แบบอักษร/
---bundle.react.client.js
-node_modules
â¦(ไฟล์รูทบางไฟล์ เช่น webpack เป็นต้น)
ฉันเดาว่ามีปัญหาบางอย่างในการอ้างอิงโฟลเดอร์ /node_modules เนื่องจากฉันเขียนไฟล์ web.config แต่ฉันไม่รู้ว่าควรอ้างอิงอย่างไร
ใช้งานได้แล้ว! ลิงก์ต่อไปนี้ช่วยฉันในการปรับแต่งขั้นสุดท้ายพร้อมกับการทดสอบที่ฉันทำ: 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>
คนส่วนใหญ่ไม่เข้าใจว่าการถามคำถามมากมายจะปลดล็อกการเรียนรู้และปรับปรุงความสัมพันธ์ระหว่างบุคคล ตัวอย่างเช่น ในการศึกษาของ Alison แม้ว่าผู้คนจะจำได้อย่างแม่นยำว่ามีคำถามกี่ข้อที่ถูกถามในการสนทนา แต่พวกเขาไม่เข้าใจความเชื่อมโยงระหว่างคำถามและความชอบ จากการศึกษาทั้ง 4 เรื่องที่ผู้เข้าร่วมมีส่วนร่วมในการสนทนาด้วยตนเองหรืออ่านบันทึกการสนทนาของผู้อื่น ผู้คนมักไม่ตระหนักว่าการถามคำถามจะมีอิทธิพลหรือมีอิทธิพลต่อระดับมิตรภาพระหว่างผู้สนทนา
