Deploy Aplikasi Django pada Heroku

Heroku

Hari ini, kita akan belajar men-deploy aplikasi Django pada Heroku. Sebenarnya cara deploy-nya mudah, tapi terkadang yang mudah pun bisa terasa sulit. Apalagi kalau kita belum punya pengalaman melakukan hal ini. Tools (framework atau library) yang kita gunakan :
  1. django v1.8 
  2. Bootstrap v4.0
  3. dj-database-url v0.4.2
  4. gunicorn v19.7.1 
  5. whitenoise v3.3.1
  6. psycopg2 v2.7.3

Membuat Projek Django

Pastikan kamu sudah membuat sebuah projek Django dan 1 aplikasi di dalamnya. Jangan lupa mengaktifkan virtual environment projek mu. Jika kamu belum punya Projek Django atau ingin mengikuti tutorial ini sejak awal, kamu bisa mengikuti langkah-langkah berikut ini :
  • Buat suatu folder dengan nama LearnDjangoHeroku
  • Pada folder tersebut, buat suatu virtual environment
    virtualenv env
  • Aktifkan virtual environment
    Tulis LearnDjangoHeroku>env\Scripts\activate dan Enter (Windows)
    Tulis $ LearnDjangoHeroku source env/bin/activate dan Enter (Linux dan OSX)
  • Buat file requirements.txt pada root folder (LearnDjangoHeroku)
  • Isi file requirements.txt dengan daftar packages di bawah ini
    django==1.8
    dj-database-url==0.4.2
    gunicorn==19.7.1
    whitenoise==3.3.1
    psycopg2==2.7.3
  • Install tools di atas
    pip install -r requirements.txt
  • Buat sebuah projek Django dengan nama app
    django-admin startproject app
  • Buat suatu aplikasi dengan nama jual di dalam folder app
    python app/manage.py startapp jual
  • Edit app/settings.py dengan menambahkan aplikasi jual
    INSTALLED_APPS = (
           ...
           jual,
    )
  • Tambahkan source code berikut pada urls.py
    url(r'', include('jual.urls')),
  • Kemudian buatlah file urls.py di dalam folder jual. Isikan kode berikut
    from django.conf.urls import include, url
    from . import views

    urlpatterns = [
        url(r'^$', views.index, name='home'),
    ]
  • Tambahkan source code berikut pada views.py
    from django.shortcuts import render

    def index(request):
         render(request, 'jual/index.html', {})
  • Buat sebuah folder pada aplikasi jual dengan nama templates. Pada folder templates yang baru kamu buat, buat lagi sebuah folder dengan nama jual
  • Pada folder jual, buatlah sebuah file dengan nama index.html dan tambahkan source code berikut. 

  • Selanjutnya, buatlah sebuah folder dengan nama static di dalam aplikasi jual. Pada folder static yang baru kamu buat, buat lagi sebuah folder dengan nama jual
  • Pada folder jual, tambahkan file Bootstrap v4. Kamu bisa download Bootstrap di sini.
  • Pada CMD / terminal, lakukan migrasi pada projek Django.
    LearnDjangoHeroku>python app\manage.py migrate (Windows)
    $ LearnDjangoHeroku python app/manage.py migrate (Linux dan OSX)
  • Jalankan aplikasi Django dengan perintah berikut
    LearnDjangoHeroku>python app\manage.py runserver (Windows)
    $ LearnDjangoHeroku python app/manage.py runserver (Linux dan OSX)
  • Buka link http://127.0.0.1:8000/ . Lihat hasilnya akan seperti gambar di bawah ini. 
Gambar Aplikasi Django Setelah dijalankan di Lokal

Deployment   

Setelah projek Django sudah selesai dikerjakan, saatnya kita ke proses deploy. Berikut merupakan hal-hal yang harus kamu persiapkan : 
  1. Akun Gratis Heroku. Daftar di sini.
  2. Heroku CLI. Download di sini.
  3. Akun Github. Daftar di sini
  4. Git. Download di sini
Selain hal-hal di atas, kamu juga perlu mempersiapkan dua settings untuk environment production dan development / lokal. Mari kita buat folder settings dalam folder apps. Pada folder settings tersebut, buatlah 3 file, yaitu : base.py, dev.py, dan prod.py .

base.py

dev.py

prod.py


Jangan lupa hapus file settings.py pada folder app. File tersebut sudah kita ganti dengan 3 file di atas (base, dev, dan prod). Sebelum kita deploy, mari buat sebuah repositori baru di Github. Namanya adalah LearnDjangoHeroku. Klon direktori tersebut ke folder yang berbeda dengan projek kita. Kenapa ? Karena namanya sama, takut bertabrakan dan nge-replace projek kita. Copy semua file pada projek kita ke folder Github yang barusan kita kloning.

Selanjutnya upload (direktori kloning) ke Github dengan cara :
  • Buka CMD / terminal 
  • Pergi ke folder projek baru kita / LearnDjangoHeroku
  • Tuliskan python manage.py migrate --settings=app.settings.dev dan Enter
  • Tuliskan python manage.py collectstatic --noinput --settings=app.settings.dev dan Enter
  • Tuliskan git add . dan Enter
  • Tuliskan git commit -m "add all files" dan Enter
  • Tuliskan git push origin master
Setelah sukses push atau upload kode ke Github, saatnya kita mempersiapkan file tambahan atau setting untuk deployment. File yang dibutuhkan untuk deploy adalah Procfile, runtime.txt, dan requirements.txt. Dikarenakan requirements.txt sudah ada, mari buat file Procfile dan runtime.txt pada root folder projek. Berikut source code dari isi file-file tersebut :

  1. Procfile
    web: gunicorn app.wsgi 
  2. runtime.txt
    python-2.7.14
Konfigurasi terakhir adalah mengubah isi file manage.py dan  wsgi.py (dalam folder app).  Pada manage.py dan wsgi.py, ubah kode Setting Modul Django menjadi :

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "app.settings.prod")

Kita sudah siap untuk deploy. Silahkan ikuti langkah-langkah berikut ini :
  1. Buka CMD / terminal
  2. Pergi ke folder projek kita 
  3. Tuliskan heroku login dan Enter
  4. Isikan email dan password akun Heroku dan Enter
  5. Tuliskan heroku create <nama-aplikasi-bebas> dan Enter
  6. Tuliskan git push heroku master dan Enter
  7. Tuliskan heroku run python manage.py migrate dan Enter
  8. Buka web kita dengan heroku open 
Akhirnya selesai sudah. Horeee .. kita sudah berhasil deploy aplikasi Django ke Heroku. Begini tampilan aplikasi kita setelah di deploy :

Gambar Contoh Aplikasi Django Setelah di-deploy pada Heroku

Jika kamu merasa tutorial ini bermanfaat, ayo share ke teman-teman mu. Terimakasih sudah mau mampir di mari. Semoga ilmunya berkah ya. 

Comments

Post a Comment

Popular posts from this blog

11 Perintah Penting PSQL (CMD PostgreSQL)

Cara Menginstall Beberapa NodeJs dengan NVM

Tutorial Lifecycle Component Pada React Yang Mudah Dipahami [Sharing]