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.

[INPUT]

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.

[INPUT]

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.

[INPUT]

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.

[INPUT]

1 sudo npm install -g create-react-app

Membuat project reactapp.

[INPUT]

1 create-react-app demoreact

Menguji menjalankan development server.

[INPUT]

1 2 cd demoreact npm start  

Hasilnya.

[INPUT]

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.

[INPUT]

1 sudo npm install pm2 -g

Jalankan aplikasi React dengan menggunakan PM2.

[INPUT]

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.

[INPUT]

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.

[INPUT]

1 2 cd /etc/nginx/conf.d sudo vi pengembang.web.id.conf

Isi dari file pengembang.web.id.conf.

[INPUT]

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.

[INPUT]

1 sudo systemctl restart nginx

*6. Pengujian*

Browsing nama domain yang digunakan untuk aplikasi React.

Aplikasi create-react-app

Selamat mencoba 🙂

Leave a Reply

Your email address will not be published.