Deploy app on netlify for FREE

Netlify là một dịch vụ tự động hóa việc xây dựng, triển khai và quản lý các website của bạn.

1. Đăng nhập

• Bạn truy cập vào trang chủ của netlify cho chọn Log in: www.netlify.com
• Đầu tiên bạn cần có tài khoản. Netlify cho phép bạn đăng nhập bằng 4 cách Github, Gitlab, Bitbucket và bằng Email.

• Sau khi đăng nhập bạn sẽ thấy giao diện như thế này dùng để upload project của bạn lên.

2. Tạo netlify.toml file để cấu hình build cho project

Tạo file netlify.toml tại thư mục gốc của project và thêm đoạn code bên dưới vào:

[build]

  command = "yarn build"

  publish = "/build"

  base = "/"

[[redirects]]

  from = "/*"

  to = "/index.html"

  status = 200

File này sẽ giúp project của bạn tránh được lỗi Page Not Found khi sử dụng router.

Tìm hiều thêm về file cấu hình cho netlify tại đây.

3. Deploy app

Đầu tiên chúng ta phải build project bằng lệnh:

npm run build

hoặc

yarn build

Sau khi chạy lệnh trên ta sẽ có được 1 thư mục build trong project

Lưu ý: Trước khi chạy lệnh build bạn nên kiểm tra và thay đổi API URL cần phù hợp với API mà bạn đã có sẵn trên internet.

Sau khi có được thư mục build, chúng ta sẽ bắt đầu deploy lên netlify. Có 2 cách để deploy lên netlify:

Cách 1: Kéo thả

Netlify rất dễ để sử dụng kéo thả để deploy. Sau khi bạn có thư mục build vừa tạo ra khi nãy. Bạn có thể kéo thả thư mục build đó vào để tiến hành deploy project của mình lên.

Cách 2: Dùng Command Line

Netlify cung cấp cho ta các câu lệnh để có thể deploy với command line.

1. Đầu tiên, chúng ta cần phải cài đặt Netlify CLI với câu lệnh:

npm install netlify-cli -g

2. Login netlify

netlify login

 Bạn sẽ được dẫn vào trang của Netlify để Authorize

3. Deploy app

netlify deploy --prod

Với lần deploy đầu tiên bạn thực hiện như sau: 

1. Sau khi nhập lệnh netlify deploy sẽ hỏi bạn "What wơuld you like to do" hãy chọn Create & configure a new site để tạo mới 1 site.
2. Đặt Site name. Bạn có thể enter nếu không muốn đặt tên gì.
3. Chọn account
4. Chọn đường dẫn thư mục build

Chú ý: nếu không có chọn đường dẫn

1. Ctrl+C để huỷ deploy. Quay lại project bạn sẽ thấy thư mục mới được tạo ra .netlify.
2. Mở thử mục này ra bạn sẽ thấy có 1 thư mục build, xoá nó đi.
3. Copy thư mục build bên ngoài vào .netlify.
4. Chạy lại lệnh netlify deploy

 Sau khi hoàn thành bạn sẽ được:

Website Draft URL là đường link nháp bạn có thể truy cập vào đây để xem sản phẩm của mình được deploy lên sẽ như thế nào. Khi đã hài lòng với nó bạn thì chính thức deploy nó bằng cách gõ lệnh netlify deploy --prod để hoàn thành.

Sau khi làm xong bạn đã có thể public project của mình lên internet. Chúc bạn thành công.