Deploy React App on Ubuntu 18.04

Deploying a React Application on Ubuntu 18.04

Dalam tutorial ini, kita akan membahas langkah-langkah untuk melakukan deploy aplikasi React pada sistem operasi Ubuntu 18.04. Tutorial ini mencakup proses persiapan, konfigurasi, dan penanganan masalah yang mungkin terjadi.

Prasyarat

Anda harus memiliki akun dan instance Compute di platform cloud.
Pastikan sistem operasi Anda adalah Ubuntu 18.04.
Web server (Apache atau NGINX) sudah terinstal dan dikonfigurasi.
Anda memiliki akses SSH ke server Anda.
Node.js dan npm terinstal di mesin lokal Anda untuk menjalankan aplikasi React.
Git terinstal di mesin lokal Anda.

Langkah Utama

1. Siapkan Aplikasi React

Jika Anda belum memiliki aplikasi React, Anda dapat membuatnya menggunakan Create React App. Jalankan perintah berikut di terminal Anda:

npx create-react-app nama-aplikasi

Setelah proses selesai, navigasikan ke direktori aplikasi:

cd nama-aplikasi

2. Bangun Aplikasi untuk Produksi

Selanjutnya, Anda perlu membangun aplikasi Anda untuk lingkungan produksi dengan menjalankan:

npm run build

Ini akan membuat folder build yang berisi berkas statis aplikasi Anda.

3. Mengkonfigurasi Server

3.1. Siapkan Direktori Web di Server

sudo mkdir -p /var/www/example.com

Setel izin direktori:

sudo chown -R $USER:www-data /var/www/example.com

Setel izin akses untuk direktori:

sudo chmod -R 755 /var/www/example.com

3.2. Salin Berkas Build ke Server

Gunakan Rsync untuk menyalin berkas dari direktori build di mesin lokal Anda ke server:

rsync -avz build/ user@server_ip:/var/www/example.com

4. Konfigurasi Web Server

4.1. Konfigurasi Apache

Jika Anda menggunakan Apache, buat berkas konfigurasi virtual host:

sudo nano /etc/apache2/sites-available/example.com.conf

Tambahkan konfigurasi berikut:

<VirtualHost *:80>
ServerAdmin webmaster@example.com
ServerName example.com
DocumentRoot /var/www/example.com

<Directory /var/www/example.com>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>

ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Aktifkan situs dan muat ulang Apache:

sudo a2ensite example.com

sudo systemctl reload apache2

4.2. Konfigurasi NGINX

Jika Anda menggunakan NGINX, buat berkas konfigurasi:

sudo nano /etc/nginx/sites-available/example.com

Tambahkan konfigurasi berikut:

server {
listen 80;
server_name example.com;

location / {
root /var/www/example.com;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}

Aktifkan situs dan muat ulang NGINX:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

sudo systemctl reload nginx

Konfigurasi Lanjutan

Anda mungkin ingin mengkonfigurasi HTTPS untuk aplikasi Anda menggunakan Let's Encrypt. Untuk ini, Anda dapat menggunakan Certbot:

sudo apt install certbot python3-certbot-apache

Setelah terinstal, jalankan:

sudo certbot --apache

Untuk NGINX, gunakan:

sudo certbot --nginx

Ikuti instruksi untuk mengatur sertifikat SSL.

Best Practices

Selalu perbarui server Anda untuk menghindari celah keamanan.
Gunakan kontrol versi (misalnya Git) untuk pengelolaan kode sumber aplikasi Anda.
Lakukan backup secara berkala terhadap data dan konfigurasi server.
Monitoring log server untuk mendeteksi anomali.

Troubleshooting

Jika Anda mengalami masalah saat mengakses aplikasi, periksa hal-hal berikut:

Pastikan web server berjalan dengan baik.
Periksa konfigurasi virtual host Anda untuk kesalahan.
Periksa izin akses ke direktori aplikasi.
Cek log server untuk menemukan kesalahan yang mungkin terjadi.

Kesimpulan

Selamat, Anda telah berhasil melakukan deploy aplikasi React pada Ubuntu 18.04! Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mengelola dan memperbarui aplikasi Anda di server. Pastikan untuk selalu menjaga keamanan dan performa server Anda untuk pengalaman pengguna yang optimal.

Jika Anda membutuhkan bantuan lebih lanjut, jangan ragu untuk menghubungi kami.

CTA: Konsultasi Jasa Setup Sekarang