Original Repository : https://github.com/muety/mininote
| Nama | Nim | |
|---|---|---|
| 1 | Rafael Tektano Grandiawan Eknanda | G64180001 |
| 2 | Bintang Fikriguska | G64180024 |
| 3 | Alvin Ferdiansyah | G64180079 |
| 3 | Muhammad Hafizhan | G64180100 |
| Sekilas Tentang | Instalasi | Konfigurasi | Cara Pemakaian | Pembahasan | Referensi |
|---|
MiniNote merupakan sebuah aplikasi Markdown Note garapan muety bersifat self-hosted menggunakan Vue 3 dan Express. Aplikasi ini dapat membuat sebuah teks dengan format markdown serta dapat langsung direpresentasikan. Sebagai tambahan, anda dapat mempelajari markdown di link berikut ini untuk memudahkan penggunaan. MiniNote pada projek ini telah di deploy ke alamat publik yang dapat diakses melalui https://mininote.bintangfikriguska.my.id/
Untuk menjalankan aplikasi terdapat beberapa cara, yaitu dengan cara manual dan juga docker pada localhost, dan menggunakan nginx server untuk deploy ke publik.
Terdapat beberapa requirements yang akan kita gunakan untuk melakukan install dan build pada aplikasi. Untuk itu, kita harus memastikan semua requirements dibawah ini terinstall dengan benar. Beberapa requirement memiliki minimal versi yang capable untuk digunakan. Namun di bawah ini adalah versi dari requirement yang kami install dan gunakan.
NodeJS v14.16.0
$ cd ~
$ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
$ sudo bash nodesource_setup.sh
$ sudo apt install nodejs
Yarn 1.22.5
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update
$ sudo apt remove cmdtest
$ sudo apt install yarn
npm 6.14.11
$ sudo npm install
# **Clone Repositori orisinilnya**
$ git clone https://github.com/muety/mininote
# Install backend dependencies
$ yarn
# Install frontend dependencies and build
$ cd webapp && yarn && yarn build && cd ..
Pastikan anda sudah berada pada directory aplikasi, dan seluruh installan beserta pre-install requirement sudah terpenuhi. Apabila aplikasi diinstall pada local computer, secara default akan dijalankan pada port 3000. Sehingga kita dapat mengakses aplikasi pada localhost:3000. Setelah build berhasil, kita dapat langsung menjalankan aplikasi.
$ cd mininote
$ yarn start
Terdapat alternatif lain untuk menjalankan aplikasi, yaitu menggunakan docker. Docker sendiri merupakan program untuk membangun, mengemas, dan menjalankan aplikasi dengan membuatnya menjadi container (wadah). Keuntungan menggunakan docker salah satunya adalah terisolasi, aplikasi yang terisolasi akan terpisah dan tidak akan mengganggu host apabila terdapat masalah (Mirip seperti VM).
Docker
$ sudo apt-get update
$ sudo apt-get install \
apt-transport-https \
ca-certificates \
curl \
gnupg \
lsb-release
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
$ echo \
"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
$ sudo usermod -a -G docker $USER
# Membuat volume persistent yang akan digunakan aplikasi
$ docker volume create mininote-data
# Mendownload image dari docker hub, membuat container, lalu menjalankannya
$ docker run -d -p 127.0.0.1:3000:3000 -v mininote-data:/app/data --name mininote n1try/mininote
Setelah command tersebut dijalankan, aplikasi bisa diakses di localhost port 3000 sama seperti penginstalan manual.
Sebelumnya, kita perlu melakukan setup dan konfigurasi nginx terlebih dahulu yang dijelaskan pada bagian Konfigurasi. Setelah seluruh persiapan dan pengaturan di set dengan baik, kita dapat menjalankan perintah :
$ sudo nginx -s reload
Dan aplikasi pun akan dideploy dan berjalan pada alamat publik.
Kami mencoba untuk menginstall dan menjalankan aplikasi menggunakan Virtual Private Server. Untuk itu, terlebih dahulu kita perlu untuk membuat sebuah VPS dan melakukan beberapa setup. Disini kami menggunakan VPS dari Google Cloud Product menggunakan credit free trial . Pada prosesnya, pertama kita perlu membuat sebuah VM baru pada google cloud.
Adapun details VPS yang kami setup diantaranya :
- Machine type : n1-standard-1 (1 vCPU, 3.75 GB memory)
- CPU platform : Intel Skylake
- Zone : asia-southeast2-a
- External IP : 34.101.67.147 (ephemeral)
- Operating System : Ubuntu 20.04 LTS
- Remote Access : SSH
Karena aplikasi web akan dibuka sebagai akses publik, kita perlu untuk menyiapkan beberapa port dan rule firewall juga.
Kita juga harus memastikan bahwa server dapat terkoneksi menggunakan SSH. Kita dapat mengakses remote google cloud, dan login sebagai sudo untuk membuat akses baru agar server dapat diakses menggunakan SSH client, serta menambahkan beberapa pengaturan lain yang diperlukan. Setelah VPS siap digunakan, kita dapat lanjut ke langkah berikutnya yaitu mempersiapkan requirement untuk menginstall aplikasi.
Kami menggunakan cloudflare sebagai server penghubung antara server asli dengan visitor. Cloudflare sendiri adalah Content Delivery Network (CDN) yang memiliki banyak fasilitas. Oleh karena itu kami menggunakannya untuk instalasi SSL dan sebagai DNS.
Di sisi server, kami menggunakan nginx sebagai web server untuk melakukan setup domain dan sertikat SSL yang telah diberikan oleh cloudflare pada server. Selain itu, nginx juga digunakan untuk melakukan reverse proxy ke port tertentu tempat aplikasi berada.
Register dan login pada akun cloudflare. Setelah itu tambahkan domain dengan menekan tombol add site
Masukkan domain website anda.
setelah itu pilih free plan jika ingin menggunakan plan yang gratis.
Akan terdapat table untuk menambahkan record DNS, masukkan IP publik server anda ke dalam record domain yang anda inginkan tersebut.
Ganti nameserver anda pada domain registrar dengan nameserver cloudflare.
Setelah nameserver diubah, pilih tab SSL/TLS, lalu tab Origin Server, dan pilih create certificate. Akan ada tampilan seperti berikut:
Setelah tombol Create ditekan, akan terdapat origin certificate dan private key. Copy dan simpan origin certificate ke dalam file /etc/ssl/certs/cert.pem dan private key ke dalam file /etc/ssl/private/priv.key. (File bisa diubah sesuai keinginan)
nginx
$ sudo apt install nginx
Tambahkan file konfigurasi /etc/nginx/sites-available/mininote dengan isi sebagai berikut:
server {
listen 80;
listen [::]:80;
# Sesuaikan dengan domain anda
server_name mininote.bintangfikriguska.my.id www.mininote.bintangfikriguska.my.id;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
# Sesuaikan dengan domain anda
server_name mininote.bintangfikriguska.my.id www.mininote.bintangfikriguska.my.id;
# Sesuaikan dengan sertifikat file yang terdapat di server anda
ssl_certificate /etc/ssl/certs/cert.pem;
ssl_certificate_key /etc/ssl/private/priv.key;
access_log /var/log/nginx/reverse-access.log;
error_log /var/log/nginx/reverse-error.log debug;
location / {
proxy_set_header Host $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_pass http://localhost:3000;
}
}
Setelah itu buat symbolic link (symlink) /etc/nginx/sites-enabled/mininote yang mengarah ke /etc/nginx/sites-available/mininote.
$ sudo ln -s /etc/nginx/sites-available/mininote /etc/nginx/sites-enabled/
Setelah membuat symlink di dalam folder tersebut, file konfigurasi yang telah kita buat tersebut akan diaggap aktif oleh nginx (setelah di-reload). Alasan digunakannya symlink di folder sites-enabled adalah agar lebih terorganisir, jadi apabila ingin menonaktifkan file konfigurasi (menghapus symlink) dan suatu saat ingin mengaktifkannya lagi, tinggal membuat symlink yang baru ke folder sites-enabled.
Lakukan reload file konfigurasi nginx.
$ sudo nginx -s reload
Setelah itu, aplikasi sudah bisa diakses menggunakan domain kita yang sudah terinstal ssl. Web akhir aplikasi dapat diakses secara publik pada web berikut : MiniNote
Aplikasi dapat diakses pada alamat publik kami di https://mininote.bintangfikriguska.my.id/. Aplikasi ini memiliki beberapa fitur sederhana, diantaranya :
- Membuat Sebuah Repository
Pengguna dapat membuat repository dari notenya sendiri dengan fitur penamaan repository beserta password untuk mengakses. Password dan nama respository dapat diubah
- Markdown Editor
Pengguna dapat menuliskan teks dengan format markdown dan sistem dapat langsung menampilkan hasilnya (pada Kotak A) - Membuat Note Baru
Pengguna dapat membuat note baru (pada Kotak C) - Mencari Note
Dapat dilihat pada Kotak B - Menyimpan dan Mengubah Nama serta Password
Dapat dilihat dan diakses pada tab label D
- Aplikasi ini cukup responsif dalam menginterpretasikan markdown
- Fitur password dan nama directory user cukup fungsional
- Aplikasi dibangun dengan node js yang cukup sederhana dan mudah diinstal
- Lebih mirip ke markdown playground
- Mitigasi serangan DDoS.
- HTTPS, Instalasi menggunakan sertifikat SSL, sehingga lebih secure.
- Aplikasi ini memiliki user interface yang kurang menarik dengan user experience yang kurang nyaman. Pengguna harus benar-benar menghafal format markdown tanpa ada autofill.
- Fitur yang disediakan juga tidak banyak seperti yang ditawarkan oleh Notion
- Notion memiliki fitur yang lebih banyak dibanding MiniNote (dapat meng-input tabel, gambar, embed website, dan lebih banyak lagi
- Notion memiliki user-experience yang ramah, pengguna yang tidak paham tentang script akan mudah menggunakannya
