Cara Menjalankan Lebih Dari Satu Website React JS dengan Apache

Saat membuat website dengan React JS dan menjalankannya dengan NPM, maka server hanya bisa menjalankan satu proses NPM saja di console server nya dan anda tidak bisa memulai website React JS lain yang telah anda miliki di dalam satu server tersebut pada directory yang berbeda.

Dalam tutorial kali ini saya akan membahas bagaimana cara menerapkan topologi saat ada 3 buah website dengan subdomain berbeda, namun dapat menjalankan command npm start secara bersamaan dengan bantuan Apache:

Berikut cara menerapkannya:
– Sebagai contoh saya sudah memiliki server ubuntu 20.04 dengan alamat IP Public 178.128.80.8 (anda juga bisa menggunakan alamat IP lokal jika ingin mencoba). Lalu di dalam server sudah terinstall NPM, Node dan Create React App.. Ikuti langkah installnya pada artikel sebelumnya di #Cara menjalankan React JS di Ubuntu Server 20.04.

Install Apache2 terlebih dahulu:
```
apt install apache2
```
Aktifkan modul proxy, proxy_http, dan rewrite di apache2 nya:
```
a2enmod proxy
a2enmod proxy_http
a2enmod rewrite
```
Setelah itu masuk ke directory /var/www/html dan jalankan deploy websitenya disini saya akan deploy 3 website dengan directory luffy, zoro dan sanji:
```
cd /var/www/html
create-react-app luffy
create-react-app zoro
create-react-app sanji
```
– Jalankan perintah tersebut satu-satu hingga selesai.

Lalu tambahkan kode port forwarding pada file package.json di masing-masing directory web.
-> Directory luffy (luffy.alvianaufan.my.id)

nano /var/www/html/luffy/package.json

"scripts": {
  "start": "PORT=3001 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"

– save dan exit

-> Directory zoro (zoro.alvianaufan.my.id)

nano /etc/var/www/html/zoro/package.json

"scripts": {
  "start": "PORT=3002 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"

– save dan exit

-> Directory sanji (sanji.alvianaufan.my.id)

nano /var/www/html/sanji/package.json

"scripts": {
  "start": "PORT=3003 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"

– save dan exit

Lalu buat virtual host domain pada apache seperti berikut:

nano /etc/apache2/conf-enabled/vhost.conf

<VirtualHost *:80>
ServerAdmin halo@alvianaufan.my.id
DocumentRoot "/var/www/html/luffy"
ServerName luffy.alvianaufan.my.id
ServerAlias www.luffy.alvianaufan.my.id
ProxyPreserveHost On
ProxyPass / http://localhost:3001/
ProxyPassReverse / http://localhost:3001/
ErrorLog /etc/apache2/error.log
CustomLog /etc/apache2/access.log common
</VirtualHost>

<VirtualHost *:80>
ServerAdmin halo@alvianaufan.my.id
DocumentRoot "/var/www/html/zoro"
ServerName zoro.alvianaufan.my.id
ServerAlias www.zoro.alvianaufan.my.id
ProxyPreserveHost On
ProxyPass / http://localhost:3002/
ProxyPassReverse / http://localhost:3002/
ErrorLog /etc/apache2/error.log
CustomLog /etc/apache2/access.log common
</VirtualHost>

<VirtualHost *:80>
ServerAdmin halo@alvianaufan.my.id
DocumentRoot "/var/www/html/sanji"
ServerName sanji.alvianaufan.my.id
ServerAlias www.sanji.alvianaufan.my.id
ProxyPreserveHost On
ProxyPass / http://localhost:3003/
ProxyPassReverse / http://localhost:3003/
ErrorLog /etc/apache2/error.log
CustomLog /etc/apache2/access.log common
</VirtualHost>

– save dan exit
– Dapat dilihat dari kode virtual host diatas sudah saya buat untuk subdomain luffy.alvianaufan.my.id , zoro.alvianaufan.my.id , dan sanji.alvianaufan.my.id.
– Lalu ada script proxy pass reverse yang merubah port 3001 , 3002, dan 3003 menjadi port 80.
– Restart apache2 nya:

systemctl restart apache2
systemctl status apache2

Install screen untuk menjalankan npm secara virtual didalam console server:
```
apt install screen
```
Jalankan 3 virtual screen yang didalamnya nanti akan kita jalankan perintah npm start di masing-masing directory websitenya:
-> Subdomain luffy.alvianaufan.my.id
```
screen
cd /var/www/html/luffy
npm start
```
– dapat dilihat dari keterangan running port nya adalah menggunakan port 3001.
– setelah itu keluar dari screen dengan menekan tombol keyboard: shift + a -> d
– anda keluar dari screen yang baru dibuat tanpa menghentikan proses npm start di directory luffy.
– untuk mengetahui daftar screen yang telah diaktifkan bisa cek dengan command:
```
screen -list
```
-> Subdomain zoro.alvianaufan.my.id
```
screen
cd /var/www/html/zoro
npm start
```
– dapat dilihat dari keterangan running port nya adalah menggunakan port 3002.
– setelah itu keluar dari screen dengan menekan tombol keyboard: shift + a -> d
– anda keluar dari screen yang baru dibuat tanpa menghentikan proses npm start di directory zoro.
– untuk mengetahui daftar screen yang telah diaktifkan bisa cek dengan command:
```
screen -list
```
– Dapat dilihat sekarang ada 2 screen yang telah berjalan

-> Subdomain sanji.alvianaufan.my.id
```
screen
cd /var/www/html/sanji
npm start
```
– dapat dilihat dari keterangan running port nya adalah menggunakan port 3003.
– setelah itu keluar dari screen dengan menekan tombol keyboard: shift + a -> d
– anda keluar dari screen yang baru dibuat tanpa menghentikan proses npm start di directory sanji.
– untuk mengetahui daftar screen yang telah diaktifkan bisa cek dengan command:
```
screen -list
```
– sekarang sudah ada 3 screen yang berjalan
Setelah itu silahkan coba akses ketiga website nya dengan menggunakan browser.
– Ketiga website React JS sudah berjalan secara bersamaan dan sudah sesuai dengan gambar topologinya.
Selanjutnya jika anda ingin menghentikan salah satu website react js yang sudah tidak terpakai bisa dengan resume screen nya saja.

Demikian cara menjalankan lebih dari satu web React JS dengan Apache, silahkan jika ada yang ingin bertanya atau memiliki kendala bisa tulis komentar dibawah atau tulis di bookstack ya 🙂