KwangTung Taesuji 31/8/2565

ติดตั้ง Nuxt.js และ .NET CORE บน Azure VM

บทความนี้ผู้เขียนได้ทำการทดลอง Deploy Nuxt.JS และ .Net Core 3.1 บน VM โดยเลือกใช้บริการของ Azure Cloud โดยได้เตรียม Source code ทางฝั่ง Nuxt.JS ที่เป็น Project TypeScript ประกอบไปด้วย lib เบื้องต้น เช่น Vuetify, axios, fibers และเตรียม Source code ฝั่ง .NET Core 3.1 มี controller ตัวอย่างและได้ลง Swagger พร้อมทั้ง Nuxt Helper ใน SPA ไว้เรียบร้อยแล้ว

1. ติดตั้ง Azure VM

         1.1 สร้าง Virual machines บน Azure โดยเลือกขนาด size ตามที่เราต้องการ โดย OS ที่เราจะใช้ในบทความนี้ คือ Windows Server 2016

2 Core, Ram 4 เมื่อสร้างเสร็จเราจะได้ public IP มา เช่น 1x.xxx.xxx.255 ให้นำมาใช้ในการ map binding IIS ต่อไปอย่าลืม

allow Port OutBound สำหรับ API ไว้ด้วยนะ บทความนี้ใช้ port 5000

 

 

1.2 ตั้งค่าให้สามารถ RDP (Remote Desktop Protocol) เพื่อให้เราสามารถ remote เข้าไปติดตั้งโปรแกรมต่าง ๆ ใน Server ได้

2. ติดตั้ง IIS

        2.1 สร้าง Site สำหรับติดตั้ง api และ web ขึ้นมาใน IIS โดยกำหนด port ต่างกัน ดังนี้

สำหรับ Your.web: Localhost:80 (ใช้ public IP 1x.xxx.xxx.255:80)
             สำหรับ Your.api: Localhost:5000 (ใช้ public IP 1x.xxx.xxx.255:5000)

   

 

           2.2 สร้าง Application Pool โดยทำตามขั้นตอน ดังนี้
                Application Pools > my website > Advanced Settings > .NET CLR Version, และ เลือก No Managed Code

3. ติดตั้ง .NET CORE 3.1

เข้าไปดาวน์โหลดตัวติดตั้ง .NET CORE 3.1 ได้ที่ https://dotnet.microsoft.com/download/dotnet-core/3.1

     

 

     กด Install จนเสร็จสิ้น จากนั้น copy source code ที่เรา build เตรียมไว้แล้ว ไปใส่ Folder: Your.api และทำการ link path กับ IIS

จากนั้น Restart สักรอบ แล้วลองทดสอบผ่าน browser

4. ติดตั้ง NODE.JS

เข้าไปดาวน์โหลดตัวติดตั้ง NODE.JS ได้ที่ https://nodejs.org/en/download/ โดยเลือกใช้แบบ 32 bit สำหรับ WINDOWS นะ

5. ติดตั้ง Nuxt.JS

Build เว็บของเราให้ไปอยู่ Dist ก่อน โดยใช้คำสั่ง

“ npm run build” หรือ “ npm run generate”

     

       สำหรับการ Connect ระหว่าง NUXT JS และ .NET Core เพื่อให้เกิด runtimes เดียวกันในตอนพัฒนา ให้ทำการเพิ่ม Nuxt Helper ดังนี้

Trick สำหรับการใส่ Allow SPA ให้ NUXT ใน .NET CORE

https://samwalpole.com/how-to-run-nuxt-from-a-aspnet-core-web-application

6. สร้าง web config ใน folder DIST

 

7. รันทดสอบ NUXT.JS

กำหนด Port: 80 ให้กับ Your.web และทดลองรันบน browser

 

บทความนี้เป็นวิธีพื้นฐานในการติดตั้ง Nuxt.JS และ .NET Core บน Azure VM สามารถนำไปประยุกต์ใช้กับ VM เจ้าอื่น ๆ ได้

Ref: https://samwalpole.com/how-to-run-nuxt-from-a-aspnet-core-web-application