ReactJS adalah pustaka JavaScript sumber terbuka dan gratis yang digunakan untuk membangun komponen UI yang dapat digunakan kembali. Ini dikembangkan oleh Facebook pada tahun 2011 untuk membuat aplikasi web yang kaya dan menarik dengan cepat dan efisien dengan pengkodean minimal. Ini memungkinkan Anda membuat elemen interaktif di situs web. Ini menggunakan DOM Virtual yang membuat aplikasi cepat. Ini menawarkan serangkaian fitur yang kaya termasuk, DOM Virtual, Pengikatan Data Satu Arah, Komponen, BEJ, Pernyataan Bersyarat, dan banyak lagi.
Dalam tutorial ini, kami akan menunjukkan cara menginstal aplikasi create react dan host aplikasi ReactJS dengan server web Nginx di Ubuntu 20.04.
Prasyarat
- Server yang menjalankan Ubuntu 20.04 dengan RAM minimal 2 GB.
- Nama domain valid yang ditunjukkan dengan IP server Anda. Dalam tutorial ini, kita akan menggunakan domain reactjs.example.com.
- Sandi root dikonfigurasi untuk server.
Memulai
Sebelum memulai, selalu disarankan untuk memperbarui paket sistem Anda ke versi terbaru. Anda dapat memperbaruinya dengan menjalankan perintah berikut:
apt-get update -y
Setelah semua paket diperbarui, instal dependensi lain yang diperlukan dengan menjalankan perintah berikut:
apt-get install curl gnupg2 -y
Setelah semua dependensi terinstal, Anda dapat melanjutkan ke langkah berikutnya.
Instal Node.js
Selanjutnya, Anda perlu menginstal Node.js ke server Anda. Secara default, versi terbaru Node.js tidak tersedia di repositori standar Ubuntu 20.04. Jadi, Anda perlu menginstal Node.js dari repositori resmi Node.js.
Pertama, tambahkan repositori Node.js dengan perintah berikut:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Selanjutnya, jalankan perintah berikut untuk menginstal Node.js ke sistem Anda:
apt-get install nodejs -y
Setelah menginstal Node.js, perbarui NPM ke versi terbaru menggunakan perintah berikut:
npm install [email protected] -g
Anda akan mendapatkan output berikut:
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js /usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js + [email protected] updated 2 packages in 12.78s
Selanjutnya, verifikasi versi Node.js yang diinstal dengan perintah berikut:
node -v
Anda akan mendapatkan output berikut:
v14.15.3
Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.
Instal Buat Alat Aplikasi React
Create React App adalah alat yang menghemat waktu Anda untuk pengaturan dan konfigurasi. Anda hanya perlu menjalankan satu perintah dan Create React App akan menyiapkan semua alat yang dibutuhkan untuk memulai proyek Anda.
Anda dapat menginstal alat Create React App menggunakan perintah berikut:
npm install -g create-react-app
Anda akan mendapatkan output berikut:
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js + [email protected] added 67 packages from 25 contributors in 4.705s
Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.
Buat Aplikasi React Pertama Anda
Di bagian ini, kami akan menunjukkan cara membuat aplikasi React dengan alat Create React App.
Pertama, ubah direktori ke /opt dan buat proyek pertama Anda dengan perintah berikut:
cd /opt
create-react-app reactproject
Anda akan melihat output berikut:
Success! Created reactproject at /opt/reactproject
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 reactproject
npm start
Happy hacking!
Selanjutnya, ubah direktori ke proyek Anda dan mulai aplikasi Anda dengan perintah berikut:
cd /opt/reactproject
npm start
Anda akan mendapatkan output berikut:
Compiled successfully! You can now view reactproject in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Tekan CTRL+C untuk menghentikan aplikasi.
Buat File Startup untuk Aplikasi React
Jika Anda ingin memulai React App secara otomatis pada sistem reboot maka Anda perlu membuat layanan systemd untuk aplikasi React Anda. Jadi Anda dapat mengelola aplikasi Anda dengan mudah menggunakan perintah systemctl. Anda dapat membuat file layanan systemd dengan perintah berikut:
nano /lib/systemd/system/react.service
Tambahkan baris berikut:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/opt/reactproject ExecStart=npm start -- --port=3000
Simpan dan tutup file kemudian muat ulang daemon systemd dengan perintah berikut:
systemctl daemon-reload
Selanjutnya, mulai layanan React dan aktifkan untuk memulai pada sistem reboot dengan menjalankan perintah berikut:
systemctl start react
systemctl enable react
Anda dapat memverifikasi status layanan React dengan perintah berikut:
systemctl status react
Anda akan mendapatkan output berikut:
? react.service
Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
Main PID: 30833 (node)
Tasks: 30 (limit: 4691)
Memory: 141.0M
CGroup: /system.slice/react.service
??30833 npm
??30844 sh -c react-scripts start "--port=3000"
??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000
Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > [email protected] start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...
Setelah selesai, Anda dapat melanjutkan ke langkah berikutnya.
Konfigurasi Nginx untuk Aplikasi React
Ini adalah ide yang baik untuk menginstal dan mengkonfigurasi Nginx sebagai proxy terbalik untuk React App. Jadi Anda dapat mengakses aplikasi Anda melalui port 80.
Pertama, instal paket Nginx menggunakan perintah berikut:
apt-get install nginx -y
Setelah Nginx diinstal, buat file konfigurasi virtual host Nginx baru:
nano /etc/nginx/sites-available/reactjs.conf
Tambahkan baris berikut:
upstream backend {
server localhost:3000;
}
server {
listen 80;
server_name reactjs.example.com;
location / {
proxy_pass http://backend/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forward-Proto http;
proxy_set_header X-Nginx-Proxy true;
proxy_redirect off;
}
}
Simpan dan tutup file kemudian aktifkan virtual host Nginx dengan perintah berikut:
ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/
Selanjutnya, verifikasi Nginx untuk kesalahan sintaks dengan menjalankan 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, restart layanan Nginx untuk menerapkan perubahan:
systemctl restart nginx
Anda juga dapat memverifikasi status layanan Nginx dengan perintah berikut:
systemctl status nginx
Anda akan melihat output berikut:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
Docs: man:nginx(8)
Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 30915 (nginx)
Tasks: 3 (limit: 4691)
Memory: 3.6M
CGroup: /system.slice/nginx.service
??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
??30916 nginx: worker process
??30917 nginx: worker process
Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.
Pada titik ini, Nginx diinstal dan dikonfigurasi untuk melayani Aplikasi React. Sekarang Anda dapat melanjutkan ke langkah berikutnya.
Akses Antarmuka Web Aplikasi React
Sekarang, buka browser web Anda dan ketik URL http://reactjs.example.com . Anda akan diarahkan ke antarmuka web React.Js di layar berikut:
Kesimpulan
Selamat! Anda telah berhasil menginstal dan mengkonfigurasi React.Js di server Ubuntu 20.04. Saya harap Anda sekarang memiliki pengetahuan yang cukup untuk menerapkan aplikasi React Anda sendiri di lingkungan produksi. Jangan ragu untuk bertanya kepada saya jika Anda memiliki pertanyaan.