🥇VueJS + NodeJS + MongoDB тиркемесин Docker'де кантип пакеттөө керек

Мурунку макаладан түшүнгөндөй, мен ар кандай долбоорлордун үстүндө иштедим. Жаңы командадагы алгачкы күндөр, адатта, ушундай жол менен өтөт: колдоочу мени менен отуруп, тиркемени орнотуу жана жайылтуу үчүн сыйкырдуу аракеттерди жасайт. Docker алдыңкы иштеп чыгуучулар үчүн зарыл, анткени... Backend көбүнчө PHP/Java/Python/C# стектеринин кеңири диапазонунда жазылат, жана бардыгын орнотуу жана жайылтуу үчүн алдыңкы тарап ар бир жолу бэкэндди алаксытуунун кереги жок. Бир гана жерде мен Докер-Дженкинс айкалышын ачык жайылтуу, журналдар жана автоматташтырылган тесттер менен көрдүм.

Докер жөнүндө көптөгөн деталдуу макалалар жазылган. Бул макалада VueJS/Vue Routerдин жардамы менен Single Page тиркемесин жайылтуу жөнүндө сөз болот, сервер бөлүгү NodeJS менен RESTful API түрүндө жана MongoDB маалымат базасы катары колдонулат. Docker Compose бир нече контейнер тиркемелерин аныктоо жана иштетүү үчүн колдонулат.

Эмне үчүн Docker керек

Docker тиркемелерди жайылтуу процессин автоматташтырат. Иштеп чыгуучуларга мындан ары программаларды кол менен орнотуунун же машиналарына версиялардын дал келбестиги менен күрөшүүнүн кажети жок. Жөн гана Dockerди орнотуп, консолго бир нече буйруктарды киргизиңиз. Бул эң ыңгайлуу түрдө төмөнкүнү колдонуу менен жасалат 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

Биз Dockerде 3 кызматты түзөбүз: NodeJS, MongoDB жана Vueдеги статикалык кызматтар үчүн. Кардар менен серверди туташтыруу үчүн кошулган серверге көз каранды. MongoDB серверин API менен байланыштыруу үчүн колдонуңуз шилтемелер mongo. Сервер, кардар, монго - кызматтардын аттары.

VueJS кардары

папкасында /кардар Колдонмо VueJS негизделген. Колдонмо колдонуу менен түзүлгөн Vue Cli. Сүрөттү курууда кардар тиркемеси папкадагы статикалык файлдардын жыйындысына курулат /дист. Dockerfile сүрөттү куруу үчүн буйруктардын жыйындысын сүрөттөйт:

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. Бул буйрук package.json ичинде сүрөттөлгөн:


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

Папкадан файлдарды иштетүү үчүн /дист, дүйнө жүзү боюнча орнотулган http-server, жана dev-көз карандылыкта пакет spa-http-serverVue Router туура иштеши үчүн. --push-state желекчеси index.htmlге багыттайт. 1 секунддук маанидеги -c желеги кошулду http-сервер скрипттерди кэш кылган эмес. Бул реалдуу долбоордо nginxти колдонуу жакшыраак.

Vuex дүкөнүндө биз талаа түзөбүз apiHost: 'http://localhost:3000', NodeJS Api порту катталган жерде. Кардар бөлүгү даяр. Эми кардардан артка бардык суроо-талаптар ушул URL дарегине барат.

NodeJS сервер API

папкасында /server түзүү server.js жана Dockerfile:


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

В server.js көрсөтүлгөн нускага маалымат базасы үчүн 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 сервери үчүн сиз аны колдонуучу папкасына байланыштырып, ысык кайра жүктөөнү конфигурациялай аласыз. Ал эми иштеп жаткан кардар өзүнчө иштеп, ысык кайра жүктөө менен жергиликтүү ишке киргизилиши керек Server и Соо. Өзүнчө кызматты баштоо үчүн жөн гана анын атын көрсөтүңүз docker-compose up client. Кээде муну жасоону унутпаңыз prune жана ресурстарды бошотуу үчүн контейнерлерди, тармактарды жана сүрөттөрдү жок кылуу.

Толук кодду көрө аласыз бул жерде. Долбоор дагы эле иштелип чыгууда.

Source: www.habr.com