Cara Deploy Aplikasi React di Ubuntu 18.04
React adalah sebuah JavaScript library yang dapat digunakan untuk membangun user interfaces. React merupakan salah satu proyek open source dari Facebook.
1. Membuat User
Membuat user baru khusus pemilik aplikasi React.
1 2 3 | sudo adduser reactapp sudo usermod -aG sudo reactapp su -l reactapp |
2. Install Node.js
Install Node.js dengan versi yang sesuai dengan kebutuhan aplikasi React yang dibuat. Di sini saya menggunakan Node.js 12.x LTS.
1 2 3 | sudo apt install build-essentials curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt install -y nodejs |
Verifikasi hasil install Node.js.
1 2 3 4 5 | nodejs -v v12.13.1 npm -v 6.12.1 |
3. Aplikasi React
Membuat aplikasi React untuk kebutuhan demo deploy.
Install create-react-app tool.
1 | sudo npm install -g create-react-app |
Membuat project reactapp.
1 | create-react-app demoreact |
Menguji menjalankan development server.
1 2 | cd demoreact npm start |
Hasilnya.
1 2 3 4 5 6 7 8 | Compiled successfully! You can now view demoreact 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 development server.
4. Install PM2
PM2 production process manager untuk aplikasi Node.js.
Install PM2.
1 | sudo npm install pm2 -g |
Jalankan aplikasi React dengan menggunakan PM2.
1 2 | pm2 start ~/demoreact/node_modules/react-scripts/scripts/start.js --name "demo-react" sudo chown reactapp:reactapp /home/reactapp/.pm2/rpc.sock /home/reactapp/.pm2/pub.sock |
5. Install Nginx
Selanjutnya install dan setting Nginx web server. Nginx yang akan berjalan di port 80 (HTTP) yang diakses oleh visitor, yang kemudian akan melakukan komunikasi dengan PM2 untuk eksekusi aplikasi React.
1 | sudo apt install nginx -y |
Buat file server block untuk domain disertai setting reverse proxy ke PM2. Di sini saya menggunakan nama domain pengembang.web.id.
1 2 | cd /etc/nginx/conf.d sudo vi pengembang.web.id.conf |
Isi dari file pengembang.web.id.conf.
1 2 3 4 5 6 7 8 9 10 11 12 13 | server { listen 80; server_name pengembang.web.id www.pengembang.web.id; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Host $host; proxy_set_header Connection 'upgrade'; proxy_cache_bypass $http_upgrade; } } |
Restart service Nginx.
1 | sudo systemctl restart nginx |
6. Pengujian
Browsing nama domain yang digunakan untuk aplikasi React.
Selamat mencoba 🙂
