Hướng dẫn deploy React JS

Hướng dẫn deploy ReactJS app Trong quá trình phát triển ứng dụng cùng với thư viện React, chúng ta đang lập trình trong môi trường nhà phát triển (development mode). Bạn có thể xác định bằng React Dev Tool sẽ có biểu tượng màu đỏ. Sau đây, mình sẽ liệt kê các cách để triển

Hướng dẫn deploy ReactJS app

Trong quá trình phát triển ứng dụng cùng với thư viện React, chúng ta đang lập trình trong môi trường nhà phát triển (development mode). Bạn có thể xác định bằng React Dev Tool sẽ có biểu tượng màu đỏ.

Sau đây, mình sẽ liệt kê các cách để triển khai ứng dụng ReactJS trong Production mode

I. Buid ứng dụng

  • Tại folder chứa code của bạn chạy câu lệnh:
 npm run buid
  • Sau bước này sẽ tạo ra 1 thư mục build. Đây chính là thư mục dùng để triển khai.

II. Triển khai ứng dụng

**Lưu ý**: Server của bạn phải được cài NodeJS và npm

1. Static Server

Sử dụng 1 dịch vụ dựa trên môi trường Node đó là Serve:

npm install -g serve
serve -s build
  • build là đường dẫn tới folder build mà bạn vừa chạy câu lệnh npm run build.
  • Bạn cũng có thể chọn cổng được bind cho ứng dụng của bạn:
serve -s build -l 4000
  • Xem chi tiết các câu lệnh của Serve:
serve -h

2 . Các cách khác

Bạn có thể sử dụng Node và Express như sau(cái này cũng tương tự như Serve nhưng bạn cần tạo 1 dịch vụ, còn bên trên đã dựng sẵn )

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

  • dirname là đường dẫn tới thư mục build của bạn
    ==> Thôi cứ dùng cách trên cho nhanh
  • Sử dụng các bên thứ 3 như Azure or Firebase

III. Kết luận

  • Bạn nên sử dụng cách đầu tiên, là 1 cách dễ dàng nhất trong triển khai ứng dụng lên server của bạn.

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ