ติดตั้งและใช้ Cloud Tools for Visual Studio

1. ภาพรวม

Visual Studio เป็น IDE ที่นักพัฒนา Windows และ .NET นิยมใช้ Cloud Tools for Visual Studio เป็นปลั๊กอินสำหรับสร้างและทดสอบแอปพลิเคชัน Windows และ .NET ในเครื่อง รวมถึงปรับใช้แอปพลิเคชันเหล่านั้นกับ Google Cloud Platform โดยตรงจาก Visual Studio

Google Cloud Explorer ช่วยให้คุณเรียกดูโปรเจ็กต์และทรัพยากร Google Cloud ในบัญชีทั้งหมดใน Visual Studio ได้อย่างง่ายดาย

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีติดตั้งและใช้ Cloud Tools for Visual Studio รวมถึงวิธีโต้ตอบกับทรัพยากร Google Cloud จาก Visual Studio โดยตรง

สิ่งที่คุณจะได้เรียนรู้

  • วิธีติดตั้ง Cloud Tools for Visual Studio
  • วิธีตรวจสอบสิทธิ์กับ Google Cloud Platform
  • วิธีใช้ Google Cloud Explorer เพื่อจัดการทรัพยากร
  • วิธีสร้างและจัดการอินสแตนซ์ Google Compute Engine
  • วิธีสร้างและติดตั้งใช้งานแอป ASP.NET
  • วิธีเรียกดู Google Cloud Storage

สิ่งที่คุณต้องมี

  • โปรเจ็กต์ Google Cloud Platform
  • เบราว์เซอร์ เช่น Chrome หรือ Firefox
  • เครื่อง Windows ที่ติดตั้ง Visual Studio 2015
  • ติดตั้ง Google Cloud SDK สำหรับ Windows แล้ว

คุณจะใช้บทแนะนำนี้อย่างไร

อ่านอย่างเดียว อ่านและทำแบบฝึกหัด

คุณจะให้คะแนนประสบการณ์การใช้งาน Google Cloud Platform เท่าไร

ผู้เริ่มต้น ระดับกลาง ผู้ชำนาญ

2. การตั้งค่าและข้อกำหนด

สำหรับ Codelab นี้ คุณต้องมีโปรเจ็กต์ Google Cloud Platform เพื่อโต้ตอบกับ Visual Studio หากมีโปรเจ็กต์อยู่แล้ว คุณจะใช้โปรเจ็กต์นั้นหรือสร้างโปรเจ็กต์ใหม่โดยทำตามขั้นตอนต่อไปนี้ก็ได้

การตั้งค่าสภาพแวดล้อมแบบเรียนรู้ด้วยตนเอง

หากยังไม่มีบัญชี Google (Gmail หรือ G Suite) คุณต้องสร้างบัญชี ลงชื่อเข้าใช้ Google Cloud Console ( console.cloud.google.com) แล้วสร้างโปรเจ็กต์ใหม่โดยทำดังนี้

aa2b71cbc7c28c59.png

60b154eb0fd9569a.png

โปรดจดจำรหัสโปรเจ็กต์ ซึ่งเป็นชื่อที่ไม่ซ้ำกันในโปรเจ็กต์ Google Cloud Platform ทั้งหมด ซึ่งจะเรียกว่า PROJECT_ID ในภายหลังใน Codelab นี้

จากนั้นคุณต้องเปิดใช้การเรียกเก็บเงินใน Google Cloud Console เพื่อใช้ทรัพยากร Google Cloud Platform เช่น Google Cloud Datastore และ Cloud Storage

ผู้ใช้ใหม่ของ Google Cloud Platform มีสิทธิ์ทดลองใช้ฟรี$300 การทำ Codelab นี้ไม่ควรมีค่าใช้จ่ายเกิน 2-3 ดอลลาร์ แต่ก็อาจมีค่าใช้จ่ายมากกว่านี้หากคุณตัดสินใจใช้ทรัพยากรเพิ่มเติมหรือปล่อยให้ทรัพยากรทำงานต่อไป (ดูส่วน "การล้างข้อมูล" ที่ท้ายเอกสารนี้)

3. การติดตั้ง

คุณติดตั้ง Cloud Tools for Visual Studio ได้โดยตรงภายใน Visual Studio จาก Visual Studio Gallery เริ่ม Visual Studio ไปที่เมนูเครื่องมือ แล้วเลือกส่วนขยายและการอัปเดต ซึ่งจะเป็นการเปิดหน้าต่างใหม่ ทางด้านซ้ายมือ ให้เลือกออนไลน์ แล้วเลือกแกลเลอรี Visual Studio ทางด้านขวามือ คุณควรเห็นช่องป้อนข้อความค้นหาแกลเลอรี Visual Studio ค้นหา Google Cloud ซึ่งควรแสดงผลลัพธ์หลายรายการ แต่คุณควรเห็น Google Cloud Tools สำหรับ Visual Studio

793794e10f2e6f68.png

คลิกดาวน์โหลด ระบบจะดาวน์โหลดปลั๊กอิน จากนั้นคุณสามารถคลิกติดตั้งเพื่อติดตั้งได้ เมื่อติดตั้งเสร็จแล้ว คุณจะต้องรีสตาร์ท Visual Studio

คุณควรเห็นรายการเมนู Google Cloud Tools ใหม่ในเมนูเครื่องมือของ Visual Studio เพื่อให้แน่ใจว่าทุกอย่างได้รับการติดตั้งอย่างถูกต้อง

4. การตรวจสอบสิทธิ์

คุณต้องตรวจสอบสิทธิ์กับ Google Cloud Platform ก่อนจึงจะใช้ Cloud Tools for Visual Studio ได้ ไปที่เครื่องมือ > เครื่องมือ Google Cloud > จัดการบัญชี > เพิ่มบัญชี

ซึ่งจะเปิดหน้าต่างเบราว์เซอร์ใหม่ที่คุณสามารถเข้าสู่ระบบด้วยบัญชี Google หากไม่ได้ตั้งค่าเบราว์เซอร์เริ่มต้น บางครั้งคุณอาจติดอยู่กับกล่องโต้ตอบ "คุณต้องการเปิดเว็บไซต์นี้อย่างไร" ในกรณีนี้ ให้ตรวจสอบว่าคุณได้ตั้งค่า Chrome เป็นเบราว์เซอร์เริ่มต้นแล้วลองอีกครั้ง

จากนั้นคุณควรให้สิทธิ์ Cloud Tools for Visual Studio เข้าถึงโปรเจ็กต์ Google Cloud Platform เมื่อเสร็จแล้ว คุณควรเห็นข้อความขณะนี้ Visual Studio ได้รับอนุญาตให้เข้าถึงบัญชีของคุณแล้ว

คุณปิดเบราว์เซอร์และกลับไปที่ Visual Studio ได้ โปรดดูอีกครั้งในส่วนเครื่องมือ Google Cloud > จัดการบัญชี คุณควรเห็นบัญชีของคุณแสดงอยู่

5. Google Cloud Explorer

เมื่อได้รับการตรวจสอบสิทธิ์แล้ว คุณก็พร้อมที่จะใช้ Google Cloud Explorer เพื่อจัดการทรัพยากร ใน Visual Studio ให้ไปที่เครื่องมือ > เครื่องมือ Google Cloud > แสดง Google Cloud Explorer

ซึ่งจะเป็นการเปิดหน้าต่างใหม่ เลือกโปรเจ็กต์ Google Cloud Platform ที่ด้านบน ตรงกลาง คุณจะเห็นทรัพยากร Compute Engine, Cloud Storage และ Cloud SQL

801c1722b560f407.png

ในส่วนถัดไป คุณจะได้เรียนรู้วิธีสร้างและจัดการอินสแตนซ์ Compute Engine จาก Visual Studio

6. สร้างและจัดการอินสแตนซ์ Google Compute Engine

สร้างอินสแตนซ์

ในส่วนนี้ คุณจะทำให้เครื่อง Windows ที่ติดตั้งเฟรมเวิร์ก ASP.NET ใช้งานได้กับ Compute Engine โดยคลิกขวาที่ Google Compute Engine แล้วเลือกอินสแตนซ์ ASP.NET ใหม่

ef78cea8bca7ff1e.png

ซึ่งจะเปิดหน้าต่างเบราว์เซอร์ใหม่พร้อม Cloud Launcher ทำตามข้อความแจ้งเพื่อติดตั้งใช้งานอินสแตนซ์ Windows ด้วยเฟรมเวิร์ก ASP.NET การติดตั้งใช้งานจะใช้เวลาสักครู่จึงจะเสร็จสมบูรณ์ เมื่อเสร็จสมบูรณ์แล้ว คุณจะเห็นอินสแตนซ์ใหม่ในรายการอินสแตนซ์ Compute Engine ทั้งใน Visual Studio และ Google Cloud Console

สร้างชื่อผู้ใช้และรหัสผ่าน Windows

หากต้องการเชื่อมต่อโดยใช้เดสก์ท็อประยะไกลกับเครื่องเสมือนใหม่หรือบันทึกไฟล์การตั้งค่าการเผยแพร่ (เพื่อใช้ในระหว่างการติดตั้งใช้งาน) คุณต้องสร้างชื่อผู้ใช้และรหัสผ่านของ Windows คลิกขวาที่อินสแตนซ์ Compute Engine ที่สร้างขึ้นใหม่ (ซึ่งจะขึ้นต้นด้วย "aspnet") แล้วเลือกจัดการข้อมูลเข้าสู่ระบบของ Windows

573d93972b3d6fff.png

ในหน้าจอถัดไป คุณสามารถสร้างผู้ใช้ Windows และรหัสผ่าน (หรือจะให้ปลั๊กอิน Visual Studio สร้างให้ก็ได้) หากเห็นข้อผิดพลาด "คุณต้องติดตั้งคอมโพเนนต์เบต้าของ Google Cloud SDK" ให้ทำตามวิธีการเพื่อติดตั้งคอมโพเนนต์เบต้า แล้วสร้างผู้ใช้ต่อ เมื่อสร้างผู้ใช้แล้ว คุณควรเห็นผู้ใช้ดังกล่าวในรายการผู้ใช้

หากต้องการทดสอบว่าคุณสามารถ RDP ไปยังอินสแตนซ์ด้วยผู้ใช้ Windows ใหม่ได้ ให้คลิกขวาที่อินสแตนซ์ Compute Engine อีกครั้ง แล้วเลือกเปิดเซสชันเดสก์ท็อประยะไกล จากนั้นเลือกผู้ใช้ Windows ที่คุณเพิ่งสร้างจากเมนูแบบเลื่อนลง คลิก Open แล้วคลิก Connect หากได้รับคำเตือนเกี่ยวกับใบรับรอง ให้ไม่สนใจและดำเนินการต่อโดยเลือกใช่ หลังจากผ่านไป 2-3 วินาที คุณควรเห็นเซสชัน Remote Desktop เปิดขึ้นในอินสแตนซ์ Windows ที่ทำงานบน Compute Engine

6792760b1829ebd1.png

บันทึกการตั้งค่าการเผยแพร่

นอกจากนี้ คุณยังดำเนินการอื่นๆ กับอินสแตนซ์ Compute Engine จาก Visual Studio ได้ด้วย เช่น การตั้งค่ากฎไฟร์วอลล์หรือการหยุดอินสแตนซ์ หากต้องการดูรายการทั้งหมด ให้คลิกขวาที่อินสแตนซ์

คุณสามารถดำเนินการด้วยตนเองได้ แต่โปรดตรวจสอบว่าได้บันทึกไฟล์การตั้งค่าการเผยแพร่แล้ว เลือกบันทึกการตั้งค่าการเผยแพร่ เลือกชื่อผู้ใช้ Windows แล้วดาวน์โหลดไฟล์ คุณจะใช้ไฟล์นี้เพื่อทำให้แอป ASP.NET อย่างง่ายใช้งานได้ใน Google Cloud Platform ในส่วนนี้

7. สร้างและนำแอป ASP.NET ไปใช้งาน

สร้างแอป ASP.NET MVC จากเทมเพลตโปรเจ็กต์ Google Cloud Platform

Cloud Tools Visual Studio มาพร้อมกับเทมเพลตโปรเจ็กต์ Google Cloud Platform บางรายการ ในส่วนนี้ คุณจะได้สร้างแอป ASP.NET MVC อย่างง่ายโดยใช้เทมเพลตใดเทมเพลตหนึ่งดังกล่าว และนำไปใช้งานใน Google Cloud Platform โดยใช้ไฟล์การตั้งค่าการเผยแพร่ที่คุณบันทึกไว้ก่อนหน้านี้

หากต้องการเริ่มต้นใช้งาน ให้ไปที่ใหม่ > โปรเจ็กต์ > Visual C# > Google Cloud Platform ใน Visual Studio เทมเพลต Google Cloud Platform มี 2 แบบ ได้แก่ เทมเพลตสำหรับ MVC และเทมเพลตสำหรับ Web API เลือกเทมเพลต Google ASP.NET 4 MVC ปรับชื่อโปรเจ็กต์ ชื่อโซลูชัน และตำแหน่งตามที่ต้องการ แล้วคลิกตกลง ซึ่งจะเป็นการสร้างโซลูชันและโปรเจ็กต์ใหม่สำหรับแอป ASP.NET

เรียกใช้แอปในเครื่อง

หากต้องการทดสอบแอปในเครื่อง ให้ไปที่แก้ไขข้อบกพร่อง > เริ่มการแก้ไขข้อบกพร่อง ซึ่งจะดาวน์โหลดการอ้างอิง NuGet ก่อน แล้วจึงสร้างแอป ในอีกไม่กี่วินาทีต่อมา หน้าต่างเบราว์เซอร์ควรจะปรากฏขึ้นพร้อมกับแอป MVC ที่ทำงานในเครื่อง

6f264456e8038700.png

เมื่อยืนยันแล้วว่าแอปทำงานตามที่คาดไว้ ให้หยุดแอป (Shift + F5)

ติดตั้งใช้งานแอปใน Google Cloud

ตอนนี้คุณพร้อมที่จะทำให้แอปใช้งานได้ใน Google Cloud Platform แล้ว คลิกขวาที่โปรเจ็กต์ แล้วคลิกเผยแพร่

8d230a4bbcc6aa44.png

ซึ่งจะเปิดกล่องโต้ตอบการเผยแพร่ ในกล่องโต้ตอบการเผยแพร่ ให้เลือกนำเข้าเป็นเป้าหมายการเผยแพร่ แล้วชี้ไปยังไฟล์การตั้งค่าการเผยแพร่ที่คุณดาวน์โหลดไว้ก่อนหน้านี้

คุณควรเห็นกล่องโต้ตอบการเชื่อมต่อที่มีการป้อนข้อมูลเซิร์ฟเวอร์ ชื่อเว็บไซต์ ฯลฯ ไว้ล่วงหน้า ตรวจสอบว่าการเชื่อมต่อสัญญาณดีโดยคลิกตรวจสอบการเชื่อมต่อ คุณควรเห็นลูกศรสีเขียวหลังจากนั้นไม่นาน

396613835acc065f.png

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

bb25fd89ffcca1e.png

คลิกเผยแพร่ การดำเนินการนี้จะสร้างและเผยแพร่แอปไปยัง Google Cloud สุดท้าย คุณควรเห็นข้อความเผยแพร่สำเร็จในหน้าต่างเอาต์พุต

55a920a8ae2c44e.png

ตอนนี้คุณควรจะไปที่ IP ภายนอกของอินสแตนซ์ Compute Engine และดูแอป MVC เริ่มต้นได้ วิธีที่ง่ายที่สุดคือไปที่เครื่องมือ > เครื่องมือ Google Cloud > แสดง Google Cloud Explorer คลิกขวาที่อินสแตนซ์ Compute Engine แล้วเลือกเปิดเว็บไซต์

b80e32136c037a0.png

8. เรียกดู Google Cloud Storage

ในส่วนนี้ของโค้ดแล็บ คุณจะสร้างที่เก็บข้อมูล Cloud Storage, อัปโหลดไฟล์แบบสุ่มไปยังที่เก็บข้อมูล แล้วใช้ Google Cloud Explorer เพื่อเรียกดูที่เก็บข้อมูลนั้น

หากต้องการสร้างที่เก็บข้อมูล ให้ไปที่คอนโซล Google Cloud แล้วเลือก Storage ในรายการผลิตภัณฑ์

25f93c20933f0b87.png

เลือกสร้างที่เก็บข้อมูล ตั้งชื่อที่ไม่ซ้ำกัน แล้วคลิกสร้าง เมื่อสร้างที่เก็บข้อมูลแล้ว คุณจะอัปโหลดไฟล์ไปยังที่เก็บข้อมูลและดูไฟล์เหล่านั้นได้ในเบราว์เซอร์พื้นที่เก็บข้อมูล

9912d408cdb51f31.png

ตอนนี้กลับไปที่ Visual Studio แล้วเปิด Google Cloud Explorer ที่ด้านซ้ายบน ให้กดปุ่มรีเฟรช คุณควรเห็นที่เก็บข้อมูลใหม่ในส่วน Google Cloud Storage คุณคลิกขวาที่ที่เก็บข้อมูลแล้วเลือกเปิดในคอนโซล Cloud Platform เพื่อเรียกดูที่เก็บข้อมูลได้

882ff1d836529d2d.png

9. ยินดีด้วย

ใน Codelab นี้ คุณได้เรียนรู้วิธีจัดการอินสแตนซ์ Compute Engine และที่เก็บข้อมูล Cloud Storage จาก Visual Studio แต่ยังมีอีกมาก นอกจากนี้ คุณยังจัดการทรัพยากร Cloud SQL จาก Visual Studio ได้ด้วย แต่เราจะปล่อยให้เป็นแบบฝึกหัดสำหรับผู้อ่าน ดูข้อมูลเพิ่มเติมได้ที่รายการขั้นตอนถัดไปด้านล่าง

สิ่งที่เราได้พูดถึง

  • วิธีติดตั้ง Cloud Tools for Visual Studio
  • วิธีตรวจสอบสิทธิ์กับ Google Cloud Platform
  • วิธีใช้ Google Cloud Explorer เพื่อจัดการทรัพยากร
  • วิธีสร้างและจัดการอินสแตนซ์ Google Compute Engine
  • วิธีสร้างและติดตั้งใช้งานแอป ASP.NET
  • วิธีเรียกดู Google Cloud Storage

ขั้นตอนถัดไป