Deploy JSP to Azure App Service

Apache Tomcat คืออะไร ?!

Apache Tomcat เป็นเซิร์ฟเวอร์ HTTP และคอนเทนเนอร์ Java Servlet ใช้กับ Servlet, Java Server Pages (JSP), Java Expression Language และ Java WebSocket

 

Azure App Service ?!

Azure App Service เป็นโซลูชันแพลตฟอร์ม (PaaS: Platform as a service) ที่ให้บริการโดย Microsoft Azure เป็นบริการที่ใช้งานง่าย เหมาะสำหรับการรันเว็บแอปพลิเคชันต่างๆ
และรองรับภาษา Java อีกด้วย

 

สิ่งที่จะต้องติดตั้ง 

• JDK (Java Downloads | Oracle)
• Tomcat (Apache Tomcat® – Apache Tomcat 9 Software Downloads)
• Esclipse (Eclipse Downloads | The Eclipse Foundation)

 

มาเริ่มสร้าง JSP ไฟล์แรกกันก่อนเลย

1.เปิดโปรแกรม Eclipse IDE for Enterprise Java and Web Developers ขึ้นมา 

2.เมื่อเปิดขึ้นมาให้ไปที่เมนู File เลือก New และเลือก Dynamic Web Project

3.จากนั้นให้ตั้งชื่อโปรเจคและเลือก Runtime ที่เราได้ทำการติดตั้งไว้บนเครื่องในที่นี้จะเลือกเป็น Apache Tomcat v10.0 แล้วกด Finish

4.เมื่อได้ไฟล์โปรเจคที่สร้างขึ้นมาแล้ว ให้เราทำการคลิกขวาที่โปรเจคนั้น แล้วกด New แล้วเลือก JSP File

5.ทำการเลือก path ไปยังโฟลเดอร์ webapp และตั้งชื่อไฟล์ .jsp

6.จะได้ไฟล์ JSP ที่ตั้งขึ้นมาพร้อมกับโค้ด JSP เริ่มต้น

7.เราสามารถใช้คำสั่งภาษา HTML CSS ลงไปในไฟล์ JSP ได้เลย ดังเช่นโค้ดด้านล่าง
สามารถ Copy code ได้ที่ https://pastebin.com/mSpF3E3k 💻

8.เมื่อเราทำการเขียนโค้ดเสร็จแล้ว ต้องการรันเว็บผ่านเซิร์ฟเวอร์ Tomcat ให้ไปที่เมนู Windows เลือก Show View และเลือก Servers 

9.ถ้าหากของใครไม่มี Server ให้กดเลือก Other…  แล้วมาที่โฟลเดอร์ Server เลือก Servers และกด Open ได้เลย

10.หลังนั้นจะพบกับหน้าต่างของเซิร์ฟเวอร์จำลอง ซึ่งเพื่อนๆ สามารถตั้งค่าต่างๆและเปลี่ยนเลขพอร์ตได้จากหน้านี้ได้เลยครับผม 

11.เมื่อทำการตั้งค่าเสร็จแล้ว ให้มาที่ปุ่มวงกลมสีเขียวด้านบน เลือก Run As และกด Run on Server

12.เลือกเซิร์ฟเวอร์ที่เราจะใช้รันแล้วกดปุ่ม Finish ได้เลย

13.เมื่อรันเสร็จเรียบร้อยจะได้หน้าตาของหน้าเว็บที่เราได้เขียนโค้ดไว้แสดงผลออกมาได้ดังรูปด้านล่าง

14.ตอนนี้เรามีหน้าเว็บฟอร์มสำหรับลงทะเบียนแล้ว ลองสร้างอีกหน้าเว็บนึงสำหรับแสดงผลลัพธ์ข้อมูลที่เรากรอกลงไป ในส่วนนี้จะมีการใช้ภาษา Java นำข้อมูลมาแสดง โดยการสร้างไฟล์ JSP ขึ้นมาอีกไฟล์ ไปที่ New และ JSP File เช่นเดิม 

15.ทำการเลือก path และตั้งชื่อไฟล์ .jsp ในที่นี้จะใช้ชื่อว่า result.jsp 

16.เมื่อทำการสร้างไฟล์ขึ้นมาแล้วให้แทนที่ด้วยโค้ดเริ่มต้นด้วยโค้ดด้านล่าง จากโค้ดด้านล่างจะเห็นว่ามีการรับพารามิเตอร์จากหน้าฟอร์มและมีการใช้คำสั่ง Java ในการนำข้อมูลมาแสดงบนหน้าเว็บ
สามารถ Copy code ได้ที่  https://pastebin.com/VvAknKkx

17.แล้วก็ทำการรัน Tomcat เซิร์ฟเวอร์อีกครั้งและลองกรอกข้อมูลแล้วกดปุ่ม Submit เพื่อดูผลลัพธ์ 

18.จะเห็นได้ว่าหน้าเว็บ result.jsp ได้นำข้อมูลที่ผู้ใช้ได้กรอกในฟอร์มมาแสดงในหน้านี้

19.เมื่อหน้าเว็บใช้งานได้เรียบร้อยแล้ว ต่อไปจะเป็นขั้นตอนการนำเว็บขึ้นคลาวด์ Microsoft Azure โดยใช้บริการ Azure App Service โดยให้ไปที่ Help และกด Eclipse Marketplace…

20.ทำการค้นหาคำว่า Azure แล้วทำการกด Install ที่ Azure Toolkit Eclipse 

21.เมื่อติดตั้งเรียบร้อยให้ทำการรีสตาร์ทโปรแกรมใหม่ 

22.เมื่อเปิดโปรแกรมขึ้นมาอีกครั้งจะสังเกตได้ว่ามีส่วนเสริมของ Azure บนแถบด้านบนเพิ่มขึ้นมา

23.ขั้นตอนต่อไปให้เราคลิกขวาที่โฟลเดอร์ของโปรเจคที่เราต้องการนำขึ้น แล้วไปที่ Azure และกด Publish as Azure Web App…

24.เลือก Device login และกด Sign in

25.กด Copy&Open 

26.ระบบจะไปยังหน้าเว็บของ Microsoft และให้เรากดปุ่ม CTRL+V เพื่อวางโค้ดแล้วกดปุ่ม Next

27.ระบบจะให้ทำการล็อกอิน Azure เมื่อเว็บแสดงหน้าต่างตามรูปด้านล่างก็จะถือว่าได้ทำการล็อกอิน Azure เรียบร้อยแล้ว สามารถกลับไปยังโปรแกรม Eclipse IDE for Enterprise Java and Web Developers ได้เลย

28.เมื่อมาที่โปรแกรมให้เราเลือก Subscriptions ของเราและทำการกด Select

29.ทำการสร้างบริการ App Service โดย 

• Enter name คือส่วนการตั้งชื่อ url ของเรา ซึ่งจะมี.azurewebsites.net ต่อท้าย
• Subscription รูปแบบการสมัครสมาชิกของใช้งาน Azure ของเรา
• มีระบบปฏิบัติการให้เลือกสองแบบทั้ง Linux และ Windows
• Runtime เลือกเป็น Tomcat
• App service plan จะมีให้สร้างชื่อแพลน, Location คือโซนที่ตั้งของเครื่อง datacenter, Pricing tier เลือกเป็น Free_F1 เนื่องจากใช้งานได้ฟรีสำหรับเว็บขนาดไม่เกิน 1GB
• Resource group เป็นเหมือนโฟลเดอร์ที่เก็บโปรเจคนั้น 

เมื่อตั้งค่าเรียบร้อยแล้วก็สามารถกดปุ่ม Create ได้เลย 

30.เมื่อเราสร้างเซอร์วิสเรียบร้อยแล้ว ให้เลือกเซอร์วิสที่เราต้องการแล้วกด Deploy ได้เลย

31.ระหว่างการ Deploy จะใช้เวลาสักนิด สามารถดูความคืบหน้าได้ตรง progress ด้านล่าง

32.เมื่อเว็บของเรา Deploy เสร็จแล้วตรง Progress จะแสดงคำว่า Published สามารถคลิกที่ลิงก์นั้นได้เลย

33.ตอนนี้เว็บแอพพลิเคชั่นของเราก็พร้อมที่จะใช้งานแล้วครับ เย้ 😊🎉

เรียนรู้เพิ่มเติมได้ที่ Java on Azure – Learn | Microsoft Docs