Cài đặt Surge
npm install -g surgeDeploy Angular App lên Surge
Ở bước này, bạn có thể deploy bằng cách gõ từng lệnh trên terminal hoặc bạn có thể tạo ra một file script để giúp bạn deploy một tự động tuần tự các lệnh đó mà bạn không phải gõ thủ công.
Ở đây mình sẽ hướng dẫn tạo một Shell Script để deploy Angular app lên Surge. Bạn tạo một file deploy-surge.sh ở thư mục gốc của project và paste đoạn code dưới đây vào:
deploy-sure.sh# Build application for production
yarn build
# npm run build # For NPM package manager
# Move to build folder
# dist/custom-directive-angular is "outputPath" in angular.json
cd dist/custom-directive-angular
# Clone index.html into 200.html
# This helps solve the "Page not found" issue when refreshing page with routing
cp index.html 200.html
# Start deploying via Surege
# The command means deploy current folder to domain angulardemo123.surge.sh
surge . angulardemo123.surge.shBây giờ, để deploy ứng dụng của chúng ta lên Surge, chúng ta chỉ cần mở terminal tại thư mục gốc của project và gõ lênh:
sh deploy-surge.shSẽ mất vài phút để ứng dụng của chúng ta được deploy thành công. Sau khi deploy hoàn thành, terminal sẽ hiển thị kết quả như thế này.
project: H:\learning-languages\projects\bootstrap-tooltip\dist\custom-directive-angular\
domain: angulardemo123.surge.sh
upload: [====================] 100% eta: 0.0s (15 files, 11342999 bytes)
CDN: [====================] 100%
encryption: *.surge.sh, surge.sh (253 days)
IP: 138.197.235.123
Success! - Published to angulardemo123.surge.shBây giờ, bạn có thể gõ đường dẫn angulardemo123.surge.sh vào trình duyệt, sau đó, nhấn enter và kiểm tra kết quả.
Lưu ý:
Bạn có thể được yêu cầu đăng nhập hoặc tạo tài khoản khi lệnh surge . angulardemo123.surge.sh được thực thi. Bạn dùng tài khoản Gmail để đăng nhập nhé, và bạn lưu ý là khi nhập password nó sẽ không hiện thị những ký tự bạn nhập (không hiển thị gì cả), do đó, bạn cứ nhập bình thường đúng mật khẩu của bạn và enter là được.
Tips:
Bạn có thể thêm lệnh sh deploy-surge.sh vào file package.json để có thể gọi như lệnh yarn build như sau:
package.json "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"deploy": "sh deploy-surge.sh",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},Bây giờ, để deploy bạn chỉ cần gõ lệnh:
yarn deployVậy là chúng ta đã build thành công ứng dụng Angular của minh lên Surge.sh. Tuy nhiên, theo mình thấy tốc độ của hosting surge.sh không được nhanh cho lắm và đôi khi deploy xảy ra lỗi và khá chậm.
Nếu bạn chỉ sử dụng cho mục đích học tập hoặc testing chơi cho vui hoặc để biết thôi thì ok 😀.
Bạn có thể xem thêm các free hosting và hướng dẫn deploy cho các hosting đó như được liệt kê dưới đây: