Gatsby adalah generator situs modern yang cepat untuk React. Ini adalah kerangka kerja sumber terbuka yang menggabungkan fungsionalitas dari React, GraphQL, dan Webpack untuk membangun situs web dan aplikasi statis.
Gatsby lebih dari sekadar generator situs statis, ini memungkinkan pengembang web untuk membangun situs web menggunakan Bereaksi dan bekerja dengan sumber data apa pun (CMS, Penurunan harga, dll) pilihan mereka. Dalam tutorial ini, kami akan menunjukkan cara menginstal Gatsby di Ubuntu 20.04.
Prasyarat
- VPS Ubuntu 20.04
- Akses SSH dengan hak akses root
Langkah 1. Masuk ke server
Pertama, masuk ke server Ubuntu 20.04 Anda melalui SSH sebagai pengguna root:
ssh root@IP_Address -p Port_number
Anda harus mengganti 'IP_Address' dan 'Port_number' dengan alamat IP dan nomor port SSH server Anda masing-masing.
Sebelum memulai, Anda harus memastikan bahwa semua paket OS Ubuntu yang diinstal di server sudah diperbarui. Anda dapat melakukannya dengan menjalankan perintah berikut:
# apt update -y # apt upgrade -y
Langkah 2. Buat Pengguna Sistem
Selanjutnya, kami akan membuat pengguna sistem baru dan memberikannya hak sudo. Dalam tutorial ini, kami akan membuat pengguna sistem baru yang disebut 'master', Anda dapat memilih nama pengguna apa pun yang Anda suka.
# adduser master
Setelah dibuat, jalankan perintah ini untuk menambahkan pengguna baru ke grup sudo. Di Ubuntu, pengguna yang tergabung dalam grup sudo diizinkan untuk menjalankan perintah sudo.
# usermod -aG sudo master
Sekarang, kita dapat login sebagai pengguna baru 'master', dan kita akan menggunakan pengguna ini untuk menyelesaikan instalasi.
# su - master
Langkah 3. Instal NodeJS dan NPM
Ada beberapa metode untuk menginstal NodeJS dan NPM. Pada artikel ini, kami akan menginstalnya menggunakan sumber node. Untuk metode lain, Anda dapat memeriksa posting blog kami tentang cara menginstal NodeJS dan NPM.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Setelah selesai, kita perlu mengunduh informasi paket dari sumber yang baru ditambahkan di atas.
$ sudo apt update
Selanjutnya, jalankan perintah berikut untuk akhirnya menginstal NodeJS dan NPM.
$ sudo apt install nodejs
NodeJS dan NPM telah berhasil diinstal, Anda dapat memeriksa versi yang diinstal menggunakan perintah ini:
$ node -v; npm -v
Langkah 4. Instal Gatsby-CLI
Gatsby CLI adalah titik masuk utama untuk memulai dan menjalankan aplikasi Gatsby. Ini dikemas sebagai executable yang dapat digunakan secara global. Kita dapat menginstal Gatsby CLI melalui npm.
$ sudo npm install -g gatsby-cli
Untuk memeriksa versi Gatsby CLI yang terinstal, jalankan perintah ini:
$ gatsby --version
Sekarang, mari kita buat situs web Gatsby baru, Anda dapat mengganti “gatsby_site ” dengan nama apapun yang Anda suka.
$ gatsby new gatsby_site
Tunggu beberapa saat, dan direktori “gatsby_site” baru akan dibuat.
Panggil perintah di bawah ini untuk mengembangkan Gatsby dan menjalankannya.
$ cd gatsby_site $ gatsby develop -H 0.0.0.0
Anda seharusnya dapat mengakses situs Gatsby Anda di http://YOUR_SERVER_IP_ADDRESS:8000 , tekan CTRL + C jika Anda ingin menghentikannya.
Sekarang, mari kita buat situs web Gatsby kita:
$ gatsby build
gatsby build perintah adalah bagian dari Gatsby CLI. Jalankan gatsby build perintah untuk membuat versi siap produksi dari situs Anda saat Anda siap untuk memublikasikan situs Anda. Anda juga dapat men-deploy situs web Gatsby Anda ke GitHub untuk menyiapkan pipeline CI/CD (Continuous Integration and Continuous Deployment).
Langkah 5. Instal PM2
Process Manager (PM2) akan memungkinkan Anda untuk menjaga aplikasi tetap hidup selamanya, memuat ulang tanpa downtime, dan memfasilitasi tugas admin sistem umum. Jalankan perintah di bawah ini untuk menginstal PM2 di Ubuntu 20.04 Anda secara global.
$ sudo npm install pm2 -g
Setelah menginstal PM2, kita dapat menjalankan perintah ini untuk memulai situs web Gatsby kita di port 8000.
$ cd ~/gatsby-site
$ pm2 start gatsby --name mygatsby -- serve -p 8000
Langkah 6. Instal dan Konfigurasi NGINX
Instalasi Gatsby Anda sekarang telah selesai dan Anda harus dapat mengaksesnya di IP publik server Anda dengan nomor port 8000. Namun, jika Anda ingin mengakses situs web Gatsby Anda menggunakan nama domain atau nama subdomain alih-alih mengetik alamat IP server dan nomor port di URL, Anda perlu mengonfigurasi proxy terbalik di server Anda.
Pada langkah ini, kami akan menunjukkan kepada Anda bagaimana menerapkan konfigurasi proxy terbalik menggunakan Nginx. Nginx adalah server web yang kuat dan berkinerja tinggi yang berfokus pada penyesuaian dan kinerja.
Pertama, instal Nginx dengan perintah berikut:
$ sudo apt install nginx
Di Ubuntu 20.04, Nginx dikonfigurasi untuk mulai berjalan saat instalasi, Anda dapat memeriksanya dengan menjalankan perintah ini:
$ sudo systemctl status nginx
Setelah terinstal, buat file konfigurasi blok server Nginx baru. Ganti yourdomain.com dengan nama domain atau subdomain Anda yang sebenarnya:
$ sudo nano /etc/nginx/sites-enabled/yourdomain.com.conf
Tambahkan konten berikut ke file:
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
location ~ /.well-known {
allow all;
}
}
Simpan file dengan menekan CTRL + O lalu tekan CTRL + X untuk keluar dari editor nano lalu restart Nginx.
$ sudo systemctl restart nginx
Langkah 7. Instal sertifikat SSL
Ini adalah langkah opsional tetapi sangat disarankan untuk diselesaikan. Kami akan memasang sertifikat SSL gratis dari Let's Encrypt.
$ sudo apt install python3-certbot-nginx -y
Setelah selesai, kita dapat menjalankan perintah ini untuk menginstal sertifikat SSL.
$ sudo certbot
Anda akan dimintai alamat email Anda, menerima TOS Let's Encrypt, dan apakah Anda ingin membagikan alamat email Anda dengan Electronic Frontier Foundation atau tidak. Kemudian, Anda harus memilih nama yang ingin Anda aktifkan HTTPSnya. Pilih situs web Gatsby Anda dengan mengetikkan nomor dan menekan ENTER. Let's encrypt akan menginstal sertifikat dan akan menanyakan apakah Anda akan mengkonfigurasi HTTP ke HTTPS redirect atau tidak, Anda dapat memilih redirect kemudian certbot akan membuat redirection dan memuat ulang Nginx jika semuanya baik-baik saja.
Sekarang, Anda seharusnya dapat mengakses situs web Gatsby Anda dalam mode HTTPS di https://yourdomain.com , Anda dapat melanjutkan dengan membuat aplikasi menggunakan Gatsby.
Tentu saja, Anda tidak perlu bingung untuk menginstal Gatsby di Ubuntu 20.04 jika Anda memiliki paket hosting VPS Linux terkelola yang dihosting bersama kami. Jika ya, Anda cukup meminta tim dukungan kami untuk menginstal Gatsby di Ubuntu 20.04 untuk Anda. Mereka tersedia 24/7 dan akan dapat membantu Anda dengan pemasangan Gatsby, serta persyaratan tambahan yang mungkin Anda miliki.
PS. Jika Anda senang membaca posting blog ini tentang cara menginstal Gatsby di Ubuntu 20.04, jangan ragu untuk membagikannya di jejaring sosial dengan menggunakan pintasan di bawah ini atau cukup tinggalkan komentar di bagian komentar. Terima kasih.