Dockerize NodeJS web app

Topic created ยท 3 Posts ยท 25 Views
  • Tujuan tutorial ini adalah untuk mengenalkan ke teman-teman yang ingin belajar meng-kontainerisasi kan sebuah aplikasi. Oh iya, tutorial ini juga ditujukan untuk penggunaan di mode development, bukan mode production.

    Syarat

    Untuk mengikuti tutorial ini, diharapkan teman-teman sudah menginstall Docker dan NodeJS dan sudah berjalan dengan baik (tidak ada error).

    Tutorial ini dibagi menjadi dua bagian besar, yaitu: pertama kita akan membuat aplikasi NodeJS sederhana yang hanya akan menampilkan response json tanpa koneksi database, yang kedua adalah bagian setup docker nya itu sendiri.

    Penjelasan Singkat

    Docker akan membungkus aplikasi NodeJS kita dan semua dependency aplikasi kita (misal: package npm, library lain seperti driver database) ke dalam sebuah box yang biasa disebut container.

    Untuk membuat sebuah container, kita membutuhkan sebuah image yang biasanya sebuah sistem operasi seperti Ubuntu, Alpine Linux yang nanti nya akan digunakan oleh aplikasi kita untuk "hidup" disana beserta semua dependency nya.

    Oh iya FYI, host (komputer kita/ komputer server) dapat menjalankan beberapa docker container.

    Btw, kita lanjut di post selanjutnya yah ๐Ÿ˜†

  • Membuat Aplikasi NodeJS

    Pertama-tama, rekan-rekan bisa buat folder dulu untuk project nya. Namanya bebas terserah temen-temen. Kalo aku buat namanya: content_service ceritanya ini salah satu service dari banyak microservice di app kita. Dan setelah buat folder nya, lgsung masuk ke dalam folder dan jalankan perintah npm init

    $ mkdir content_service
    $ cd content_service
    $ npm init -y
    

    Setelah menjalankan ketiga perintah diatas harusnya akan muncul output seperti ini:

    Wrote to /Users/putualfredcrosby/osby/content_service/package.json:
    
    {
      "name": "content_service",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    

    Install package yang kita perlukan

    Kalo sudah muncul output tadi, sekarang kita install package yang kita butuhkan. Kita akan pakai microframework yang namanya sudah tidak async lagi di telinga kita. Yuppp Express JS. Langsung install aja:

    $ npm i -S express
    

    Akan muncul output seperti ini:

     ~/osby/content_service ๎‚ฐ npm i -S express
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN [email protected] No description
    npm WARN [email protected] No repository field.
    
    + [email protected]
    added 50 packages from 37 contributors and audited 126 packages in 3.49s
    found 0 vulnerabilities
    

    Mulai Koding, Yaay! ๐ŸŽ‰

    Sekarang saat nya kita mulai buat aplikasi kita ๐ŸŽ‰ Buat file baru namanya index.js dan temen-temen bisa copas code ini ke file index.js yg kalian barusan buat.

    const express = require('express');
    
    const app = express();
    
    app.get('/', (req, res) => {
      res.send({ message: 'Hello BaliJS' });
    });
    
    const PORT = 8080;
    const HOST = '0.0.0.0';
    
    app.listen(PORT, HOST, () => {
      console.log(`Running on http://${HOST}:${PORT}`);
    });
    

    Apa aja yang kita lakukan diatas?

    • Line 1: Import library yg kita butuhkan, yaitu express
    • Line 3: Instantiating express. Bahasa sehari-harinya, kita panggil fungsi express js dengan cara express()
    • Line 5-7: Buat routing dengan path /, teman-teman bisa coba ganti dengan yang lain seperti /home, /login
    • Line 9-10: Kalian pasti paham
    • Line 12-14: Menjalankan server express pada host dan port yang sudah didefinisikan diatas.

    Selanjutnya

    Kalian bisa coba langsung jalankan app-nya dengan perintah: node index.js, tapi ada cara yang lebih elegan. Kita ubah dulu ya file package.json kita di bagian scripts: jadi seperti di bawah ini.

    {
      "name": "content_service",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node index.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "express": "^4.17.1"
      }
    }
    

    Perhatikan line 8, disana kita menambahkan satu command baru pada file package.json kita.
    Yuk, sekarang coba kita jalankan app kita, caranya -> npm start.

    $ npm start
    

    Kemudian harusnya muncul output seperti ini:

    $ npm start
    
    > [email protected] start /Users/putualfredcrosby/osby/content_service
    > node index.js
    
    Running on http://0.0.0.0:8080
    

    Kemudian coba buka browser dan akses alamat app kalian di http://localhost:8080.

    Tadaaa ๐ŸŽ‰
    Screen Shot 2020-03-28 at 15.21.19.png

    Setup docker kita lanjut di post selanjutnya ๐Ÿ˜†

  • Setup Dockerfile

    Buka text editor dan buat file baru bernama Dockerfile. Lalu kalian bisa copas semua kode di bawah ini ke file Dockerfile kalian.

    FROM node:10
    
    WORKDIR /usr/src/app
    
    COPY package*.json ./
    
    RUN npm install
    
    COPY . .
    
    EXPOSE 8080
    CMD [ "npm", "start" ]
    

    Apa yang kita lakukan diatas?

    • Line 1: Kita menggunakan image docker yang sudah terinstall node. Apa spesifikasi image node:10 ini? Kalian bisa cek ke repo docker nya disini pada section Image Variants (biasanya menggunakan os debian, kecuali kita spesifikasikan sendiri menggunakan os lain seperti Alpine Linux)
    • Line 3: Membuat working directory untuk app kita
    • Line 5: Copy package.json dan package-lock.json untuk diinstal terlebih dahulu. Kenapa tidak copy semua file aja dulu baru kemudian diinstall? Karena kita akan memanfaatkan build cache dari docker ketika kita membangun docker-image kita. Kita asumsikan file aplikasi kita (index.js dan mungkin nanti akan ada banyak file lainnya) akan selalu berubah, namun package tidak selalu berubah a.k.a lebih jarang berubahnya. Jadi ketika kita pisah, kita tidak perlu menunggu proses npm install yang memakan waktu, dan bisa gunakan build cache barusan.
    • Line 9: Copy file dari folder content_service ke dalam WORKDIR yang sudah tadi kita buat di dalam Docker image.
    • Line 11: Expose port yang kita gunakan pada aplikasi kita yaitu 8080
    • Line 12: Jalankan aplikasi

    Build image docker

    Sekarang kita bungkus aplikasi kita dengan perintah:

    $ docker build -t <username_dockerhub>/conten_service:v1.0.0 .
    

    jangan lupa di ujung command line diatas ada . itu menunjukan konteks folder mana yang akan kita build image nya.
    Oh iya buat yang bingung nyari username dockerhub dimana, teman-teman bisa login dulu di website docker

    Contoh perintah yang aku jalanin di komputerku:

    $ docker build -t alfredcrosby/content_service:v1.0.0 .
    

    Menghasilkan output seperti ini:

    Sending build context to Docker daemon  2.005MB
    Step 1/7 : FROM node:10
    10: Pulling from library/node
    c0c53f743a40: Pull complete
    66997431d390: Pull complete
    0ea865e2909f: Pull complete
    584bf23912b7: Pull complete
    3c4c73959f29: Pull complete
    63e05266fc4b: Pull complete
    1f4961ce4444: Pull complete
    6b0e52f69879: Pull complete
    3ed75ed173e8: Pull complete
    Digest: sha256:df200903ff34c07c1b9112b4fd9d1342c11eb7d99525f2b366c487f91dda8131
    Status: Downloaded newer image for node:10
     ---> aa6432763c11
    Step 2/7 : WORKDIR /usr/src/app
     ---> Running in 6ccfcfbf8f31
    Removing intermediate container 6ccfcfbf8f31
     ---> bf8a522f5fde
    Step 3/7 : COPY package*.json ./
     ---> 902f7a35ec7e
    Step 4/7 : RUN npm install
     ---> Running in 456895d69a75
    npm WARN [email protected] No description
    npm WARN [email protected] No repository field.
    
    added 50 packages from 37 contributors and audited 126 packages in 1.872s
    found 0 vulnerabilities
    
    Removing intermediate container 456895d69a75
     ---> 375a14d77c73
    Step 5/7 : COPY . .
     ---> 3e4826b88886
    Step 6/7 : EXPOSE 8080
     ---> Running in e408044836ae
    Removing intermediate container e408044836ae
     ---> ef9ce8c0570f
    Step 7/7 : CMD [ "npm", "start" ]
     ---> Running in 148a0c6865f3
    Removing intermediate container 148a0c6865f3
     ---> f75bb63355bf
    Successfully built f75bb63355bf
    Successfully tagged alfredcrosby/content_service:v1.0.0
    

    Jalankan aplikasi

    Yuk kita tes jalankan aplikasi kita dengan menjalankan perintah:

    $ docker run -p <port pilihanmu>:8080 -d <username_dockerhub>/content_service:v1.0.0
    

    Kalo di komputerku aku coba map dari port 8080 ke 5000 setelah dijalankan, akan muncul output seperti ini:

    $ docker run -p 5000:8080 -d alfredcrosby/content_service:v1.0.0
    0c906a20ee298ac053cd56bc067ffaffdd82201985c5ff529f0c476a397e6a30
    

    Cek aplikasi udah jalan atau belum?

    Bisa pakai command $ docker ps

    Output nya di komputer ku seperti ini:

    $ docker ps
    CONTAINER ID        IMAGE                                 COMMAND                  CREATED              STATUS              PORTS                    NAMES
    0c906a20ee29        alfredcrosby/content_service:v1.0.0   "docker-entrypoint.sโ€ฆ"   About a minute ago   Up About a minute   0.0.0.0:5000->8080/tcp   compassionate_snyder
    

    Untuk mastiin udah jalan

    Coba aja temen-temen buka http://localhost:<port yang kalian pilih> dan aplikasi kita akan tampil seperti sebelumnya ๐ŸŽ‰

    Screen Shot 2020-03-28 at 15.47.12.png

    Untuk stop proses docker tadi gimana?

    Kalian bisa jalankan perintah ini $ docker stop <container_id>.
    Darimana dapat CONTAINER ID? dengan melihat output dari $ docker ps

    Selamat!!! Aplikasi Docker kalian sudah berhasil. Sisanya tinggal bagaimana cara deploy ke server production menggunakan docker.


    Kalo berhasil atau menemukan error ketika mencoba tutorial ini, langsung aja post di thread ini ya manteman ๐Ÿ™

Log in to reply
 

Pengumuman!

Untuk yang baru join, jangan lupa perkenalkan dirimu disini ya

Juga jangan lupa baca ketentuan penggunaan di forum ini. Rekan-rekan bisa lihat disini.

Buat yang penasaran alasan dibuatnya forum BaliJS ini silakan baca disini.

Utas Populer Bulan Ini

Semeton Online

Forum Stats

0
Online

123
Users

91
Topics

453
Posts