Tulad ng naiintindihan mo mula sa nakaraang artikulo, nagtrabaho ako sa iba't ibang mga proyekto. Ang mga unang araw sa isang bagong koponan ay karaniwang napupunta sa parehong paraan: ang backender ay nakaupo sa tabi ko at nagsasagawa ng mga mahiwagang pagkilos upang i-install at i-deploy ang application. Ang Docker ay kailangang-kailangan para sa mga front-end na developer dahil... Ang backend ay madalas na isinusulat sa isang malawak na hanay ng mga stack ng PHP/Java/Python/C#, at ang harap ay hindi kailangang makagambala sa backend sa bawat oras na i-install at i-deploy ang lahat. Sa isang lugar lang ako nakakita ng kumbinasyon ng Docker-Jenkins na may transparent na deployment, mga log, at mga automated na pagsubok.
Maraming detalyadong artikulo ang naisulat tungkol sa Docker. Tatalakayin ng artikulong ito ang tungkol sa pag-deploy ng Single Page Application gamit ang VueJS/Vue Router, ang bahagi ng server ay nasa anyo ng RESTful API na may NodeJS, at ang MongoDB ay ginagamit bilang database. Ginagamit ang Docker Compose upang tukuyin at patakbuhin ang maraming application ng container.
Bakit kailangan ang Docker
Pinapayagan ka ng Docker na i-automate ang proseso ng pag-deploy ng isang application. Hindi na kailangan ng developer na mag-install ng mga program sa kanyang sarili o harapin ang hindi pagkakatugma ng bersyon sa kanyang makina. Ang kailangan mo lang gawin ay i-install ang Docker at i-type ang 1-2 command sa console. Ang pinaka-maginhawang paraan upang gawin ito ay sa Linux.
Pagsisimula
Itakda at
Istruktura ng folder
Gumagawa kami ng 2 folder para sa mga aplikasyon ng kliyente at server. Ang isang file na may extension na .yml ay isang config Docker Bumuo, kung saan tinukoy at nauugnay ang mga container ng application.
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
Lumilikha kami ng 3 serbisyo sa Docker: para sa NodeJS, MongoDB at para sa mga static sa Vue. Idinagdag upang ikonekta ang kliyente sa server depende sa server. Upang i-link ang MongoDB sa server API, gamitin link mongo. Server, kliyente, mongo - mga pangalan ng mga serbisyo.
kliyente ng VueJS
Sa folder /kliyente Ang application ay batay sa VueJS. Ang application ay nilikha gamit ang . Kapag bumubuo ng isang imahe, ang client application ay binuo sa isang set ng mga static na file sa folder / dist. Inilalarawan ng Dockerfile ang isang hanay ng mga utos para sa pagbuo ng isang imahe:
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"]
Pakitandaan na ang package.json ay kinopya at naka-install nang hiwalay mula sa iba pang mga file ng proyekto. Ginagawa ito para sa pagganap, upang ang mga nilalaman ng folder na /node_modules ay naka-cache kapag muling buuin. Ang bawat command line ay naka-cache nang hiwalay.
Sa wakas, kapag nagsimula ang lalagyan, ang command ay naisakatuparan npm run dev. Ang utos na ito ay inilarawan sa package.json:
"scripts": {
"test:dev": "http-server dist -p 8081 -c 1 --push-state"
}
Upang magpatakbo ng mga file mula sa isang folder / dist, na naka-install sa buong mundo http-server, at sa dev-dependencies ang package spa-http-serverupang gumana nang tama ang Vue Router. Ang --push-state na flag ay nagre-redirect sa index.html. Ang -c na flag na may halagang 1 segundo ay idinagdag sa http-server hindi nag-cache ng mga script. Ito ay isang halimbawa ng pagsubok; sa isang tunay na proyekto mas mahusay na gumamit ng nginx.
Sa tindahan ng Vuex lumikha kami ng isang field apiHost: 'http://localhost:3000', kung saan nakarehistro ang NodeJS Api port. Ang bahagi ng kliyente ay handa na. Ngayon lahat ng mga kahilingan mula sa kliyente hanggang sa likod ay mapupunta sa url na ito.
NodeJS server API
Sa folder /server lumikha server.js at Dockerfile:
FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
Π server.js ipinahiwatig url para sa database const url = 'mongodb://mongo:27017/';. Pinapayagan ang mga kahilingan sa cross-domain mula sa kliyente:
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));
});
Konklusyon
Ngayon pumunta tayo sa direktoryo ng proyekto at tumakbo docker-compose build para sa pagbuo ng mga imahe at docker-compose up upang magpatakbo ng mga lalagyan. Ang koponan ay magbubuhat ng 3 lalagyan: server, kliyente, mongo. Para sa isang server ng NodeJS, maaari mong i-configure ang hot-reload sa pamamagitan ng pag-link nito sa folder ng user. At ang kliyente sa ilalim ng pag-unlad ay dapat na ilunsad nang lokal na may mainit na pag-reload, na tumatakbo nang hiwalay server ΠΈ mongo. Para magsimula ng hiwalay na serbisyo, tukuyin lang ang pangalan nito docker-compose up client. Huwag kalimutang gawin ito minsan prune at pagtanggal ng mga lalagyan, network, at larawan upang magbakante ng mga mapagkukunan.
Makikita mo ang buong code . Ang proyekto ay nasa ilalim pa rin ng pag-unlad.
Pinagmulan: www.habr.com