Penulis artikel yang kami terjemahkan hari ini ingin berbicara tentang cara mengemas aplikasi web berbasis React, Express, dan MongoDB ke dalam wadah Docker. Di sini kita akan mempertimbangkan fitur pembentukan struktur file dan folder proyek semacam itu, membuat file, Dockerfiledan menggunakan teknologi Docker Compose.
Awal pekerjaan
Demi kesederhanaan, saya berasumsi bahwa Anda sudah memiliki aplikasi yang berfungsi, disajikan oleh bagian klien dan server, yang terhubung ke database.Cara terbaik adalah jika kode klien dan server berada di folder yang sama. Kode dapat ditemukan dalam satu repositori, tetapi dapat disimpan dalam repositori yang berbeda. Dalam hal ini, proyek harus digabungkan dalam satu folder menggunakan perintah git submodule. Saya melakukan hal itu.Tree File Repositori IndukBereaksi Aplikasi
Di sini saya menggunakan proyek yang dibuat menggunakan Create React App dan dikonfigurasi untuk mendukung TypeScript. Ini adalah blog sederhana yang berisi beberapa elemen visual.Pertama, buat file Dockerfiledi direktori root client. Untuk melakukan ini, jalankan perintah berikut:$ touch Dockerfile
Buka file dan masukkan perintah di bawah ini. Seperti yang telah disebutkan, saya gunakan dalam aplikasi TypeScript saya, jadi saya harus membangunnya terlebih dahulu. Maka Anda perlu mengambil apa yang terjadi dan menyebarkan semuanya dalam format sumber daya statis. Untuk mencapai ini, saya menggunakan proses dua langkah membangun gambar Docker.Langkah pertama adalah menggunakan Node.js untuk membangun aplikasi. Saya menggunakan, sebagai gambar dasar, gambar Alpine. Ini adalah gambar yang sangat ringkas, yang secara menguntungkan akan mempengaruhi ukuran wadah.FROM node:12-alpine as builder
WORKDIR /app
COPY package.json /app/package.json
RUN npm install --only=prod
COPY . /app
RUN npm run build
Jadi, mulailah milik kita Dockerfile. Pertama datang tim node:12-alpine as builder. Lalu kami mengatur direktori kerja - dalam kasus kami, ini /app. Karena ini, folder baru akan dibuat dalam wadah. Dalam folder wadah ini, salin package.jsondan instal dependensi. Kemudian /appkita salin semuanya dari folder /services/client. Pekerjaan diselesaikan oleh perakitan proyek.Sekarang Anda perlu mengatur hosting untuk majelis yang baru dibuat. Untuk melakukan ini, gunakan NGINX. Dan, sekali lagi, ini akan menjadi versi Alpine dari sistem. Kami melakukan ini, seperti sebelumnya, untuk menghemat ruang.FROM nginx:1.16.0-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Di sini, nginxhasil perakitan proyek yang diperoleh pada langkah sebelumnya disalin ke folder . Lalu buka porta 80. Di port inilah kontainer akan menunggu koneksi. Baris terakhir file digunakan untuk memulai NGINX.Ini semua yang diperlukan untuk merapat bagian klien dari aplikasi. Hasilnya Dockerfileakan terlihat seperti ini:FROM node:12-alpine as build
WORKDIR /app
COPY package.json /app/package.json
RUN npm install --only=prod
COPY . /app
RUN npm run build
FROM nginx:1.16.0-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Express API
API Express kami juga cukup sederhana. Di sini, untuk mengatur titik akhir, teknologi RESTful digunakan. Titik akhir digunakan untuk membuat publikasi, untuk mendukung otorisasi, dan untuk menyelesaikan masalah lainnya. Mari kita mulai dengan membuat Dockerfiledi direktori root api. Kami akan bertindak seperti sebelumnya.Selama pengembangan sisi server aplikasi, saya menggunakan kemampuan ES6. Karena itu, untuk menjalankan kode, saya perlu mengkompilasinya. Saya memutuskan untuk memproses kode menggunakan Babel. Seperti yang sudah Anda duga, di sini sekali lagi proses perakitan multi-tahap akan digunakan.FROM node:12-alpine as builder
WORKDIR /app
COPY package.json /app/package.json
RUN apk --no-cache add --virtual builds-deps build-base python
RUN npm install
COPY . /app
RUN npm run build
Semuanya di sini sangat mirip dengan yang Dockerfilekami gunakan untuk bagian klien dari proyek, jadi kami tidak akan masuk ke rincian. Namun, ada satu fitur:RUN apk --no-cache add --virtual builds-deps build-base python
Sebelum menyimpan kata sandi dalam database, saya hash menggunakan bcrypt . Ini adalah paket yang sangat populer, tetapi ada beberapa masalah dengan menggunakannya dalam gambar berbasis Alpine. Di sini Anda mungkin menemukan sesuatu seperti pesan kesalahan berikut:node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@12.16.1 (node-v72 ABI, musl) (falling back to source compile with node-gyp)
npm ERR! Failed at the bcrypt@3.0.8 install script.
Ini adalah masalah yang dikenal luas. Solusinya adalah menginstal paket tambahan dan Python sebelum menginstal paket npm.Langkah selanjutnya dalam membangun gambar, seperti dalam kasus klien, adalah mengambil apa yang dibentuk pada langkah sebelumnya dan menjalankannya menggunakan Node.js.FROM node:12-alpine
WORKDIR /app
COPY --from=builder /app/dist /app
COPY package.json /app/package.json
RUN apk --no-cache add --virtual builds-deps build-base python
RUN npm install --only=prod
EXPOSE 8080
USER node
CMD ["node", "index.js"]
Ada fitur lain di sini, yang terdiri dari hanya menginstal paket-paket yang dirancang untuk proyek untuk bekerja dalam produksi. Kami tidak lagi membutuhkan Babel - lagipula, semuanya sudah dikompilasi di langkah pertama majelis. Selanjutnya, kita buka port 8080di mana sisi server aplikasi akan menunggu permintaan tiba, dan menjalankan Node.js.Berikut ringkasannya Dockerfile:FROM node:12-alpine as builder
WORKDIR /app
COPY package.json /app/package.json
RUN apk --no-cache add --virtual builds-deps build-base python
RUN npm install
COPY . /app
RUN npm run build
FROM node:12-alpine
WORKDIR /app
COPY --from=builder /app/dist /app
COPY package.json /app/package.json
RUN apk --no-cache add --virtual builds-deps build-base python
RUN npm install --only=prod
EXPOSE 8080
USER node
CMD ["node", "index.js"]
Menulis Docker
Fase terakhir dari pekerjaan kami adalah membawa wadah apidan clientwadah berisi MongoDB. Untuk melakukan ini, kita akan menggunakan file yang docker-compose.ymlterletak di direktori root dari repositori induk. Ini dilakukan karena fakta bahwa dari tempat ini ada akses ke file Dockerfileuntuk bagian klien dan server proyek.Buat file docker-compose.yml:$ touch docker-compose.yml
Struktur file proyek sekarang akan terlihat seperti di bawah ini.Struktur akhir dari file proyekSekarang kita akan menambahdocker-compose.ymlperintah berikut:version: "3"
services:
api:
build: ./services/api
ports:
- "8080:8080"
depends_on:
- db
container_name: blog-api
client:
build: ./services/client
ports:
- "80:80"
container_name: blog-client
db:
image: mongo
ports:
- "27017:27017"
container_name: blog-db
Semuanya diatur dengan sangat sederhana. Kami memiliki tiga layanan: client, apidan db. Tidak ada pilihan untuk MongoDB Dockerfile- Docker akan mengunduh gambar yang sesuai dari hubnya dan membuat wadah dari sana. Ini berarti bahwa basis data kami akan kosong, tetapi sebagai permulaan, ini cocok untuk kami.Di bagian apidan clientada kunci buildyang nilainya berisi path ke file dari Dockerfilelayanan yang sesuai (ke direktori root apidan client). Port kontainer yang ditugaskan dalam file Dockerfileakan terbuka di jaringan Docker Compose-host. Ini akan memungkinkan aplikasi untuk berinteraksi. Saat mengkonfigurasi layanan api, selain itu, kuncinya digunakandepends_on. Dia memberi tahu Docker bahwa sebelum memulai layanan ini, Anda harus menunggu sampai wadah mulai sepenuhnya db. Berkat ini, kami dapat mencegah kesalahan dalam wadah api.Dan - inilah hal kecil lain yang terkait dengan MongoDB. Di basis kode backend, Anda perlu memperbarui string koneksi database. Biasanya ini menunjukkan localhost:mongodb://localhost:27017/blog
Tapi, menggunakan teknologi Docker Compose, kita harus mengarahkannya ke nama wadah:mongodb://blog-db:27017/blog
Langkah terakhir dari pekerjaan kami adalah memulai semua ini dengan menjalankan docker-compose.ymlperintah berikut di folder root proyek (di mana file tersebut berada ):$ docker-compose up
Ringkasan
Kami melihat teknik sederhana untuk menyimpan aplikasi berdasarkan React, Node.js, dan MongoDB. Kami percaya bahwa jika Anda membutuhkannya, Anda dapat dengan mudah menyesuaikannya untuk proyek Anda.PS Kami meluncurkan pasar di situs web RUVDS. Gambar Docker di sana diinstal dalam satu klik. Anda dapat memeriksa pengoperasian wadah di VPS . Pelanggan baru diberikan 3 hari gratis untuk tes.Pembaca yang budiman! Apakah Anda menggunakan Docker Compose?