Deployment FE

A. Deployment front-end

Deployment adalah istilah yang mencakup semua proses yang terlibat dalam software (perangkat lunak) dan hardware (perangkat keras) baru dan berjalan dengan baik di lingkungan nya mulai dari instalasi, konfigurasi, pengoprasian, pengujian dan membuat perubahan yang diperlukan. Dan dari segi bahasa kata deployment ini berasal dari bahasa perancis yaitu deployer yang berarti spread yang artinya penyebaran.

sekarang kita akan belajar bagaimana cara mendeploy website kita ke vercel dan netlify untuk mempublikasikan aplikasi front-end kalian :

A.Vercel

1. Kalian buka website vercel dan login kan akun kalian jika belum mempunyai akun vercel silahkan kalian buat terlebih dahulu, kurang lebih seperti ini tampilan saat kalian pertama kali masuk vercel.

2. Selanjutnya klik create a new project.

3. Kemudian kalian tambahkan repository git kalian dengan cara klik Add a github account, ini jika posisi kalain belum menambahkan repository di awal pendaftaran.

Kurang lebih tampilan ketika kalian sudah menambahkan repository kalian seperti ini.

4. Kalian pilih project mana yang akan kalian deploy ke vercel saya di sini mengambil sampel vue-tutorial kemudian klik import dan kalian scroll kebawah sedikit kalian klik deploy.

Dan selamat anda telah berhasil mendeploy project anda ke vercel.

Seperti inilah penampakan website kalian yang berhasil di deploy ke vercel.

B.Netlify

1. membuat project baru di netlify dengan cara ke menu sites kemudian Add new site. Kalau kalian klik di bagian add new site kalian akan mendaati 3 pilihan yaitu import exiting project, start form a template dan deploy manualy di sini kita akan memilih import an exaiting project karena kita akan mendeploy project kita dari github.

2. Kemudian kalian connect ke git kalian tergantung kalian mau pake gitlab atau github namun di sini saya menggunakan github. Bisa kalian klik saja disitu

3. Kemudian kalian pilih website kalian yang akan di deploy ke netlify, sebelum itu pastikan kalian telah push project kalian ke github atau gitlab.

4. Kemudian konfigurasi sebelum di deploy kalian gunakan konfigurasi default dari netlify nya, kurang lebih seperti ini konfigurasi default dari netlify..

5. Kalau sudah terkonfigurasi semua dengan benar kalian bisa klik tombol deploy site tunggu proses deploy hingga selesai.

Kurang lebih seperti inilah tampilan saat kita mendeploy mendeploy website yang kita buat.

 

6. Setelah itu kita tentukan nama domain untuk website kalian dengan cara di kolom setup your site klik opsi nomer dua dan seperti inilah tampilan ketika kalian setting domain untuk website kalian.

dan karena pada saat setting domain itu berbayar.

jadi kita bisa ganti di bagian Site Setting di bagian site information kalian klik change site name.

kalian bisa pilih nama website sesuka hati kalian tanpa harus membayar domain.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://rifqimulyawan.com/blog/pengertian-deploy/

https://binus.ac.id/knowledge/2019/06/langkah-langkah-untuk-deploy-website-di-netlify/

 

Quiz

1. Apa fungsi utama Vercel dan Netlify dalam konteks deployment Front-End?
1. Menyediakan infrastruktur server untuk aplikasi web
2. Memantau dan menganalisis performa aplikasi Front-End
3. Mengelola dan menyebarkan kode aplikasi Front-End ke server secara otomatis
4. Menyediakan layanan manajemen database untuk aplikasi Front-End
2. Apa perbedaan utama antara Vercel dan Netlify?
1. Vercel mendukung static site dan serverless functions, sedangkan Netlify hanya mendukung static site
2. Netlify mendukung static site dan serverless functions, sedangkan Vercel hanya mendukung static site
3. Vercel memiliki fitur integrasi dengan Git secara langsung, sedangkan Netlify tidak
4. Netlify memiliki fitur auto scaling, sedangkan Vercel tidak
3. Apa yang dimaksud dengan Continuous Deployment dalam konteks Vercel dan Netlify?
1. Proses deployment otomatis yang dilakukan setiap kali ada perubahan pada kode aplikasi
2. Proses deployment manual yang dilakukan oleh pengembang sesuai dengan jadwal yang ditentukan
3. Proses pengujian dan debugging sebelum melakukan deployment aplikasi Front-End
4. Proses optimisasi performa dan kinerja aplikasi setelah deployment
4. Apa yang dimaksud dengan environment variables dalam konteks deployment Front-End?
1. Variabel yang digunakan dalam proses deployment untuk mengatur konfigurasi aplikasi Front-End
2. Variabel yang digunakan dalam proses pengujian unit untuk aplikasi Front-End
3. Variabel yang digunakan dalam proses debugging aplikasi Front-End
4. Variabel yang digunakan dalam proses pengujian performa aplikasi Front-End
5. Apa keuntungan menggunakan fitur Preview Deployment pada Vercel dan Netlify?
1. Memungkinkan pengembang untuk melihat tampilan dan fungsi aplikasi Front-End sebelum deployment resmi
2. Mempercepat proses deployment aplikasi Front-End
3. Mengoptimalkan performa dan kinerja aplikasi Front-End setelah deployment
4. Meningkatkan keamanan aplikasi Front-End dengan memeriksa celah keamanan sebelum deployment
6. Apa yang dimaksud dengan custom domain dalam konteks deployment Front-End?
1. Domain default yang diberikan oleh Vercel dan Netlify untuk setiap aplikasi yang di-deploy
2. Domain yang digunakan untuk mengakses server Vercel dan Netlify secara langsung
3. Domain yang digunakan untuk mengakses aplikasi Front-End yang telah di-deploy
4. Domain yang digunakan untuk mengakses fitur-fitur premium pada Vercel dan Netlify
7. Apa yang dimaksud dengan serverless functions dalam konteks deployment Front-End?
1. Fungsi yang berjalan di sisi server untuk mengelola permintaan dari aplikasi Front-End
2. Fungsi yang dijalankan oleh browser untuk memproses logika aplikasi Front-End
3. Fungsi yang digunakan untuk mengirim dan menerima data antara aplikasi Front-End dan server
4. Fungsi yang digunakan untuk mengoptimalkan performa aplikasi Front-End setelah deployment
8. Apa yang dimaksud dengan server-side rendering (SSR) dalam konteks deployment Front-End?
1. Proses rendering tampilan aplikasi Front-End di sisi server sebelum dikirim ke browser
2. Proses rendering tampilan aplikasi Front-End di sisi browser setelah menerima kode dari server
3. Proses memisahkan kode aplikasi Front-End menjadi beberapa bagian yang di-deploy secara terpisah
4. Proses mengatur konfigurasi server untuk mengoptimalkan performa aplikasi Front-End
9. Apa yang dimaksud dengan prerendering dalam konteks deployment Front-End?
1. Proses rendering tampilan aplikasi Front-End di sisi server sebelum dikirim ke browser
2. Proses rendering tampilan aplikasi Front-End di sisi browser setelah menerima kode dari server
3. Proses memisahkan kode aplikasi Front-End menjadi beberapa bagian yang di-deploy secara terpisah
4. Proses mengoptimalkan performa aplikasi Front-End setelah deployment
10. Apa keuntungan menggunakan fitur form handling pada Netlify Forms dalam konteks deployment Front-End?
1. Memudahkan pengelolaan formulir dalam aplikasi Front-End
2. Memungkinkan pengguna untuk mengirim data melalui formulir langsung ke Netlify
3. Mengoptimalkan performa dan kinerja aplikasi Front-End setelah deployment
4. Meningkatkan keamanan aplikasi Front-End dengan memeriksa celah keamanan sebelum deployment