Deploy Angular App lên Firebase Hosting FREE

{tocify} $title={Table of Contents}

Firebase là gì?

Firebase là một nền tảng miễn phí để phát triển ứng dụng và web. Firebase cung cấp cho chúng ta nhiều công cụ và dịch vụ để phát triển ứng dụng như:

• Authentication
• Database
• Storage
• Hosting
• Functions
• Test Lab

Tuy nhiên, Firebase chỉ cho phép chúng ta deploy website tĩnh mà thôi, điều này có nghĩa là chúng chỉ upload được các file HTML, CSS và Javascript.

Deploy ứng dụng Angular lên Firebase

Bạn có thể dùng tài khoản Google - Gmail để đăng nhập vào Firebase.

Bạn truy cập https://firebase.google.com và click vào nút Sign in ở góc trên bên phải để đăng nhập vào Firebase bằng tài khoản Google.

Tạo một project trong Firebase

• Sau khi đăng nhập thành công, bạn hãy click vào Get started để đi đến console của Firebase. Sau đó, bạn click vào Create a project để tiến hành tạo project.

• Đặt tên cho project và click Continue

Lưu ý: Project name phải là duy nhất, nếu bạn đặt tên đã tồn tại nó sẽ tự động thêm phần ID phía sau. Do đó, nếu bạn muốn đặt tên theo cách của bạn, hãy cố gắng chọn một cái tên chưa tồn tại. Địa chỉ web sau khi deploy sẽ là https://project-name.web.app

• Nếu bạn không muốn tích hợp Google Analytics thì hãy Disable nó đó đi và click Create project để tạo project.

Các bước thực hiện để deploy project lên Firebase Hosting bằng command line

• Sau khi tạo project thì nó sẽ xuất hiện trong mục Your Firebase projects. Bạn hãy click vào project vừa tạo.

• Chọn Build 💨 Hosting 💨 Get started. Sau khi chọn, bạn sẽ thấy nó chuyển đến trang hướng dẫn deploy một cách chi tiết. Bạn hãy làm theo nó để tiến hành deploy.

Build Angular project

$ ng build --prod

Install Firebase Tools

Firebase cung cấp một CLI cho phép chúng ta deploy ứng dụng lên Firebase Hosting bằng command line. Để sử dụng CLI này, chúng ta cần install package firebase-tools:

$ npm install -g firebase-tools

Login vào Firebase

Chúng ta chạy lệnh sau và chọn tài khoản google để login:

$ firebase login

Nếu bạn muốn login vào một tài khoản khác thì chỉ cần logout bằng lệnh sau:

$ firebase logout

Khởi tạo project

$ firebase init

• Sau khi bạn chạy câu lệnh này thì nó sẽ yêu cầu bạn cấu hình project.

Lưu ý: Ở bước này, bạn dùng mũi tên lên/xuống để di chuyển giữa các option. Dùng phím Space để chọn option mà bạn muốn, sau đó nhấn Enter.

• Lựa chọn tạo mới hoặc sử dụng project có sẵn:

• Chọn project để deploy:

• Hosting Setup - Trả lời lần lượt 3 câu hỏi:
• Câu 1: Thực mục mà bạn muốn deploy: dist/project-name
• Câu 2: Bạn có sử dụng rewrite khi dùng Single Page App hay không (thường là Yes).
• Câu 3: Thiết lập tự động build và deploy từ GitHub (chọn No) - Bạn có thể setup sau với hướng dẫn này.
• Câu 4: Bạn có muốn override file index.html không (thường là No).

Deploy lên Firebase Hosting

Sau khi chúng ta setup xong, nếu bạn muốn test xem project có gặp lỗi gì hay không thì hãy sử dụng lệnh:

$ firebase serve

Sau khi đã test xong và không có vấn đề gì thi bạn hãy deploy project lên Firebase:

$ firebase deploy

Reference

• Deployment