ReactJS: Cách triển khai ứng dụng React với Nginx trên Ubuntu

Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Giới thiệu

Bạn có thể nhanh chóng triển khai các ứng dụng React tới một máy chủ bằng cách sử dụng công cụ tạo ứng dụng React mặc định. Tập lệnh build sẽ biên dịch ứng dụng thành một thư mục duy nhất chứa tất cả mã JavaScript, hình ảnh, kiểu và tệp HTML. Với các nội dung ở một vị trí duy nhất, bạn có thể triển khai tới một máy chủ web với cấu hình tối thiểu.

Trong hướng dẫn này, bạn sẽ triển khai ứng dụng React trên máy cục bộ của mình tới máy chủ Ubuntu chạy Nginx. Bạn sẽ xây dựng một ứng dụng bằng Create React App, sử dụng tệp cấu hình Nginx để xác định vị trí triển khai tệp và sao chép an toàn thư mục build và nội dung của nó vào máy chủ. Đến cuối hướng dẫn này, bạn sẽ có thể xây dựng và triển khai một ứng dụng React.

Điều kiện tiên quyết

Bước 1 - Tạo một dự án React

Trong bước này, bạn sẽ tạo một ứng dụng bằng Create React App và xây dựng một phiên bản có thể triển khai của ứng dụng boilerplate.

Để bắt đầu, hãy tạo một ứng dụng mới bằng Tạo ứng dụng React trong môi trường cục bộ của bạn. Trong một thiết bị đầu cuối, hãy chạy lệnh để xây dựng một ứng dụng. Trong hướng dẫn này, dự án sẽ được gọi là react-deploy:

npx create-react-app react-deploy

Lệnh npxs sẽ chạy một gói Node mà không cần tải nó xuống máy của bạn. Lệnh create-react-app sẽ cài đặt tất cả các phụ thuộc cần thiết cho ứng dụng React của bạn và sẽ xây dựng một dự án cơ sở trong thư mục react-deploy. Để biết thêm về Tạo ứng dụng React, hãy xem hướng dẫn Cách thiết lập một dự án React với Tạo ứng dụng React.

Mã sẽ chạy trong vài phút khi tải xuống và cài đặt các phần phụ thuộc. Khi hoàn tất, bạn sẽ nhận được thông báo thành công. Phiên bản của bạn có thể hơi khác nếu bạn sử dụng yarn thay vì npm:

Output

Success! Created react-deploy at your_file_path/react-deploy
Inside that directory, you can run several commands:

npm start

  Starts the development server.

npm build

  Bundles the app into static files for production.

npm test

  Starts the test runner.

npm eject

  Removes this tool and copies build dependencies, configuration files
  and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-deploy
  npm start

Happy hacking!

Theo gợi ý trong output, trước tiên hãy chuyển đến thư mục dự án:

cd react-deploy

Bây giờ bạn có một dự án cơ sở, hãy chạy nó cục bộ để kiểm tra xem nó sẽ xuất hiện như thế nào trên máy chủ. Chạy dự án bằng cách sử dụng lệnh npm start:

npm start

Khi lệnh chạy, bạn sẽ nhận được đầu ra với thông tin máy chủ cục bộ:

Output

Compiled successfully!

You can now view react-deploy in the browser.

  Local:                    http://localhost:3000

On Your Network:    http://192.168.1.110:3000

Note that the development build is not optimized.

To create a production build, use npm build.

Mở trình duyệt và điều hướng đến http://localhost:3000. Bạn sẽ có thể truy cập ứng dụng React bản soạn sẵn:

Mẫu dự án phản ứng đang chạy cục bộ

Dừng dự án bằng cách nhập một trong hai CTRL+C hoặc ⌘+C trong Terminal.

Bây giờ bạn có một dự án chạy thành công trong một trình duyệt, bạn cần tạo một bản dựng sản xuất. Chạy lệnh build với những điều sau:

npm run build

Lệnh này sẽ biên dịch JavaScript và nội dung vào thư mục build. Khi lệnh kết thúc, bạn sẽ nhận được một số đầu ra với dữ liệu về bản dựng của bạn. Lưu ý rằng các tên tệp bao gồm một hàm băm, vì vậy đầu ra của bạn sẽ hơi khác một chút:

Output

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.21 KB build/static/js/2.82f639e7.chunk.js
  1.4 KB build/static/js/3.9fbaa076.chunk.js
  1.17 KB build/static/js/runtime-main.1caef30b.js
  593 B build/static/js/main.e8c17c7d.chunk.js
  546 B build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Thư mục build bây giờ sẽ bao gồm các phiên bản đã biên dịch và rút gọn của tất cả các tệp bạn cần cho dự án của mình. Tại thời điểm này, bạn không cần phải lo lắng về bất cứ điều gì bên ngoài thư mục build. Tất cả những gì bạn cần làm là triển khai thư mục tới một máy chủ.

Như vậy trong bước này, bạn đã tạo một ứng dụng React mới. Bạn đã xác minh rằng ứng dụng chạy cục bộ và bạn đã tạo phiên bản sản xuất bằng cách sử dụng tập lệnh Tạo ứng dụng React build. Trong bước tiếp theo, bạn sẽ đăng nhập vào máy chủ của mình để tìm hiểu nơi sao chép thư mục build.

Bước 2 - Xác định vị trí tệp triển khai trên máy chủ Ubuntu của bạn

Trong bước này, bạn sẽ bắt đầu triển khai ứng dụng React của mình lên một máy chủ. Nhưng trước khi có thể tải tệp lên, bạn cần xác định vị trí tệp chính xác trên máy chủ triển khai của mình. Hướng dẫn này sử dụng Nginx làm máy chủ web, nhưng cách tiếp cận giống với Apache. Sự khác biệt chính là các tệp cấu hình sẽ nằm trong một thư mục khác.

Để tìm thư mục mà máy chủ web sẽ sử dụng làm thư mục gốc cho dự án của bạn, hãy đăng nhập vào máy chủ của bạn bằng ssh:

ssh username@server_ip

Khi ở trên máy chủ, hãy tìm cấu hình máy chủ web của bạn trong /etc/nginx/sites-enabled. Ngoài ra còn có một thư mục được gọi là sites-allowed; thư mục này bao gồm các cấu hình không nhất thiết phải được kích hoạt. Khi bạn tìm thấy tệp cấu hình, hãy hiển thị đầu ra trong thiết bị đầu cuối của bạn bằng lệnh sau:

cat /etc/nginx/sites-enabled/your_domain

Nếu trang web của bạn không có chứng chỉ HTTPS, bạn sẽ nhận được kết quả tương tự như sau:

Output

server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {

                try_files $uri $uri/ =404;

        }

}

Nếu bạn đã làm theo điều kiện tiên quyết Let's Encrypt để bảo mật máy chủ Ubuntu của mình, bạn sẽ nhận được kết quả sau:

Output

server {

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbobt
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

        listen 80;
        listen [::]:80;

        server_name your_domain www.your_domain;

    return 404; # managed by Certbot

}

Trong cả hai trường hợp, trường quan trọng nhất để triển khai ứng dụng React của bạn là root. Điều này trỏ các yêu cầu HTTP đến thư mục /var/www/your_domain/html. Điều đó có nghĩa là bạn sẽ sao chép các tệp của mình vào vị trí đó. Trong dòng tiếp theo, bạn có thể thấy rằng Nginx sẽ tìm kiếm một file index.html. Nếu bạn nhìn vào thư mục cục bộ của mình, bạn sẽ thấy một file buildindex.html sẽ đóng vai trò là điểm nhập chính.

Đăng xuất khỏi máy chủ Ubuntu và quay lại môi trường phát triển cục bộ của bạn.

Bây giờ bạn đã biết vị trí tệp mà Nginx sẽ phân phát, bạn có thể tải lên bản dựng của mình.

Bước 3 - Tải lên tệp bản dựng với scp

Tại thời điểm này, các file build của bạn đã sẵn sàng. Tất cả những gì bạn cần làm là sao chép chúng vào máy chủ. Một cách nhanh chóng để thực hiện việc này là sử dụng scp để sao chép các tệp của bạn vào đúng vị trí. Lệnh scp là một cách an toàn để sao chép tệp vào máy chủ từ xa từ một thiết bị đầu cuối. Lệnh sử dụng khóa ssh của bạn nếu nó được cấu hình. Nếu không, bạn sẽ được nhắc nhập tên người dùng và mật khẩu.

Định dạng lệnh sẽ là .scp files_to_copy username@server_ip:path_on_server. Đối số đầu tiên sẽ là các tệp bạn muốn sao chép. Trong trường hợp này, bạn đang sao chép tất cả các tệp trong thư mục build. Đối số thứ hai là sự kết hợp giữa thông tin đăng nhập của bạn và đường dẫn đích. Đường dẫn đích sẽ giống như root trong cấu hình Nginx của bạn: /var/www/your_domain/html

Sao chép tất cả các file build bằng ký tự đại diện * vào /var/www/your_domain/html:

scp -r ./build/* username@server_ip:/var/www/your_domain/html

Khi bạn chạy lệnh, bạn sẽ nhận được kết quả hiển thị rằng các tệp của bạn đã được tải lên. Kết quả của bạn sẽ hơi khác một chút: 

Output

asset-manifest.json                100%   1092    22.0KB/s    00:00
favicon.ico                        100%   3870    80.5KB/s    00:00
index.html                         100%   3032    61.1KB/s    00:00
logo192.png                        100%   5347    59.9KB/s    00:00
logo512.png                        100%   9664    69.5KB/s    00:00
manifest.json                      100%   492     10.4KB/s    00:00
robots.txt                         100%   67      1.0KB/s     00:00
main.ab7136cd.chunk.css            100%   943     20.8KB/s    00:00
main.ab7136cd.chunk.css.map        100%   1490    31.2KB/s    00:00
runtime-main.1caef30b.js.map       100%   12KB    90.3KB/s    00:00
3.9fbaa076.chunk.js                100%   3561    67.2KB/s    00:00
2.82f639e7.chunk.js.map            100%   313KB   156.1KB/s   00:02
runtime-main.1caef30b.js           100%   2372    45.8KB/s    00:00
main.e8c17c7d.chunk.js.map         100%   2436    50.9KB/s    00:00
3.9fbaa076.chunk.js.map            100%   7690    146.7KB/s   00:00
2.82f639e7.chunk.js                100%   128KB   226.5KB/s   00:00
2.82f639e7.chunk.js.LICENSE.txt    100%   1043    21.6KB/s    00:00
main.e8c17c7d.chunk.js             100%   1045    21.7KB/s    00:00
logo.103b5fa1.svg                  100%   2671    56.8KB/s    00:00

Khi lệnh được thực hiện thành công, thì bạn đã hoàn thành. Vì một dự án React được xây dựng bằng các tệp tĩnh chỉ cần một trình duyệt, bạn không phải định cấu hình bất kỳ ngôn ngữ phía máy chủ nào nữa. Mở trình duyệt và điều hướng đến tên miền của bạn. Khi làm như vậy, bạn sẽ thấy dự án React của mình:

Trình duyệt với Dự án React trên Máy chủ

Như vậy trong bước này, bạn đã triển khai một ứng dụng React tới một máy chủ. Bạn đã học cách xác định thư mục web gốc trên máy chủ của mình và bạn đã sao chép các tệp bằng scp. Khi các file hoàn tất tải lên, bạn có thể xem dự án của mình trong trình duyệt web.

Phần kết luận

Triển khai ứng dụng React là một quá trình nhanh chóng khi bạn sử dụng Create React App. Bạn chạy lệnh build để tạo một thư mục chứa tất cả các tệp bạn cần để triển khai. Sau khi chạy bản build, bạn sao chép các file vào vị trí chính xác trên máy chủ, đẩy ứng dụng của bạn trực tuyến lên web.

Nếu bạn muốn đọc thêm các hướng dẫn về React, hãy quay lại trang Cách viết mã trong chuỗi React.js.

» Tiếp: Cách thiết lập Adsense trên app React
« Trước: Cách tránh cạm bẫy hiệu suất trong React với memo, useMemo và useCallback
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!