Chào các bạn, trong bài viết trước chúng ta đã cùng nhau làm 1 ứng dụng todolist cơ bản có kết nối với API bao gồm các chức năng như đã liệt kê trước đó
Trước khi đọc bài viết này các bạn có thể tham khảo lại các bài viết trước để tìm hiểu và thực hiện
Danh sách bài viết
- Ứng dụng todolist + API kết nối. Khởi tạo máy chủ [Phần 1]
- Ứng dụng todolist + API kết nối. Chức năng lập trình [Phần 2]
- Ứng dụng todolist + API kết nối. Lập trình chức năng [Phần 3]
Trong bài viết này, chúng ta sẽ tiến hành phát triển khai ứng dụng lên Heroku
Bắt đầu thôi nào 😁😁😁
1. Tạo tài khoản heroku
Các bạn truy cập vào trang web https. //www. heroku. com/ để tạo tài khoản cho mình, nếu bạn nào đã có tài khoản rồi thì có thể bỏ qua bước này
2. Tạo repo trên github
Thực hiện tạo repo trên cá nhân github để kết nối với heroku
Up toàn bộ source code trong thư mục " todolist" lên repo mới tạo, nhớ gitignore thư mục " node_modules" trước khi push code lên
Trong thư mục "todolist", các bạn có thể thực hiện các bước sau để đưa mã lên github
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin //github.com/buihien0109/todolist-api.git
$ git push origin main
Sau khi thực hiện xong, hãy tải lại trang web để kiểm tra xem mã đã được tải lên github hay chưa
3. Kết nối heroku và github để triển khai tiến trình
Sau khi tạo xong tài khoản heroku, các bạn tiến hành đăng nhập để tiến hành tạo ứng dụng heroku
Action select New -> Create new app to make heroku app
Lưu ý, mỗi tài khoản được tạo 5 ứng dụng miễn phí, nếu muốn tạo nhiều ứng dụng hơn, các bạn cần phải nâng cấp tài khoản heroku của mình
Trong phần Tạo ứng dụng mới, chúng ta chọn tên ứng dụng cho phù hợp. Ở đây mình đã tạo trước rồi nên nó đang cảnh báo 😁😁. Tên ứng dụng sẽ xuất hiện trong url web của các bạn. Sau đó nhấn " Create app" để tạo ứng dụng
Bước tiếp theo chúng ta cần kết nối heroku app với github repo
Ở phần Phương thức triển khai, các bạn chọn " Github". Nếu lần đầu đăng nhập vào heroku, nó sẽ yêu cầu bạn "Ủy quyền" để xác thực
Sau khi nhấn kết nối với Github, chúng ta sẽ chọn repo mà chúng ta muốn liên kết với heroku. Sau khi chọn được repo phù hợp, hãy nhấn kết nối để kết nối
Vẫn trong tab Deploy, trong phần Automatic Deploys, chúng ta quyết định Enable Automatic Depoys, để mỗi lần chúng ta thực hiện push code lên repo, thì heroku sẽ tự động triển khai lại những thay đổi tương ứng
Chuyển qua cài đặt tab, trong phần Buildpacks, chúng tôi thêm buildpack là nodejs, vì để chạy ứng dụng, chúng tôi cần máy chủ nodejs. Sau đó lưu lựa chọn lại
Quay lại tab Deploy, do chúng ta đã đẩy mã lên repo trước khi đo, hiện tại chưa có sự thay đổi nào, nên ở bước này chúng ta sẽ thực hiện triển khai mã bằng tay sử dụng Manual Deploy của Heroku, còn những lần khác
Sau khi triển khai thủ công hay tự động, chúng ta có thể xem kết quả của các lần triển khai trong tab Access để xem nhật ký của các lần triển khai, để chúng ta có thể theo dõi trong quá trình triển khai có xuất hiện lỗi gì không
Và đây là kết quả của chúng ta sau khi triển khai thành công
Các bạn có thể tham khảo mã nguồn của bài viết này tại đây. https. //github. com/buihien0109/todolist-api
Phần tiếp theo của series hướng dẫn triển khai Website sử dụng PHP Framework Laravel 5. 5 lên Heroku và cơ sở dữ liệu MySQL lên DB4Free, phần 1 theo dõi tại. https. // namcoi. com/huong-dan-triển khai-website-su-dung-laravel-5-5-voi-mysql-db4free-database-len-heroku-p1/
Triển khai trang web Laravel 5. 5 lên Heroku và MySQL lên DB4FreeSau khi đã hoàn thành Bước 6 của bài viết trước, các bạn sẽ có thông tin như sau
//namcoiblog.herokuapp.com/ | //git.heroku.com/namcoiblog.git
Bước 7. Thiết lập để dự án của bạn trên Heroku sẽ chạy PHP
heroku buildpacks:set heroku/php
Bước 8
php artisan key:generate --show
// ví dụ : base64:XaPN8p03SVVQI/ECmpw1Ar0UCjY9tbZ2e53uB0nKD1U=
Bước 9. Copy dòng key được tạo ra từ Bước 8 và chạy câu lệnh dưới đây để thêm APP_KEY trên Heroku
heroku config:set APP_KEY=key-được-tạo-ra-từ-câu-lệnh-bước-8
Bước 10. Tùy chỉnh 1 chút trong thư mục Laravel của bạn để nhận được thông báo từ Heroku
Time by path config/app. php, ở key log , chuyển từ single thành errorlog như đoạn mã bên dưới
'log' => env['APP_LOG', 'errorlog']
// dòng 124 trong Laravel 5.5
Bước 10. Triển khai dự án lên Heroku
git add .
git commit -m "added errorlog"
git push heroku master
heroku open --app
Do đó, nó đã được đẩy thành công và quá trình tự động của Heroku sẽ cài đặt các thành phần cũng như chạy cho bạn một trang web. https. //namcoiblog. herokuapp. com/
Trong phần tiếp theo, mình sẽ hướng dẫn kết nối tới cơ sở dữ liệu miễn phí là DB4Free
Các bạn đã đăng ký tài khoản tại db4free. mạng lưới
Phần 1. https. // namcoi. com/huong-dan-triển khai-website-su-dung-laravel-5-5-voi-mysql-db4free-database-len-heroku-p1/
Phần 3. https. // namcoi. com/huong-dan-triển khai-website-su-dung-laravel-5-5-voi-mysql-su-dung-db4free-database-va-heroku-p3/