Dockerize aplikasi monolitik

Baru-baru ini, saya ingin mengimplementasikan buruh pelabuhan untuk sebuah aplikasi, yang saya kembangkan menggunakan Node.js dan Angular. Tapi tangkapannya di sini adalah, frontend dan backend berada di folder yang sama. Tentu saja, akan lebih mudah untuk membaginya dalam repositori terpisah dan kemudian membuat docker masing-masing. Tetapi saya memutuskan untuk tidak mengubah strukturnya karena aplikasi itu sendiri adalah aplikasi yang sangat mendasar — ​​dengan fungsi yang terbatas dan saya tidak ingin memelihara dua repositori yang berbeda dan menghostingnya di server yang berbeda. Anda mungkin juga mengalami masalah seperti itu terutama saat bekerja dengan aplikasi monolitik lawas. Jadi, mari kita coba mengimplementasikan buruh pelabuhan bersama!

PRASYARAT

1. Node.js dan NPM—https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. Postgresql —https://www.postgresql.org/download
3. Docker —https://docs.docker.com/get-docker

PORT=3000
ENV=development
URL=http://api.jsoneditoronline.org/v1/docs/088b6155ffc749e9a8ace0721f2cc384/data
SESSION_SECRET=psyduck
DB_USER=postgres
DB_PASSWORD=root

Ikuti perintah ini untuk menjalankan proyek di sistem Anda —

npm install
npm run migrate
npm start

Buka localhost:3000di browser Anda untuk melihat proyek aktif dan berjalan.

Catatan: Jika Anda ingin melihat perubahan langsung untuk frontend, jalankan perintah npm run servedi terminal terpisah dan buka file localhost:4200.

Menambahkan buruh pelabuhan ke aplikasi

Catatan: Untuk menambahkan buruh pelabuhan, pastikan bahwa buruh pelabuhan sudah terpasang di sistem Anda. Jika tidak, ikuti tautan ini untuk menginstalnya.

Tambahkan Dockerfileke direktori root proyek. Ini berisi semua perintah yang akan dipanggil pada baris perintah untuk merakit gambar.

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD [ "npm", "run", "start" ]
EXPOSE 3000

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 4200
CMD [ "npm", "run", "serve" ]

services:
  server:
    build:
      context: ./
      dockerfile: Dockerfileserver
    volumes:
      - .:/app
      - /app/node_modules
    restart: always
    ports:
      - "3000:3000"
    depends_on:
      - client
  client:
    build:
      context: ./
      dockerfile: Dockerfileclient
    volumes:
      - .:/app
      - /app/node_modules
    restart: always
    ports:
      - "4200:4200"

Catatan: Pastikan untuk menjalankan docker desktop sebelum menjalankan perintah ini.

docker-compose build
docker-compose up

Sebelum buruh pelabuhan, frontend dan backend aplikasi berjalan di port yang berbeda — 4200dan 3000masing-masing. Tapi bagaimana mereka berkomunikasi satu sama lain? Jawabannya terletak pada file — proxy.conf.json. Ini memberi tahu frontend bahwa semua permintaan api ke server harus diproksikan ke localhost:3000.

{
    "/api": {
      "target": "http://localhost:3000/",
      "secure": false
    }
}

{
    "/api": {
      "target": "http://server:3000/",
      "secure": false
    }
}

Ada satu masalah di sini — jika kami melakukan perubahan apa pun pada frontend, hal itu tercermin dalam aplikasi saat memuat ulang. Tetapi perubahan di server memerlukan aplikasi dimulai ulang. Untuk mengatasinya, mari gunakan nodemon.

Instal perpustakaan menggunakan — npm install nodemon. Sekarang, tambahkan skrip package.jsonuntuk memulai aplikasi menggunakan nodemon —

"dev": "nodemon --ignore 'dist/*' server.js"

Untuk menghentikan wadah buruh pelabuhan, gunakan perintah docker-compose down.

Di bagian selanjutnya dari blog ini, kita akan membahas tentang cara menambahkan database ke aplikasi ini dan membuatnya berfungsi dengan buruh pelabuhan! Bagian 2 segera hadir!

Saya harap Anda menemukan posting ini bermanfaat dan tolong beri tahu saya jika ada pertanyaan atau pertanyaan. Tinggalkan komentar di sini dan saya pasti akan membalas!