Tạo ứng dụng Web Java với Visual Studio Code

Trong hướng dẫn này, bạn sẽ được tìm hiểu cách tạo ứng dụng web Java với Visual Studio Code. Bạn sẽ học cách chạy, gỡ lỗi và chỉnh sửa ứng dụng web Java trên máy tính cục bộ và cuối cùng là trên đám mây.

Kịch bản

Một ứng dụng web Spring Boot Getting Started đơn giản.

Hình ảnh: Chào từ Java

Chuẩn bị

Trước khi chạy và triển khai mẫu này, bạn phải có Java SE Development Kit (JDK) và các công cụ xây dựng Apache Maven trên môi trường phát triển cục bộ của bạn. Nếu bạn chưa có, hãy cài đặt chúng.

Tải và cài đặt Extension Pack for Java, bao gồm JDK 11.

Lưu ý: Biến môi trường JAVA_HOME phải được đặt thành vị trí cài đặt JDK để hoàn thành hướng dẫn này.

Tải Apache Maven phiên bản 3 hoặc mới hơn:

Tải Apache Maven

Cài đặt Apache Maven cho môi trường phát triển cục bộ của bạn.

Tải xuống và kiểm tra ứng dụng Spring Boot

Sao chép dự án mẫu Spring Boot Getting Started vào máy tính cục bộ của bạn. Bạn có thể sao chép một kho lưu trữ Git bằng lệnh Git: Clone trong Command Palette(⇧⌘P (Windows, Linux Ctrl+Shift+P)). Dán URL https://github.com/spring-guides/gs-spring-boot.git như là URL của kho lưu trữ từ xa và sau đó quyết định thư mục gốc để đặt kho lưu trữ cục bộ. Sau đó, mở thư mục hoàn chỉnh của kho lưu trữ đã sao chép trong VS Code bằng cách điều hướng đến thư mục và gõ lệnh code ..

Lưu ý: Bạn có thể cài đặt Visual Studio Code từ https://code.visualstudio.com và Git từ https://git-scm.com.

Hình ảnh: Sao chép kho lưu trữ Spring

Trong VS Code, mở tệp Java bất kỳ trong thư mục hoàn chỉnh (ví dụ: src/main/java/hello/Application.java). Nếu bạn chưa cài đặt các phần mở rộng ngôn ngữ Java cho VS Code, bạn sẽ được yêu cầu cài đặt Microsoft Extension Pack for Java. Hãy làm theo hướng dẫn và khởi động lại VS Code sau khi cài đặt.

Hình ảnh: Cài đặt phần mở rộng Java

Sau khi cài đặt Extension Pack for Java, nó sẽ tự động xây dựng dự án cho bạn (quá trình này có thể mất vài phút). Bạn có thể chạy ứng dụng trong VS Code bằng cách nhấn F5 và chọn môi trường Java. Phần mở rộng Java Debug sẽ tạo ra một tệp cấu hình gỡ lỗi launch.json cho bạn trong thư mục .vscode trong dự án của bạn. Bạn có thể xem tiến trình xây dựng trong thanh trạng thái của VS Code và khi mọi thứ hoàn tất, cấu hình gỡ lỗi được hiển thị.

Hình ảnh: Cấu hình gỡ lỗi trong thanh trạng thái

Bạn có thể tìm hiểu thêm về cách VS Code khởi chạy ứng dụng của bạn trong Cấu hình Khởi chạy Gỡ lỗi. Nhấn F5 một lần nữa để khởi chạy trình gỡ lỗi.

Hình ảnh: Chạy Spring Boot

Kiểm tra ứng dụng web bằng cách truy cập vào http://localhost:8080 bằng trình duyệt web. Bạn sẽ thấy tin nhắn sau được hiển thị: "Chào từ Spring Boot!".

Thực hiện thay đổi

Bây giờ, chúng ta hãy chỉnh sửa HelloController.java để thay đổi "Chào từ Spring Boot!" thành một nội dung khác như "Xin chào thế giới". VS Code cung cấp một trải nghiệm chỉnh sửa tuyệt vời cho Java, hãy kiểm tra Navigating and edit Java để tìm hiểu về các tính năng chỉnh sửa và điều hướng mã nguồn của VS Code.

Nhấp vào nút Khởi động lại trên đầu trang trình chỉnh sửa để khởi chạy lại ứng dụng và xem kết quả bằng cách làm mới trình duyệt web.

Hình ảnh: Khởi động lại ứng dụng

Gỡ lỗi ứng dụng

Đặt một điểm dừng (F9) trong mã nguồn ứng dụng, và làm mới trình duyệt web của bạn để kích hoạt điểm dừng.

Hình ảnh: Gỡ lỗi ứng dụng

Nếu bạn muốn tìm hiểu thêm về gỡ lỗi Java với VS Code, bạn có thể đọc Java Debugging.

Xin chúc mừng, bạn đã có ứng dụng web Spring Boot đầu tiên của mình đang chạy cục bộ! Đọc tiếp để tìm hiểu cách lưu trữ ứng dụng trên đám mây.

Triển khai ứng dụng web lên đám mây

Chúng ta vừa xây dựng một ứng dụng web Java và chạy nó cục bộ. Bây giờ bạn sẽ tìm hiểu cách triển khai ứng dụng từ Visual Studio Code và chạy nó trên Azure trong đám mây.

Nếu bạn chưa có một tài khoản Azure, bạn có thể đăng ký một tài khoản Azure miễn phí.

Tạo tài khoản Azure miễn phí

Cài đặt tiện ích Azure App Service

Tiện ích Azure App Service được sử dụng để tạo, quản lý và triển khai ứng dụng lên Azure App Service với các tính năng quan trọng bao gồm:

• Tạo mới Web App/Deployment Slot của Azure
• Triển khai lên Web App/Deployment Slot của Azure
• Bắt đầu, dừng và khởi động lại Web App/Deployment Slot của Azure
• Xem các tệp nhật ký của Web App
• Hoán đổi Deployment Slots

Để cài đặt tiện ích Azure App Service, mở trình xem Extensions (⇧⌘X (Windows, Linux Ctrl+Shift+X)) và tìm kiếm azure app service để lọc kết quả. Chọn tiện ích Microsoft Azure App Service. Để có trải nghiệm dựa trên dòng lệnh dựa trên Maven, bạn cũng có thể xem hướng dẫn plugin Maven cho Azure App Service Linux.

Đăng nhập vào tài khoản Azure của bạn

Để đăng nhập vào Azure, chạy lệnh Azure: Sign In từ Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). Hoặc bạn có thể đăng nhập vào tài khoản Azure của bạn bằng cách nhấp chuột vào Sign in to Azure... trong RESOURCES Explorer.

Hình ảnh: Mã đăng nhập Azure

Tạo một Web App mới trên Azure

Sau khi tiện ích được cài đặt, bạn có thể thực hiện các bước sau để tạo một Web App mới trên Azure.

1. Nhấp vào nút Create trên RESOURCES Explorer và chọn Create App Service Web App....
2. Nhập tên duy nhất cho Web App mới.
3. Chọn tác vụ chạy của Web App, ví dụ Java 17.
4. Chọn ngăn xếp máy chủ web Java, ví dụ Java SE.
5. Chọn mức giá.
6. Nhấp vào nút Create.

Hình ảnh: Tạo một Web App

Xây dựng và triển khai lên Web App

Quá trình triển khai sử dụng tiện ích Azure Resources (được cài đặt cùng với tiện ích Azure App Service làm phụ thuộc) và bạn cần đăng nhập bằng tài khoản Azure của bạn. Nếu bạn chưa có một tài khoản Azure, đăng ký hôm nay để nhận tài khoản miễn phí trong 30 ngày và nhận 200 USD trong Tín dụng Azure để thử bất kỳ kết hợp nào của dịch vụ Azure.

Sau khi đăng nhập, bạn có thể mở cửa sổ dòng lệnh hoặc cửa sổ dấu nhắc và xây dựng dự án bằng các lệnh Maven. Điều này sẽ tạo ra một tệp tin gói (WAR hoặc JAR) mới trong thư mục mục tiêu.

mvn clean package

Sau khi xây dựng dự án, mở thư mục mục tiêu trong VS Code Explorer. Nhấp chuột phải vào tệp tin và chọn Deploy to Web App, và làm theo hướng dẫn để chọn Web App cho việc triển khai.

Hình ảnh: Triển khai lên Web App

Mở cửa sổ Output trong VS Code để xem nhật ký triển khai. Sau khi triển khai hoàn tất, nó sẽ hiển thị URL cho Web App của bạn. Nhấp vào liên kết để mở trong trình duyệt, bạn sẽ thấy ứng dụng web đang chạy trên Azure!

Hình ảnh: Chào từ Spring Boot

Lưu ý: Đối với các tính năng nâng cao hơn của App Service, bạn có thể kiểm tra tiện ích Azure App Service.

Kết nối với dịch vụ dữ liệu

Azure Cosmos DB là dịch vụ cơ sở dữ liệu phân tán toàn cầu cho phép nhà phát triển làm việc với dữ liệu bằng cách sử dụng nhiều API tiêu chuẩn khác nhau, chẳng hạn như SQL, MongoDB, Cassandra, Graph và Table.

Trình bắt đầu Spring Boot giúp việc lưu trữ và truy xuất dữ liệu từ cơ sở dữ liệu Azure Cosmos DB cho cơ sở dữ liệu NoSQL trở nên dễ dàng.

Tạo một thực thể Azure Cosmos DB trên Azure

1. Truy cập vào cổng thông tin Azure và nhấp vào '+' để Create a resource.
2. Nhấp vào Databases, sau đó nhấp vào Azure Cosmos DB để tạo cơ sở dữ liệu của bạn.
3. Chọn SQL (Document DB) API và điền thông tin khác cho cơ sở dữ liệu của bạn.
4. Chuyển đến cơ sở dữ liệu bạn vừa tạo, nhấp vào Keys, và sao chép URI và PRIMARY KEY của cơ sở dữ liệu.

Cấu hình dự án của bạn

1. Bạn có thể bắt đầu từ Dự án Mẫu Spring Data Azure Cosmos DB.
2. Di chuyển đến src/main/resources và mở application.properties. Thay các thuộc tính dưới đây trong application.properties bằng thông tin của cơ sở dữ liệu của bạn.

azure.documentdb.uri=your-documentdb-uri
azure.documentdb.key=your-documentdb-key
azure.documentdb.database=your-documentdb-databasename

Chạy và gỡ lỗi ứng dụng

Bạn có thể nhấn F5 để chạy ứng dụng của mình. Để kiểm tra kết quả, mở cổng thông tin Azure và truy cập vào cơ sở dữ liệu Azure Cosmos DB của bạn. Chọn Data Explorer, sau đó chọn Documents. Dữ liệu được hiển thị nếu được ghi thành công vào Azure Cosmos DB. Bạn cũng có thể duyệt các mục dữ liệu của mình trong Azure Cosmos DB với tiện ích Azure Databases.

Sau khi đặt một điểm dừng (F9) trong mã nguồn của bạn, làm mới trình duyệt để kích hoạt điểm dừng. Chi tiết về gỡ lỗi có thể được tìm thấy trong Java Debugging.

Bạn cũng có thể sử dụng Maven để đóng gói và chạy dự án của mình theo các bước sau:

1. Di chuyển đến thư mục azure-spring-boot và chạy lệnh:

mvn install

2. Di chuyển đến thư mục azure-documentdb-spring-boot-sample và chạy lệnh:

mvn package java -jar target/azure-documentdb-spring-boot-sample-0.0.1-SNAPSHOT.jar

Bước tiếp theo

• Để đóng gói và triển khai ứng dụng web, hãy xem Docker in VS Code.
• Để tìm hiểu thêm về các tính năng gỡ lỗi Java, hãy xem Java Debugging Tutorial.