Search for:

BLOG IT SYSADMIN

Daftar akun digitalocean untuk mendapatkan free credit 100$.
DigitalOcean Referral Badge

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:

cara menjalankan lebih dari satu website react js dengan 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.

  1. Install Apache2 terlebih dahulu:
    apt install apache2
  2. Aktifkan modul proxy, proxy_http, dan rewrite di apache2 nya:
    a2enmod proxy
    a2enmod proxy_http
    a2enmod rewrite
  3. 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.

  4. 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



  5. 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
  6. Install screen untuk menjalankan npm secara virtual didalam console server:
    apt install screen
  7. 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

    npm screen to run port 3001
    – 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

    cara menjalankan lebih dari satu web react js dengan apache


    -> Subdomain zoro.alvianaufan.my.id

    screen
    cd /var/www/html/zoro
    npm start

    npm screen to run port 3002
    – 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

    cara menjalankan lebih dari satu web react js dengan apache
    – Dapat dilihat sekarang ada 2 screen yang telah berjalan


    -> Subdomain sanji.alvianaufan.my.id

    screen
    cd /var/www/html/sanji
    npm start

    npm screen to run port 3003
    – 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

    cara menjalankan lebih dari satu website react js dengan apache
    – sekarang sudah ada 3 screen yang berjalan

  8. Setelah itu silahkan coba akses ketiga website nya dengan menggunakan browser. cara menjalankan lebih dari satu web react js dengan apachecara menjalankan lebih dari satu web react js dengan apachecara menjalankan lebih dari satu web react js dengan apache
    – Ketiga website React JS sudah berjalan secara bersamaan dan sudah sesuai dengan gambar topologinya.
  9. 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 🙂



1 Comment

Write A Comment