Ngày nay, hầu hết tất cả các trang web đều chứa JavaScript, một ngôn ngữ lập trình kịch bản chạy trên trình duyệt web của khách truy cập. Nó làm cho các trang web hoạt động cho các mục đích cụ thể và nếu bị tắt vì lý do nào đó, nội dung hoặc chức năng của trang web có thể bị hạn chế hoặc không khả dụng. Tại đây, bạn có thể tìm thấy hướng dẫn về cách bật [kích hoạt] JavaScript trong năm trình duyệt được sử dụng phổ biến nhất
Vì vậy, bạn đã xây dựng một ứng dụng phản ứng tuyệt vời. Làm thế nào bạn có thể hiển thị nó cho mọi người? . Vì vậy, bạn có thể phục vụ nó giống như bất kỳ trang web tĩnh nào khác
Hôm nay chúng ta sẽ xem cách chúng ta có thể phục vụ ứng dụng phản ứng của mình bằng Nginx trong máy chủ ubuntu. NGINX là một công cụ mạnh mẽ mà chúng ta có thể sử dụng với React để tận dụng sự tuyệt vời của nó
Máy chủ mục tiêu của chúng tôi có thể là bất kỳ phiên bản máy chủ Ubuntu nào như Phiên bản EC2 trong AWS hoặc Droplet trong Digital Ocean hoặc thậm chí là máy cục bộ của bạn
Có rất nhiều hướng dẫn về cách thiết lập máy chủ của bạn trong aws hoặc digital ocean. Tôi sẽ không vượt qua điều đó. Chúng tôi sẽ tiếp tục tập trung vào việc thiết lập
node --version
1 với node --version
2Hãy tưởng tượng bạn đã thiết lập và chạy một phiên bản EC2 hoặc giọt Digital Ocean. Bây giờ ssh vào máy của bạn…
BƯỚC 1. Cài đặt Node và NPM
Được rồi, bây giờ bạn đã có dự án bên trong máy của mình, bây giờ hãy cài đặt nút và npm. Đầu tiên, kích hoạt nguồn nút
curl -sL //deb.nodesource.com/setup_12.x | sudo -E bash -
sau đó cài đặt nút
sudo apt install nodejs
Kiểm tra phiên bản nút
node --version
Kiểm tra phiên bản npm
npm --version
BƯỚC 2. Cài đặt NGINX
Chạy lệnh sau
sudo apt install nginx
Kiểm tra xem nó đã được cài đặt đúng chưa bằng cách sử dụng
nginx -v
Tại thời điểm này, nếu bạn truy cập địa chỉ IP máy chủ của mình, nó sẽ giống như thế này
Bây giờ hãy kích hoạt Nginx để nó tự khởi động nếu máy chủ khởi động lại
________số 8Hoặc Bạn có thể kiểm tra trạng thái Nginx của mình bằng cách nhập
systemctl status nginx
Cái nào sẽ cho đầu ra bên dưới
Nginx đã hoạt động
BƯỚC 3. Nhận dự án của bạn vào máy chủ của bạn
Đưa dự án của bạn vào máy của bạn. Nếu bạn đang sử dụng HTTPS, nó sẽ giống như
node --version
0Bước 4. Xây dựng dự án của bạn
Đi vào thư mục gốc của dự án của bạn, sau đó xây dựng ứng dụng phản ứng của bạn như bình thường
node --version
1Các lệnh này sẽ tạo bản dựng sản xuất được tối ưu hóa và đặt tài nguyên trong thư mục bản dựng. Nếu bạn vào bên trong thư mục bản dựng của mình, nó sẽ giống như thế này
Nội dung của thư mục xây dựng
Ở đây chúng tôi có chỉ số của chúng tôi. html và gói js được rút gọn, có thể được sử dụng để phục vụ trang web của chúng tôi
TIỀN BOA. Bạn có thể tránh toàn bộ quá trình xây dựng bên trong máy chủ của mình và chỉ cần xây dựng dự án cục bộ và chuyển chúng vào máy từ xa của bạn bằng các công cụ như scp. Vì chúng tôi đang phục vụ các tệp tĩnh nên thế là đủ
Bước 5. Sao chép các dự án thư mục Build vào var/www/html
Bây giờ hãy quay lại thư mục gốc của máy của chúng tôi, nơi kết quả của lệnh ls sẽ cho chúng tôi đầu ra sau
thư mục gốc của máy của chúng tôi
Bây giờ sao chép nội dung của thư mục bản dựng vào
node --version
3. Đó là tùy chọn. bạn có thể đặt các tệp của mình ở bất cứ đâu bạn muốn. bạn có thể tạo một thư mục riêng cho từng dự án và giữ các nội dung được tạo ở đóĐể đơn giản, chúng tôi đang giữ chúng dưới
node --version
4. Vì vậy, nó sẽ là gốc rễ của chúng tôisudo apt install nodejs
0BƯỚC 6. Định cấu hình NGINX để phục vụ các tệp tĩnh
Bây giờ chúng tôi cần định cấu hình Nginx của mình để phục vụ các tệp này. Viết các lệnh sau. Tôi đang sử dụng nano ở đây
sudo apt install nodejs
1Sau đó chỉnh sửa các lệnh để nội dung cuối cùng của tệp trông như thế này
cấu hình nginx
Nội dung ở đây rất đơn giản
- Chúng tôi đang nghe
node --version
5 80 node --version
6 sẽ là vị trí chúng tôi đặt nội dung tĩnh của mìnhnode --version
7 sẽ là chỉ số của chúng tôi. tệp htmlnode --version
8 sẽ là địa chỉ IP của máy chủ của chúng tôi. Nó cũng có thể là các tên miền khác mà bạn có thể sử dụng- bên trong
node --version
9, chúng tôi có thể phục vụ nội dung tĩnh của mình như hình ảnh hoặc pdf, v.v. hiện tại chúng tôi đang sử dụng nó làm nội dung dự phòng
Sau đó lưu tệp bằng các lệnh sau. Nếu bạn đã quen thuộc với
npm --version
0 thì bạn đã biết họ rồisudo apt install nodejs
2Bây giờ chúng ta cần khởi động lại NGINX để xem kết quả
sudo apt install nodejs
3Nếu chúng tôi truy cập địa chỉ IP của máy chủ [http. //your_ip_address here], chúng tôi hy vọng sẽ thấy ứng dụng phản ứng của bạn hoạt động
BƯỚC 6 [thay thế]. Định cấu hình NGINX để hoạt động như một proxy
Đôi khi chúng tôi chạy các ứng dụng phản ứng của mình bằng các gói như PM2 hoặc mãi mãi. Chúng tôi chạy chúng bằng máy chủ nút được tích hợp trong ứng dụng tạo-phản ứng. Nhưng có một vấn đề là bất cứ khi nào chúng ta phải truy cập vào đó, chúng ta cần nhập số cổng vào địa chỉ. Ví dụ: nếu chúng tôi chạy ứng dụng phản ứng của mình trong máy chủ này trên cổng 300 [cổng thông thường], để truy cập trang web của chúng tôi, chúng tôi cần truy cập ____51 trình duyệt của bạn. Nginx có thể giải quyết vấn đề này
Đối với điều này, chúng ta có thể chạy các lệnh sau từ bên trong thư mục gốc của dự án để chạy ứng dụng. Chúng tôi không đi quá sâu vào các chủ đề ở đây. Để chạy ứng dụng phản ứng của chúng tôi mãi mãi, chúng tôi có thể sử dụng lệnh sau từ bên trong dự án của mình
sudo apt install nodejs
4hoặc sử dụng pm2
sudo apt install nodejs
5Bây giờ, nếu chúng tôi truy cập địa chỉ
npm --version
2 từ trình duyệt, chúng tôi có thể thấy ứng dụng của mình đang hoạt độngBây giờ chúng tôi sẽ kích hoạt tường lửa của mình để chặn quyền truy cập vào tất cả các cổng
sudo apt install nodejs
6Nếu chúng tôi kiểm tra trạng thái bây giờ, nó sẽ hoạt động, nhưng nếu chúng tôi muốn truy cập ứng dụng của mình, chúng tôi sẽ không thể thực hiện được vì tường lửa sẽ chặn chúng tôi. Chúng ta cần chạy [các] lệnh sau để cho phép truy cập
sudo apt install nodejs
7Bây giờ khi truy cập máy chủ của chúng tôi, chúng tôi sẽ không thấy ứng dụng của mình đang chạy vì chúng tôi không cho phép cổng 3000 ra thế giới bên ngoài
Chúng tôi cần định cấu hình Nginx của mình để chuyển tiếp cổng
npm --version
3 sang cổng npm --version
4 của chúng tôi. Để làm điều đó, chúng tôi cần định cấu hình lại Nginx của mình, giống như trước đây. lần này nội dung sẽ làLưu tệp giống như trước đây
Ở đây chúng tôi đang sử dụng proxy_pass để nói rằng chúng tôi cần chuyển hướng các yêu cầu vào cổng
npm --version
3 đến npm --version
6, nơi ứng dụng của chúng tôi đang chạyChúc mừng. Bây giờ chúng ta có thể truy cập ứng dụng của mình trên http. //your_server_ip_address mà không chỉ định cổng ở cuối địa chỉ
BƯỚC 7. Thêm chứng chỉ SSL với LetsEncrypt
Thật dễ dàng để đính kèm chứng chỉ SSL miễn phí cho trang web của chúng tôi bằng Nginx. Chạy các lệnh sau để cài đặt
npm --version
7 trong phiên bản ec2 của chúng tôisudo apt install nodejs
8Nó sẽ yêu cầu email của bạn, và bạn đã hoàn tất
Giấy chứng nhận này sẽ có hiệu lực trong vòng 90 ngày. Bạn phải chạy lệnh sau để cập nhật chứng chỉ của mình