Praktik: Men-deploy aplikasi web ke server produksi

From OnnoWiki
Jump to navigation Jump to search

Berikut adalah modul lengkap untuk bagian **"πŸ› οΈ Praktik: Men-deploy Aplikasi Web ke Server Produksi"** sebagai bagian dari kuliah **Web Programming** dengan topik **Pengenalan Deployment Aplikasi Web** menggunakan **Ubuntu 24.04**. Modul ini **tidak menggunakan tools dari Microsoft sama sekali**, dan dilengkapi banyak **contoh praktis dan hands-on**.

---

    1. πŸ“˜ Modul Praktik
      1. **Men-deploy Aplikasi Web ke Server Produksi**

πŸ–₯️ *Pengenalan Deployment Aplikasi Web – Ubuntu 24.04*

---

      1. 🎯 Tujuan Pembelajaran

Setelah menyelesaikan praktik ini, mahasiswa akan: - Mampu menyiapkan server Ubuntu 24.04 untuk produksi. - Men-deploy aplikasi HTML statis, PHP, dan Python Flask ke server produksi. - Memahami penggunaan NGINX dan Apache sebagai reverse proxy atau web server. - Menerapkan struktur direktori, konfigurasi, dan pengamanan dasar server.

---

    1. 🧰 1. Persiapan Lingkungan Server
      1. 1.1 Update dan Instalasi Dasar

```bash sudo apt update && sudo apt upgrade -y sudo apt install curl git unzip ufw -y ```

      1. 1.2 Tambah User Non-Root (Opsional)

```bash sudo adduser webadmin sudo usermod -aG sudo webadmin ```

---

    1. 🌐 2. Men-deploy Aplikasi HTML Statis (NGINX)
      1. 2.1 Install NGINX

```bash sudo apt install nginx -y ```

      1. 2.2 Buat Direktori dan File HTML

```bash sudo mkdir -p /var/www/htmlapp sudo nano /var/www/htmlapp/index.html ```

    • Contoh isi `index.html`:**

```html <!DOCTYPE html> <html>

 <head><title>Aplikasi Statis</title></head>

<body>

Halo dari NGINX!

</body>

</html> ```

      1. 2.3 Konfigurasi NGINX

```bash sudo nano /etc/nginx/sites-available/htmlapp ```

```nginx server {

   listen 80;
   server_name htmlapp.local;
   root /var/www/htmlapp;
   index index.html;
   location / {
       try_files $uri $uri/ =404;
   }

} ```

      1. 2.4 Aktifkan dan Reload

```bash sudo ln -s /etc/nginx/sites-available/htmlapp /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx ```

Tambahkan domain ke `/etc/hosts`: ``` 127.0.0.1 htmlapp.local ```

---

    1. 🐘 3. Men-deploy Aplikasi PHP (Apache)
      1. 3.1 Install Apache + PHP

```bash sudo apt install apache2 php libapache2-mod-php -y ```

      1. 3.2 Buat Project dan File PHP

```bash sudo mkdir -p /var/www/phpapp sudo nano /var/www/phpapp/index.php ```

    • Isi `index.php`:**

```php <?php echo "Halo dari aplikasi PHP!"; ?> ```

      1. 3.3 Konfigurasi VirtualHost

```bash sudo nano /etc/apache2/sites-available/phpapp.conf ```

```apache <VirtualHost *:80>

   ServerAdmin admin@phpapp.local
   ServerName phpapp.local
   DocumentRoot /var/www/phpapp
   ErrorLog ${APACHE_LOG_DIR}/phpapp_error.log
   CustomLog ${APACHE_LOG_DIR}/phpapp_access.log combined

</VirtualHost> ```

Aktifkan dan reload: ```bash sudo a2ensite phpapp sudo systemctl reload apache2 ```

Tambahkan ke `/etc/hosts`: ``` 127.0.0.1 phpapp.local ```

---

    1. 🐍 4. Men-deploy Aplikasi Flask (Apache + mod_wsgi)
      1. 4.1 Install Paket Python

```bash sudo apt install python3 python3-pip python3-venv libapache2-mod-wsgi-py3 -y ```

      1. 4.2 Buat Virtualenv dan Install Flask

```bash cd /var/www python3 -m venv flaskenv source flaskenv/bin/activate pip install flask ```

      1. 4.3 Struktur Project Flask

```bash mkdir -p /var/www/flaskapp cd /var/www/flaskapp ```

    • `app.py`**

```python from flask import Flask app = Flask(__name__)

@app.route("/") def hello():

   return "Halo dari Flask via Apache!"

```

    • `wsgi.py`**

```python from app import app as application ```

      1. 4.4 Konfigurasi Apache

```bash sudo nano /etc/apache2/sites-available/flaskapp.conf ```

```apache <VirtualHost *:80>

   ServerName flaskapp.local
   WSGIDaemonProcess flaskapp threads=5 python-home=/var/www/flaskenv
   WSGIScriptAlias / /var/www/flaskapp/wsgi.py
   <Directory /var/www/flaskapp>
       Require all granted
   </Directory>
   ErrorLog ${APACHE_LOG_DIR}/flask_error.log
   CustomLog ${APACHE_LOG_DIR}/flask_access.log combined

</VirtualHost> ```

Aktifkan: ```bash sudo a2ensite flaskapp sudo systemctl reload apache2 ```

Tambahkan ke `/etc/hosts`: ``` 127.0.0.1 flaskapp.local ```

---

    1. πŸ” 5. Tambahan: Konfigurasi HTTPS dengan Let's Encrypt
      1. 5.1 Install Certbot

```bash sudo apt install certbot python3-certbot-nginx python3-certbot-apache -y ```

      1. 5.2 Jalankan Konfigurasi SSL

```bash

  1. Untuk Apache:

sudo certbot --apache

  1. Untuk NGINX:

sudo certbot --nginx ```

---

    1. πŸ“¦ 6. Struktur Folder Rekomendasi Produksi

``` /var/www/

 β”œβ”€β”€ htmlapp/
 β”‚   └── index.html
 β”œβ”€β”€ phpapp/
 β”‚   └── index.php
 └── flaskapp/
     β”œβ”€β”€ app.py
     β”œβ”€β”€ wsgi.py
     └── static/

```

---

    1. πŸ“Œ Tugas Praktikum

> Kerjakan minimal dua dari tiga opsi di bawah ini dan tunjukkan hasilnya:

1. **Deploy aplikasi HTML statis menggunakan NGINX.** 2. **Deploy aplikasi PHP menggunakan Apache.** 3. **Deploy aplikasi Flask Python menggunakan Apache + mod_wsgi.**

    • Opsional (Bonus):**

- Konfigurasi domain lokal untuk semua aplikasi. - Tambahkan SSL menggunakan Let's Encrypt (jika server publik tersedia).

---

    1. πŸ“Ž Catatan

- Gunakan browser untuk mengakses: `http://htmlapp.local`, `http://phpapp.local`, atau `http://flaskapp.local` - Jika menggunakan cloud server, ganti `*.local` dengan domain / IP publik. - Gunakan `systemctl status` untuk debugging service.

---

Kalau kamu butuh versi **PDF**, **Markdown**, atau mau diubah jadi **slide presentasi** juga bisa. Tinggal bilang aja ya!