Skip to main content

[Tutorial] Series hướng dẫn phát triển ứng dụng Java Spring trên Heroku (P2) : Tạo web app Hello World! bằng Java Spring và deploy lên Heroku

phần 1, mình đã hướng dẫn các bạn cách tạo tài khoản Heroku, tạo repo trên GitHub và cài đặt Heroku CLI, Maven. Ở phần 2, mình xin hướng dẫn cách khởi tạo một project Maven, viết ứng dụng Hello World đơn giản bằng Spring MVC và triển khai app lên Heroku

I. Khởi tạo project Maven

Đầu tiên truy cập vào thư mục bạn lưu project, mở cmd bằng cách nhấn vào thanh địa chỉ gõ cmd nhấn Enter. cmd sẽ trỏ ngay vào thư mục project bạn đang mở trên File Explorer

Sau đó gõ lệnh sau vào cmd

mvn archetype:generate -DgroupId=<package name> -DartifactId=<app name> -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Trong đó:

  • package name: Tên Java package. VD: com.sakadream.test
  • app name: Tên của ứng dụng. VD: Java-In-Heroku

Ví dụ:
mvn archetype:generate -DgroupId=com.sakadream.test -DartifactId=Java-In-Heroku -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Bạn phải nhớ package nameapp name để thiết lập các file trong project

Nếu cmd hiển thị như thế này tức là tạo project thành công

II. Remote repository trên GitHub với project

Truy cập vào thư mục vửa được Maven tạo (Tên thư mục được khai báo ở tham số –artifactId) , gọi cmd từ thanh địa chỉ của File Explorer và gõ các lệnh sau:
git init
git remote add origin <GitHub repo URL>
git remote -v
git branch -u origin/master

Trong đó GitHub repo URL là địa chỉ repo trên GitHub. VD: https://github.com/SakaDream/java-in-heroku. Để lấy đường dẫn. Đăng nhập vào GitHub, nhấn vào avatar và chọn Your Profile, nhấn vào Repositories và chọn repo vừa tạo

III. Viết ứng dụng

Đầu tiên hãy sử dụng editor bạn hay dùng, ở đây mình sử dụng Visual Studio Code, lý do mình chọn VS Code vì nó hỗ trợ git sẵn, có nhiều extension nhắc lệnh thông minh, hỗ trợ nhiều ngôn ngữ

Download và cài đặt Visual Studio Code như những phần mềm thông thường

Sau khi cài đặt Visual Studio Code. Mở phần mềm lên và nhấn nút Extensions

Tìm trên thanh Search của VS Code: Language Support for Java(TM) by Red Hat. Nhấn Install, sau khi cài thành công, nhấn Reload, hộp  thoại xuât hiện, nhấn Reload

Extension này giúp bạn có thể kiểm tra lỗi cú pháp, nhắc cú pháp Java thông minh, hỗ trợ tìm phương thức, lớp của các thư viện được khai báo ở file pom.xml

Tiếp theo, tạo thư mục project có cấu trúc như sau (riêng thư mục target được sinh ra khi Maven build ứng dụng thành công nên không cần phải tạo). Các thư mục com, sakadream, test chính là package name, quy tắc tạo folder:

com.sakadream.test.controller = com -> sakadream -> test -> controller

Cấu hình file pom.xml

Viết ứng dụng

Trước tiên, ta cấu hình các file xml

File web.xml (src/main/webapp/WEB-INF/web.xml)

File mvc-dispatcher-servlet.xml (src/main/webapp/WEB-INF/mvc-dispatcher-servlet.xml)

File logback.xml (src/main/resources/logback.xml)

Tiếp theo, ta viết file index.jsp (src/main/webapp/WEB-INF/pages/index.jsp)

Viết controller HomeController.java (src/main/java/com/sakadream/test/HomeController.java)

Sau khi viết xong ứng dụng, ta chạy thử trên localhost bằng cách build project ra file war và deploy file war qua webapp-runner.jar, chương trình Java giúp deploy và chạy web app qua Tomcat. Gõ lệnh sau trên cmd:

mvn package && java -jar .\target\dependency\webapp-runner.jar .\target\*.war

Nếu màn hình không xuất hiện dòng [ERROR] nào chứng tỏ build và deploy thành công

Hãy chú ý dòng cuối cùng

INFO: Starting ProtocolHandler [http-nio-8080]

8080 chính là port mà ứng dụng đang chạy. Mở trình duyệt web và truy cập localhost:8080

Ứng dụng đã chạy thành công trên localhost!

Bây giờ hãy tạo một file .gitignore để giảm lượng file cần commit (chỉ cần commit file controller, file cấu hình và file jsp)

Tuy nhiên khi chạy trên server của Heroku, ứng dụng sẽ không hoạt động, vì không có script để chạy lệnh build và deploy ứng dụng. Ta tạo file Procfile như sau

web: java $JAVA_OPTS -jar target/dependency/webapp-runner.jar --port $PORT target/*.war

Sau đó nhấn vào biểu tượng Git trên VS Code, sau đó gõ comment cho lần commit đó, nhấn nút dấu tick ở trên

Nhấn vào dấu 3 chấm -> Push… Đăng nhập vào tài khoản GitHub

Lưu ý: Nếu bạn không sử dụng Visual Studio Code, bạn có thể sử dụng cmd để commit code lên GitHub. Mở cmd tại thư mục project bằng cách vào File Explorer, vào thư mục project đang làm, gõ cmd lên thanh địa chỉ. Cửa sổ cmd xuất hiện

git add .
git commit -m "Commit ung dung len GitHub"

Nếu bạn bị lỗi chưa khai báo email và name, bạn gõ lệnh sau:
git config --global user.email Email_của_bạn
git config --global user.name Tên_user_GitHub_của_bạn
Sau đó dùng lệnh git commit như bình thường

Bạn có thể thay comment Commit ung dung len GitHub ở lệnh git commit bằng comment bạn tự nghĩ ra để dễ quản lý. Nhớ đặt comment trong dấu nháy kép
Sau đó push commit vừa tạo lên GitHub

git push origin master

Sau khi push thành công. Hãy vào trang repo của project để kiểm tra

Ta quay lại trang Dashboard của Heroku. Nhấn vào tab Deploy , chọn GitHub, nhấn Connect to GitHub. Sau đó đăng nhập vào GitHub

Tìm repo của project trong thanh search. Nếu tìm đúng thì nhấn Connect…

Chọn tab Overview, click vào Configure Dynos

Bấm vào biểu tượng cây viết

Bật lên và nhấn Comfirm

Vào tab Deploy, ta có thể chọn Enable Automatic Deploys để Heroku tự động deploy khi có thay đổi từ GitHub. Sau đó nhấn Deploy Branch

Sau khi deploy thành công nhấn View

Trang web của chúng ta đã deploy thành công lên Heroku! 🙂

phần 3, mình sẽ hướng dẫn sử dụng PostgreSQL để tạo database trên Heroku và tạo các chức năng login và xem, thêm, xoá, sửa nhân viên

Leave a Reply

%d bloggers like this: