ડોકરમાં VueJS + NodeJS + MongoDB એપ્લિકેશનને કેવી રીતે પેકેજ કરવી

જેમ તમે અગાઉના લેખમાંથી સમજી શકો છો, મેં વિવિધ પ્રોજેક્ટ્સ પર કામ કર્યું છે. નવી ટીમમાં પ્રથમ દિવસો સામાન્ય રીતે એ જ રીતે જાય છે: બેકએન્ડર મારી સાથે બેસે છે અને એપ્લિકેશનને ઇન્સ્ટોલ કરવા અને જમાવટ કરવા માટે જાદુઈ ક્રિયાઓ કરે છે. ફ્રન્ટ-એન્ડ ડેવલપર્સ માટે ડોકર અનિવાર્ય છે કારણ કે... બેકએન્ડ મોટાભાગે PHP/Java/Python/C# સ્ટેક્સની વિશાળ શ્રેણીમાં લખવામાં આવે છે, અને ફ્રન્ટે દરેક વખતે બધું ઇન્સ્ટોલ કરવા અને જમાવવા માટે બેકએન્ડને વિચલિત કરવાની જરૂર નથી. માત્ર એક જ જગ્યાએ મેં પારદર્શક જમાવટ, લૉગ્સ અને સ્વચાલિત પરીક્ષણો સાથે ડોકર-જેનકિન્સનું સંયોજન જોયું.

ડોકર વિશે ઘણા વિગતવાર લેખો લખવામાં આવ્યા છે. આ લેખ VueJS/Vue રાઉટરનો ઉપયોગ કરીને સિંગલ પેજ એપ્લિકેશન જમાવવા વિશે વાત કરશે, સર્વરનો ભાગ NodeJS સાથે RESTful API ના સ્વરૂપમાં છે, અને MongoDB નો ડેટાબેઝ તરીકે ઉપયોગ થાય છે. ડોકર કંપોઝનો ઉપયોગ બહુવિધ કન્ટેનર એપ્લિકેશનોને વ્યાખ્યાયિત કરવા અને ચલાવવા માટે થાય છે.

તમારે ડોકરની કેમ જરૂર છે?

ડોકર તમને એપ્લિકેશન જમાવવાની પ્રક્રિયાને સ્વચાલિત કરવાની મંજૂરી આપે છે. ડેવલપરને હવે તેના પોતાના પર પ્રોગ્રામ્સ ઇન્સ્ટોલ કરવાની અથવા તેના મશીન પર સંસ્કરણની અસંગતતા સાથે વ્યવહાર કરવાની જરૂર નથી. તમારે ફક્ત ડોકર ઇન્સ્ટોલ કરવાની અને કન્સોલમાં 1-2 આદેશો લખવાની જરૂર છે. આ કરવાની સૌથી અનુકૂળ રીત Linux પર છે.

શરૂ કરી રહ્યા છીએ

સ્થાપિત કરો Docker અને ડોકર કંપોઝ

ફોલ્ડર માળખું

અમે ક્લાયંટ અને સર્વર એપ્લિકેશન માટે 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 માં સ્થિર સેવાઓ માટે. ક્લાયન્ટને સર્વર સાથે કનેક્ટ કરવા માટે ઉમેર્યું સર્વર પર આધાર રાખે છે. MongoDB ને સર્વર API સાથે લિંક કરવા માટે, ઉપયોગ કરો લિંક્સ મોંગો. સર્વર, ક્લાયંટ, મોંગો - સેવાઓનાં નામ.

VueJS ક્લાયંટ

ફોલ્ડરમાં /ગ્રાહક એપ્લિકેશન VueJS પર આધારિત છે. નો ઉપયોગ કરીને એપ્લિકેશન બનાવવામાં આવી હતી Vue Cli. છબી બનાવતી વખતે, ક્લાયંટ એપ્લિકેશન ફોલ્ડરમાં સ્થિર ફાઇલોના સમૂહમાં બનેલી છે /જિ. ડોકરફાઇલ ઇમેજ બનાવવા માટે આદેશોના સમૂહનું વર્ણન કરે છે:

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

મહેરબાની કરીને નોંધ કરો કે package.json એ બાકીની પ્રોજેક્ટ ફાઇલોથી અલગથી કૉપિ અને ઇન્સ્ટોલ કરેલ છે. આ કામગીરી માટે કરવામાં આવે છે, જેથી /node_modules ફોલ્ડરનાં સમાવિષ્ટો ફરીથી બિલ્ડ કરતી વખતે કેશ થાય. દરેક આદેશ વાક્ય અલગથી કેશ થયેલ છે.

છેલ્લે, જ્યારે કન્ટેનર શરૂ થાય છે, ત્યારે આદેશ ચલાવવામાં આવે છે npm run dev. આ આદેશ પેકેજ.json માં વર્ણવેલ છે:

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

ફોલ્ડરમાંથી ફાઇલો ચલાવવા માટે /જિ, વૈશ્વિક સ્તરે સ્થાપિત http-server, અને ડેવ-ડિપેન્ડન્સીમાં પેકેજ spa-http-serverજેથી Vue રાઉટર યોગ્ય રીતે કામ કરે. --push-state ફ્લેગ index.html પર રીડાયરેક્ટ કરે છે. 1 સેકન્ડના મૂલ્ય સાથે -c ધ્વજ ઉમેરવામાં આવ્યો હતો http-સર્વર સ્ક્રિપ્ટો કેશ કરી નથી. આ એક પરીક્ષણ ઉદાહરણ છે; વાસ્તવિક પ્રોજેક્ટ પર nginx નો ઉપયોગ કરવો વધુ સારું છે.

Vuex સ્ટોરમાં અમે એક ક્ષેત્ર બનાવીએ છીએ apiHost: 'http://localhost:3000', જ્યાં NodeJS Api પોર્ટ રજીસ્ટર થયેલ છે. ગ્રાહક ભાગ તૈયાર છે. હવે ક્લાયન્ટની પાછળની બધી વિનંતીઓ આ url પર જાય છે.

નોડજેએસ સર્વર API

ફોલ્ડરમાં /server બનાવો સર્વર.જેએસ અને ડોકરફાઈલ:

FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "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 કન્ટેનર ઉપાડશે: સર્વર, ક્લાયંટ, મોંગો. નોડજેએસ સર્વર માટે, તમે તેને વપરાશકર્તા ફોલ્ડર સાથે લિંક કરીને હોટ-રીલોડને ગોઠવી શકો છો. અને ડેવલપમેન્ટ હેઠળના ક્લાયંટને અલગથી ચાલતા હોટ રીલોડ સાથે સ્થાનિક રીતે લોંચ કરવું જોઈએ સર્વર и મોગો. એક અલગ સેવા શરૂ કરવા માટે, ફક્ત તેનું નામ સ્પષ્ટ કરો docker-compose up client. ક્યારેક તે કરવાનું ભૂલશો નહીં prune અને સંસાધનો ખાલી કરવા માટે કન્ટેનર, નેટવર્ક અને ઈમેજીસ કાઢી નાખવું.

તમે સંપૂર્ણ કોડ જોઈ શકો છો અહીં. પ્રોજેક્ટ હજુ વિકાસ હેઠળ છે.

સોર્સ: www.habr.com