React adalah pustaka JavaScript sumber terbuka dan gratis yang dikembangkan oleh Facebook. Ini digunakan untuk membuat frontend web dan komponen UI. Ini sering digunakan untuk mengembangkan Aplikasi Web atau Aplikasi Seluler. Ini memungkinkan pengembang untuk membuat komponen yang dapat digunakan kembali yang independen satu sama lain. Ini dapat digunakan dengan perpustakaan lain termasuk, Axios, JQuery AJAX, atau browser built-in window.fetch.
Dalam posting ini, kami akan menunjukkan cara menginstal React JS di CentOS 8
Prasyarat
- Server yang menjalankan CentOS 8.
- Nama domain valid yang ditunjukkan dengan IP server Anda.
- Kata sandi root dikonfigurasi di server.
Memulai
Sebelum memulai, Anda perlu memperbarui paket sistem Anda ke versi terbaru. Anda dapat memperbaruinya dengan menjalankan perintah berikut:
dnf update -y
Setelah semua paket diperbarui, instal dependensi lain yang diperlukan dengan perintah berikut:
dnf install gcc-c++ make curl -y
Setelah Anda selesai menginstal dependensi yang diperlukan, Anda dapat melanjutkan ke langkah berikutnya.
Instal NPM dan Node.js
Selanjutnya, Anda perlu menginstal Node.js dan NPM di sistem Anda. NPM juga disebut manajer paket adalah alat baris perintah yang digunakan untuk berinteraksi dengan paket Javascript. Secara default, versi terbaru NPM dan Node.js tidak disertakan dalam repositori default CentOS. Jadi, Anda perlu menambahkan repositori sumber Node ke sistem Anda. Anda dapat menambahkannya dengan perintah berikut:
curl -sL https://rpm.nodesource.com/setup_14.x | bash -
Setelah repositori ditambahkan, instal Node.js dan NPM dengan perintah berikut:
dnf install nodejs -y
Setelah penginstalan selesai, verifikasi versi Node.js dengan menjalankan perintah berikut:
node -v
Anda akan mendapatkan output berikut:
v14.16.0
Anda juga dapat memverifikasi versi NPM dengan menjalankan perintah berikut:
npm -v
Anda akan mendapatkan output berikut:
6.14.11
Pada titik ini, NPM dan Node.js diinstal di sistem Anda. Anda sekarang dapat melanjutkan untuk menginstal Reactjs.
Instal Reactjs
Sebelum memulai, Anda perlu menginstal create-react-app di sistem Anda. Ini adalah utilitas baris perintah yang digunakan untuk membuat Aplikasi React.
Anda dapat menginstalnya menggunakan NPM seperti yang ditunjukkan di bawah ini:
npm install -g create-react-app
Setelah terinstal, verifikasi versi create-react-app yang diinstal menggunakan perintah berikut:
create-react-app --version
Anda akan melihat output berikut:
4.0.3
Selanjutnya, buat aplikasi Reactjs pertama Anda dengan perintah berikut:
create-react-app myapp
Anda akan melihat output berikut:
Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run 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 myapp
npm start
Selanjutnya, ubah direktori ke myapp dan jalankan aplikasi dengan perintah berikut:
cd myapp
npm start
Setelah aplikasi berhasil dijalankan, Anda akan mendapatkan output berikut:
Compiled successfully! You can now view myapp in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Sekarang, tekan CTRL + C untuk menghentikan aplikasi. Sekarang Anda dapat melanjutkan ke langkah berikutnya.
Buat File Layanan Systemd untuk Reactjs
Selanjutnya, merupakan ide bagus untuk membuat file layanan systemd untuk mengelola layanan Reactjs. Anda dapat membuatnya dengan perintah berikut:
nano /lib/systemd/system/react.service
Tambahkan baris berikut:
[Unit] After=network.target [Service] Type=simple User=root WorkingDirectory=/root/myapp ExecStart=/usr/bin/npm start Restart=on-failure [Install] WantedBy=multi-user.target
Simpan dan tutup file kemudian muat ulang daemon systemd dengan perintah berikut:
systemctl daemon-reload
Selanjutnya, mulai layanan Reactjs dan aktifkan untuk memulai pada sistem reboot dengan perintah berikut:
systemctl start react
systemctl enable react
Selanjutnya, verifikasi status aplikasi Reactjs dengan perintah berikut:
systemctl status react
Anda akan mendapatkan output berikut:
? react.service
Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
Main PID: 2191 (node)
Tasks: 29 (limit: 12524)
Memory: 220.3M
CGroup: /system.slice/react.service
??2191 npm
??2202 node /root/myapp/node_modules/.bin/react-scripts start
??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]: http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.
Pada titik ini, Reactjs dimulai dan mendengarkan pada port 3000. Anda dapat memverifikasinya dengan perintah berikut:
ss -antpl | grep 3000
Anda akan mendapatkan output berikut:
LISTEN 0 128 0.0.0.0:3000 0.0.0.0:* users:(("node",pid=2209,fd=18))
Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.
Konfigurasikan Nginx sebagai Proxy Terbalik Untuk Aplikasi React
Selanjutnya, Anda perlu mengkonfigurasi Nginx sebagai proxy terbalik untuk mengakses aplikasi React pada port 80. Pertama, instal paket Nginx dengan perintah berikut:
dnf install nginx -y
Setelah Nginx terinstal, buat file konfigurasi virtual host Nginx baru dengan perintah berikut:
nano /etc/nginx/conf.d/react.conf
Tambahkan baris berikut:
server {
listen 80;
server_name react.example.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:3000;
}
}
Simpan dan tutup file setelah Anda selesai kemudian verifikasi Nginx untuk kesalahan sintaks dengan perintah berikut:
nginx -t
Anda akan mendapatkan output berikut:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Terakhir, mulai layanan Nginx dan aktifkan untuk memulai saat reboot sistem dengan menjalankan perintah berikut:
systemctl start nginx
systemctl enable nginx
Anda juga dapat memverifikasi status Nginx dengan menjalankan perintah berikut:
systemctl status nginx
Anda harus mendapatkan status layanan React pada output berikut:
? nginx.service - The nginx HTTP and reverse proxy server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
Main PID: 4081 (nginx)
Tasks: 2 (limit: 12524)
Memory: 4.0M
CGroup: /system.slice/nginx.service
??4081 nginx: master process /usr/sbin/nginx
??4082 nginx: worker process
Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.
Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.
Konfigurasi Firewall
Selanjutnya, Anda harus mengizinkan port 80 dan 443 melalui firewall. Anda dapat mengizinkannya dengan menjalankan perintah berikut:
firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp
Selanjutnya, muat ulang firewall untuk menerapkan perubahan konfigurasi:
firewall-cmd --reload
Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.
Mengakses Aplikasi Reactjs
Sekarang, buka browser web Anda dan akses aplikasi Reactjs Anda menggunakan URL http://react.example.com . Anda akan melihat halaman Reactjs pada layar berikut:
Kesimpulan
Selamat! Anda telah berhasil menginstal Reactjs di CentOS 8. Anda juga telah mengonfigurasi Nginx sebagai proxy terbalik untuk aplikasi Reactjs. Anda sekarang dapat mulai mengembangkan aplikasi Reactjs Anda.