ഡോക്കറിൽ VueJS + NodeJS + MongoDB ആപ്ലിക്കേഷൻ എങ്ങനെ പാക്കേജ് ചെയ്യാം

മുമ്പത്തെ ലേഖനത്തിൽ നിന്ന് നിങ്ങൾക്ക് മനസ്സിലാക്കാൻ കഴിയുന്നതുപോലെ, ഞാൻ വ്യത്യസ്ത പ്രോജക്റ്റുകളിൽ പ്രവർത്തിച്ചു. ഒരു പുതിയ ടീമിലെ ആദ്യ ദിവസങ്ങൾ സാധാരണയായി ഇതേ രീതിയിൽ തന്നെ പോകുന്നു: ബാക്കൻഡർ എന്നോടൊപ്പം ഇരുന്നു, ആപ്ലിക്കേഷൻ ഇൻസ്റ്റാൾ ചെയ്യാനും വിന്യസിക്കാനും മാന്ത്രിക പ്രവർത്തനങ്ങൾ നടത്തുന്നു. ഫ്രണ്ട് എൻഡ് ഡെവലപ്പർമാർക്ക് ഡോക്കർ ഒഴിച്ചുകൂടാനാവാത്തതാണ് കാരണം... ബാക്കെൻഡ് പലപ്പോഴും PHP/Java/Python/C# സ്റ്റാക്കുകളുടെ വിശാലമായ ശ്രേണിയിൽ എഴുതിയിരിക്കുന്നു, കൂടാതെ എല്ലാം ഇൻസ്റ്റാൾ ചെയ്യാനും വിന്യസിക്കാനും ഫ്രണ്ട് ഓരോ തവണയും ബാക്കെൻഡിന്റെ ശ്രദ്ധ തിരിക്കേണ്ടതില്ല. സുതാര്യമായ വിന്യാസം, ലോഗുകൾ, ഓട്ടോമേറ്റഡ് ടെസ്റ്റുകൾ എന്നിവയുള്ള ഡോക്കർ-ജെങ്കിൻസ് കോമ്പിനേഷൻ ഒരിടത്ത് മാത്രമാണ് ഞാൻ കണ്ടത്.

ഡോക്കറിനെക്കുറിച്ച് വിശദമായ നിരവധി ലേഖനങ്ങൾ എഴുതിയിട്ടുണ്ട്. ഈ ലേഖനം VueJS/Vue റൂട്ടർ ഉപയോഗിച്ച് ഒരു സിംഗിൾ പേജ് ആപ്ലിക്കേഷൻ വിന്യസിക്കുന്നതിനെക്കുറിച്ച് സംസാരിക്കും, സെർവർ ഭാഗം NodeJS ഉള്ള ഒരു RESTful API രൂപത്തിലാണ്, കൂടാതെ MongoDB ഒരു ഡാറ്റാബേസായി ഉപയോഗിക്കുന്നു. ഒന്നിലധികം കണ്ടെയ്‌നർ ആപ്ലിക്കേഷനുകൾ നിർവചിക്കാനും പ്രവർത്തിപ്പിക്കാനും ഡോക്കർ കമ്പോസ് ഉപയോഗിക്കുന്നു.

എന്തുകൊണ്ട് ഡോക്കർ ആവശ്യമാണ്

ഒരു ആപ്ലിക്കേഷൻ വിന്യസിക്കുന്ന പ്രക്രിയ ഓട്ടോമേറ്റ് ചെയ്യാൻ ഡോക്കർ നിങ്ങളെ അനുവദിക്കുന്നു. ഡവലപ്പർക്ക് ഇനി സ്വന്തമായി പ്രോഗ്രാമുകൾ ഇൻസ്റ്റാൾ ചെയ്യേണ്ടതില്ല അല്ലെങ്കിൽ അവന്റെ മെഷീനിലെ പതിപ്പ് പൊരുത്തക്കേട് കൈകാര്യം ചെയ്യേണ്ടതില്ല. നിങ്ങൾ ചെയ്യേണ്ടത് ഡോക്കർ ഇൻസ്റ്റാൾ ചെയ്ത് കൺസോളിൽ 1-2 കമാൻഡുകൾ ടൈപ്പ് ചെയ്യുക. ഇതിനുള്ള ഏറ്റവും സൗകര്യപ്രദമായ മാർഗം ലിനക്സിലാണ്.

ആമുഖം

ഇൻസ്റ്റാൾ ചെയ്യുക ഡോക്കർ ഒപ്പം ഡോക്കർ രചിക്കുന്നു

ഫോൾഡർ ഘടന

ക്ലയന്റ്, സെർവർ ആപ്ലിക്കേഷനുകൾക്കായി ഞങ്ങൾ 2 ഫോൾഡറുകൾ സൃഷ്ടിക്കുന്നു. .yml വിപുലീകരണമുള്ള ഒരു ഫയൽ ഒരു കോൺഫിഗറാണ് ഡോക്കർ രചിക്കുക, ആപ്ലിക്കേഷൻ കണ്ടെയ്‌നറുകൾ നിർവചിക്കുകയും ബന്ധപ്പെടുത്തുകയും ചെയ്യുന്നിടത്ത്.
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

ഞങ്ങൾ ഡോക്കറിൽ 3 സേവനങ്ങൾ സൃഷ്ടിക്കുന്നു: NodeJS, MongoDB, Vue-യിലെ സ്റ്റാറ്റിക് സേവനങ്ങൾ എന്നിവയ്ക്കായി. ക്ലയന്റ് സെർവറുമായി ബന്ധിപ്പിക്കാൻ ചേർത്തു സെർവറിനെ ആശ്രയിച്ചിരിക്കുന്നു. മോംഗോഡിബിയെ സെർവർ എപിഐയുമായി ലിങ്ക് ചെയ്യാൻ, ഉപയോഗിക്കുക ലിങ്കുകൾ മോംഗോ. സെർവർ, ക്ലയന്റ്, മോംഗോ - സേവനങ്ങളുടെ പേരുകൾ.

VueJS ക്ലയന്റ്

ഫോൾഡറിൽ /കക്ഷി ആപ്ലിക്കേഷൻ VueJS അടിസ്ഥാനമാക്കിയുള്ളതാണ്. ഉപയോഗിച്ചാണ് ആപ്ലിക്കേഷൻ സൃഷ്ടിച്ചത് വ്യൂ ക്ലി. ഒരു ഇമേജ് നിർമ്മിക്കുമ്പോൾ, ക്ലയന്റ് ആപ്ലിക്കേഷൻ ഫോൾഡറിലെ ഒരു കൂട്ടം സ്റ്റാറ്റിക് ഫയലുകളിലേക്കാണ് നിർമ്മിച്ചിരിക്കുന്നത് / dist. ഒരു ഇമേജ് നിർമ്മിക്കുന്നതിനുള്ള ഒരു കൂട്ടം കമാൻഡുകൾ ഡോക്കർഫിൽ വിവരിക്കുന്നു:

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"]

പാക്കേജ്.json മറ്റ് പ്രോജക്‌റ്റ് ഫയലുകളിൽ നിന്ന് പ്രത്യേകം പകർത്തി ഇൻസ്റ്റാൾ ചെയ്‌തിരിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക. ഇത് പെർഫോമൻസിനായി ചെയ്യുന്നതിനാൽ, വീണ്ടും നിർമ്മിക്കുമ്പോൾ /node_modules ഫോൾഡറിലെ ഉള്ളടക്കങ്ങൾ കാഷെ ചെയ്യപ്പെടും. ഓരോ കമാൻഡ് ലൈനും പ്രത്യേകം കാഷെ ചെയ്യുന്നു.

അവസാനമായി, കണ്ടെയ്നർ ആരംഭിക്കുമ്പോൾ, കമാൻഡ് എക്സിക്യൂട്ട് ചെയ്യുന്നു npm run dev. പാക്കേജ്.json-ൽ ഈ കമാൻഡ് വിവരിച്ചിരിക്കുന്നു:

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

ഒരു ഫോൾഡറിൽ നിന്ന് ഫയലുകൾ പ്രവർത്തിപ്പിക്കാൻ / dist, ആഗോളതലത്തിൽ ഇൻസ്റ്റാൾ ചെയ്തു http-server, കൂടാതെ ദേവാശ്രയത്തിൽ പാക്കേജ് spa-http-serverഅങ്ങനെ Vue റൂട്ടർ ശരിയായി പ്രവർത്തിക്കുന്നു. --push-state ഫ്ലാഗ് index.html-ലേക്ക് റീഡയറക്‌ട് ചെയ്യുന്നു. 1 സെക്കൻഡ് മൂല്യമുള്ള -c ഫ്ലാഗ് ചേർത്തു http-സെർവർ സ്ക്രിപ്റ്റുകൾ കാഷെ ചെയ്തില്ല. ഇതൊരു പരീക്ഷണ ഉദാഹരണമാണ്; ഒരു യഥാർത്ഥ പ്രോജക്റ്റിൽ nginx ഉപയോഗിക്കുന്നതാണ് നല്ലത്.

Vuex സ്റ്റോറിൽ ഞങ്ങൾ ഒരു ഫീൽഡ് സൃഷ്ടിക്കുന്നു apiHost: 'http://localhost:3000', NodeJS Api പോർട്ട് രജിസ്റ്റർ ചെയ്തിരിക്കുന്നിടത്ത്. ക്ലയന്റ് ഭാഗം തയ്യാറാണ്. ഇപ്പോൾ ക്ലയന്റിൽ നിന്ന് പിന്നിലേക്കുള്ള എല്ലാ അഭ്യർത്ഥനകളും ഈ url-ലേക്ക് പോകുന്നു.

NodeJS സെർവർ API

ഫോൾഡറിൽ /server സൃഷ്ടിക്കാൻ server.js ഒപ്പം ഡോക്കർഫയലും:

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

В server.js സൂചിപ്പിച്ചിരിക്കുന്നു URL ഡാറ്റാബേസിനായി const url = 'mongodb://mongo:27017/';. ക്ലയന്റിൽ നിന്നുള്ള ക്രോസ്-ഡൊമെയ്ൻ അഭ്യർത്ഥനകൾ അനുവദിക്കുന്നു:

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));
  });

തീരുമാനം

ഇനി നമുക്ക് പ്രൊജക്റ്റ് ഡയറക്ടറിയിലേക്ക് പോയി പ്രവർത്തിപ്പിക്കാം docker-compose build ചിത്രങ്ങൾ നിർമ്മിക്കുന്നതിനും docker-compose up കണ്ടെയ്നറുകൾ പ്രവർത്തിപ്പിക്കാൻ. ടീം 3 കണ്ടെയ്നറുകൾ ഉയർത്തും: സെർവർ, ക്ലയന്റ്, മോംഗോ. ഒരു NodeJS സെർവറിനായി, യൂസർ ഫോൾഡറിലേക്ക് ലിങ്ക് ചെയ്‌ത് ഹോട്ട്-റീലോഡ് കോൺഫിഗർ ചെയ്യാം. വികസിപ്പിച്ചുകൊണ്ടിരിക്കുന്ന ക്ലയന്റ് ഹോട്ട് റീലോഡ് ഉപയോഗിച്ച് പ്രാദേശികമായി ലോഞ്ച് ചെയ്യണം, പ്രത്യേകം പ്രവർത്തിക്കുന്നു സെർവർ и മോങ്കോ. ഒരു പ്രത്യേക സേവനം ആരംഭിക്കുന്നതിന്, അതിന്റെ പേര് വ്യക്തമാക്കുക docker-compose up client. ചിലപ്പോൾ അത് ചെയ്യാൻ മറക്കരുത് prune ഉറവിടങ്ങൾ സ്വതന്ത്രമാക്കുന്നതിന് കണ്ടെയ്‌നറുകൾ, നെറ്റ്‌വർക്കുകൾ, ഇമേജുകൾ എന്നിവ ഇല്ലാതാക്കുന്നു.

നിങ്ങൾക്ക് മുഴുവൻ കോഡും കാണാൻ കഴിയും ഇവിടെ. പദ്ധതി ഇപ്പോഴും വികസന ഘട്ടത്തിലാണ്.

അവലംബം: www.habr.com