Bạn cần kích hoạt javascript để chạy ứng dụng này phản ứng nginx

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

2

Hã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 https://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

nginx đã được cài đặt thành công

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ố 8

Hoặ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

0

Bướ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

1

Cá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ôi

sudo apt install nodejs

0

BƯỚ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

1

Sau đó 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ình

• node --version

  7 sẽ là chỉ số của chúng tôi. tệp html

• node --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ồi

sudo apt install nodejs

2

Bây giờ chúng ta cần khởi động lại NGINX để xem kết quả

sudo apt install nodejs

3

Nế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

4

hoặc sử dụng pm2

sudo apt install nodejs

5

Bâ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 động

Bâ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

6

Nế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

7

Bâ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ạy

Chú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ôi

sudo apt install nodejs

8

Nó 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

Làm cách nào để bật chỉ mục JavaScript html?

Phản ứng có hoạt động nếu JavaScript bị tắt không?

Làm cách nào để thêm JavaScript vào React?

Làm cách nào để bật JavaScript trên Google Chrome?