Ki jan yo pake VueJS + NodeJS + MongoDB aplikasyon nan Docker

Kòm ou ka konprann nan atik anvan an, mwen te travay sou diferan pwojè. Premye jou yo nan yon nouvo ekip anjeneral ale menm jan an: backender a chita avè m ', li fè aksyon majik enstale ak deplwaye aplikasyon an. Docker se endispansab pou devlopè front-end paske... Backend la souvan ekri nan yon pakèt pil PHP / Java / Python / C #, ak devan an pa oblije distrè backend la chak fwa enstale ak deplwaye tout bagay. Se sèlman nan yon sèl kote mwen te wè yon konbinezon Docker-Jenkins ak yon deplwaman transparan, mòso bwa, ak tès otomatik.

Anpil atik detaye yo te ekri sou Docker. Atik sa a pral pale sou deplwaye yon Aplikasyon Single Page lè l sèvi avèk VueJS/Vue Router, pati sèvè a se nan fòm lan nan yon API RESTful ak NodeJS, epi MongoDB yo itilize kòm yon baz done. Docker Compose yo itilize pou defini ak kouri plizyè aplikasyon veso.

Poukisa Docker nesesè

Docker pèmèt ou otomatize pwosesis deplwaye yon aplikasyon. Pwomotè a pa bezwen enstale pwogram poukont li oswa fè fas ak enkonpatibilite vèsyon sou machin li. Tout sa ou bezwen fè se enstale Docker epi tape 1-2 kòmandman nan konsole a. Fason ki pi pratik pou fè sa se sou Linux.

Pou kòmanse

Enstale Koupre ak Docker konpoze

Estrikti Katab

Nou kreye 2 dosye pou aplikasyon pou kliyan ak sèvè. Yon dosye ki gen ekstansyon .yml se yon konfigirasyon Docker Konpoze, kote resipyan aplikasyon yo defini ak asosye.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #здесь можно перезаписать CMD из Dockerfile в /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #здесь можно перезаписать CMD из Dockerfile в /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Nou kreye 3 sèvis nan Docker: pou NodeJS, MongoDB ak pou sèvis estatik nan Vue. Te ajoute pou konekte kliyan ak sèvè depann sou sèvè. Pou konekte MongoDB ak API sèvè a, sèvi ak lyen mongo. Sèvè, kliyan, mongo - non sèvis yo.

Kliyan VueJS

Nan katab la /kliyan Aplikasyon an baze sou VueJS. Aplikasyon an te kreye lè l sèvi avèk Vue Cli. Lè bati yon imaj, aplikasyon kliyan an bati nan yon seri fichye estatik nan katab la /dist. Dockerfile a dekri yon seri kòmandman pou bati yon imaj:

FROM node:10
WORKDIR /client
COPY ./package*.json ./
RUN npm install
RUN npm install -g http-server
COPY . .
RUN npm run build
EXPOSE 8081
CMD ["npm", "test:dev"]

Tanpri sonje ke package.json kopye epi enstale separeman ak rès fichye pwojè yo. Sa a se fè pou pèfòmans, se konsa ke sa ki nan / node_modules folder nan kachèt lè bati ankò. Chak liy lòd yo kache separeman.

Finalman, lè veso a kòmanse, lòd la egzekite npm run dev. Kòmand sa a dekri nan package.json:

"scripts": {
	 "test:dev": "http-server dist -p 8081 -c 1 --push-state"
}

Pou kouri dosye ki soti nan yon katab /dist, enstale globalman http-server, ak nan dev-depandans pake a spa-http-serverpou Vue Router travay kòrèkteman. Drapo a --push-state redireksyon nan index.html. Yo te ajoute drapo a -c ak yon valè 1 segonn http-sèvè pa t kache scripts. Sa a se yon egzanp tès; sou yon pwojè reyèl li pi bon pou itilize nginx.

Nan magazen Vuex nou kreye yon jaden apiHost: 'http://localhost:3000', kote pò NodeJS Api a anrejistre. Pati kliyan an pare. Koulye a, tout demann ki soti nan kliyan an ale nan url sa a.

API sèvè NodeJS

Nan katab la /server kreye server.js ak Dockerfile:

FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

В server.js endike url pou baz done const url = 'mongodb://mongo:27017/';. Pèmèt demann kwa-domèn nan men kliyan an:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors());
app.all('/*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', clientUrl);
  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
  next();
});
  app.get('/getProducts', cors(corsOptions), (req, res) => {
    products.getContent
      .then(data => res.json(data), err => res.json(err));
  });
  app.get('/getUsers', cors(corsOptions), (req, res) => {
    db.getUsers()
      .then(data => res.json(data), err => res.json(err));
  });

Konklizyon

Koulye a, ann ale nan anyè pwojè a epi kouri docker-compose build pou konstwi imaj ak docker-compose up pou kouri kontenè. Ekip la pral leve 3 veso: sèvè, kliyan, mongo. Pou yon sèvè NodeJS, ou ka konfigirasyon cho-rechaje lè w konekte li nan katab itilizatè a. Ak kliyan an sou devlopman yo ta dwe lanse lokalman ak rechaje cho, kouri separeman sèvè и Mongo. Pou kòmanse yon sèvis separe, jis presize non li docker-compose up client. Pa bliye fè li pafwa prune epi efase resipyan, rezo, ak imaj pou libere resous yo.

Ou ka wè kòd konplè a isit la. Pwojè a toujou sou devlopman.

Sous: www.habr.com