DEV Community

Cover image for Belajar Deploy Aplikasi Web Menggunakan Layanan ECS (Elastic Compute Service) Alibaba
Ferry Ananda Febian
Ferry Ananda Febian

Posted on

Belajar Deploy Aplikasi Web Menggunakan Layanan ECS (Elastic Compute Service) Alibaba

Saya pernah dengar istilah “Tutorial Hell”, yaitu kondisi dimana kita terus menerus mengikuti atau menonton video tutorial tanpa mengaplikasikannya ke dalam sebuah proyek nyata, hal ini jelas pantas disematkan kepada saya jika hanya menonton presentasi dari instruktur saya.

Oh iya, saya saat ini berkesempatan mengikuti pelatihan Alibaba Cloud dari Digitalent Scholarship Kominfo tahun 2024 batch 1, jadi di kesempatan ini saya ingin mengajak teman-teman untuk belajar bersama bagaimana sih cara setup hingga deploy aplikasi web menggunakan layanan ECS (Elastic Compute Service) dari Alibaba Cloud.

Setup ECS

Hal pertama yang perlu dipersiapkan sudah pasti ECS atau (Elastic Compute Service), jadi ECS ini merupakan salah satu layanan IaaS (Infrastructure as a Service) yang disediakan oleh Alibaba Cloud, atau sebut saja ini layanan hostingnya. Buat akun dan login ke alibabacloud.com

Order ECS

Jangan khawatir, Alibaba sendiri menyediakan trial 3 bulan ECS, di bagian ini kita pilih saja spek yang paling kecil, karena ini sudah cukup untuk kita belajar.

Order ECS

Pembayaran

Setelah itu kita akan dialihkan ke halaman pembayaran, untuk bagian ini tidak banyak yang perlu kita lakukan, cukup pilih sistem operasi yang akan digunakan dan mengkonfigurasi management akun, untuk management akun saya atur menggunakan password, password ini nanti digunakan untuk login ke SSH.

Pembayaran ECS

(opsional) kita juga bisa merubah lokasi server, bandwith atau opsi lainnya, setelah itu pastikan juga kita tidak dikenakan biaya, karena saat ini kita mencoba menggunakan Trial.

Pembayaran berhasil

Catatan, jika teman-teman diminta mengisi opsi pembayaran, bisa menggunakan kartu MasterCard atau Debit atau PayPal, tidak akan ada penarikan, ini digunakan untuk validasi dan pastikan juga punya saldo setidaknya $1, saldo $1 akan dikembalikan setelah validasi pembayaran berhasil.

Pembayaran Berhasil

Masuk ke Console ECS

Sekarang kita sudah bisa masuk ke console ECS nih

Masuk ke console ECS

Setelah itu klik Elastic Compute Service pada bagian Recently Used Product.

Recently Used Product

Kita akan dialihkan ke halaman utama console ECS.

Halaman utama ECS

Login SSH

Di halaman ECS console, kita bisa melihat alamat IP publik ECS yang sudah kita buat, IP ini bisa kita gunakan untuk login ke ECS via SSH. Gunakan password yang dibuat pada saat order ECS di step sebelumnya.

Putty ECS Alibaba

Selamat, sampai disini kita sudah berhasil menyiapkan lingkungan Elastic Compute Service. Biar makin mantap yuk kita lanjut deploy aplikasi web.

Install Web Server

Karena instance yang kita buat benar-benar masih kosongan, kita coba install web server terlebih dahulu agar dapat menampilkan web statis nantinya. Kita akan install Nginx.

sudo apt update
sudo apt install nginx -y
sudo systemctl start nginx
Enter fullscreen mode Exit fullscreen mode

Cek Status Nginx

Cek juga status Nginx

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

Nginx berhasil running
Nginx sudah berjalan di instances.

Akses Web via Browser

Sekarang kita coba akses web server via browser

Nginx Error

Anjay error, error ini terjadi karena kita belum mengizinkan traffic HTTP dari luar untuk mengakses web server kita.

Cara nya dengan mengizinkan port 80 agar public dapat mengakses web server yang sudah kita buat. Masuk ke tab Network & Security pada console Alibaba. Lalu tambahkan rule seperti contoh dibawah ini untuk HTTP.

Setting firewall ECS Alibaba

Setelah selesai, coba akses lagi IP nya.

Akses Nginx

Tara, kita sudah berhasil setup Nginx di instance ECS Alibaba.

Selanjutnya kita ngapain? kita langsung deploy aplikasi.

Deploy Aplikasi

Untuk deploy aplikasi, saya menggunakan template dari Next.js dan tidak lupa juga menambahkan action untuk proses CI/CD nya.

//.github/workflows/nextjs.yml
name: Deploy Next.js to Server

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Install Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "20"

      - name: Install dependencies
        run: npm install

      - name: Build Next.js
        run: npm run build

      - name: Deploy to server
        uses: appleboy/scp-action@master
        with:
          host: 47.243.49.50
          username: ${{ secrets.SERVER_USERNAME }}
          password: ${{ secrets.SERVER_PASSWORD }}
          port: 22
          source: "out/*"
          target: "/var/www/html"
Enter fullscreen mode Exit fullscreen mode

Menyimpan Repository Secrets

Selanjutnya kita perlu menyimpan repository secrets seperti username dan password untuk login ke instances ECS.

Menyimpan repository secrets

Setelah itu push atau rerun action github yang sudah kita buat.

Bikin github ci/cd

Seperti gambar yang terlihat diatas, kita sudah berhasil membuat action Github yang secara otomatis akan membuild dan mendistribusikan project Next.js ke folder /var/www/html di instances ECS Alibaba.

Sekarang kita coba lagi akses IP instances ECS yang sudah dibuat http://47.243.49.50/

Koh Jack Ma

Tara makjreng, kita akan melihat Koh Jack Ma yang lagi memegang logo Alibaba Cloud kebanggaannya.

Kesimpulan

Di artikel ini kita sudah membahas sedikit tentang salah satu produk unggulan Alibaba Cloud yaitu ECS (Elastic Compute Service), cara order, setup Nginx dan deploy aplikasi web. Kedepannya saya akan coba bahas produk Alibaba Cloud lainnya.

Oke deh teman-teman sekian dulu catatan singkat saya kali ini, jika ada kendala atau kesulitan silahkan ketik di kolom komentar ya, sampai ketemu di catatan Ferry tamvan lainnya.

Referensi :
[1]https://stackoverflow.com/questions/62183560/running-nginxon-alibaba-ecs-is-not-reachable-from-the-web
[2]https://www.cyberciti.biz/faq/howto-install-setup-nginx-on-debian-linux-9/

Top comments (1)

Collapse
 
ferryops profile image
Ferry Ananda Febian

reserved