Bir önceki yazımdan da anlayacağınız üzere farklı projeler üzerinde çalıştım. Yeni bir ekipteki ilk günler genellikle aynı şekilde geçer: Destekleyici benimle oturur ve uygulamayı yüklemek ve dağıtmak için sihirli eylemler gerçekleştirir. Docker, ön uç geliştiriciler için vazgeçilmezdir çünkü... Arka uç genellikle çok çeşitli PHP/Java/Python/C# yığınlarında yazılır ve ön tarafın her şeyi yüklemek ve dağıtmak için arka ucun dikkatini dağıtmasına gerek yoktur. Yalnızca tek bir yerde şeffaf dağıtım, günlükler ve otomatik testlerle Docker-Jenkins kombinasyonunu gördüm.
Docker hakkında birçok detaylı makale yazıldı. Bu makalede VueJS/Vue Router kullanarak Tek Sayfalı Uygulama dağıtımından bahsedeceğiz, sunucu kısmı NodeJS ile RESTful API formundadır ve veritabanı olarak MongoDB kullanılır. Docker Compose, birden fazla konteyner uygulamasını tanımlamak ve çalıştırmak için kullanılır.
Docker'a neden ihtiyaç duyulur?
Docker, bir uygulamayı dağıtma sürecini otomatikleştirmenize olanak tanır. Geliştiricinin artık programları kendi başına kurmasına veya makinesindeki sürüm uyumsuzluğuyla uğraşmasına gerek yok. Tek yapmanız gereken Docker'ı kurmak ve konsola 1-2 komut yazmak. Bunu yapmanın en uygun yolu Linux'tur.
Başlarken
Ayarlamak
Klasör yapısı
İstemci ve sunucu uygulamaları için 2 adet klasör oluşturuyoruz. .yml uzantılı bir dosya bir yapılandırmadır Docker OluşturmaUygulama kapsayıcılarının tanımlandığı ve ilişkilendirildiği yer.
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'da 3 hizmet oluşturuyoruz: NodeJS, MongoDB için ve Vue'da statik olanlar için. İstemciyi sunucuya bağlamak için eklendi sunucuya bağlıdır. MongoDB'yi sunucu API'sine bağlamak için şunu kullanın: bağlantılar mongo. Sunucu, istemci, mongo - hizmetlerin adları.
VueJS istemcisi
Klasöründe /müşteri Uygulama VueJS'ye dayanmaktadır. Uygulama kullanılarak oluşturuldu
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"]
Lütfen package.json dosyasının diğer proje dosyalarından ayrı olarak kopyalanıp kurulduğunu unutmayın. Bu performans için yapılır, böylece /node_modules klasörünün içeriği yeniden oluşturulurken önbelleğe alınır. Her komut satırı ayrı ayrı önbelleğe alınır.
Son olarak konteyner başlatıldığında komut yürütülür. npm run dev
. Bu komut package.json'da açıklanmıştır:
"scripts": {
"test:dev": "http-server dist -p 8081 -c 1 --push-state"
}
Dosyaları bir klasörden çalıştırmak için / uzak, küresel olarak kurulu http-server
ve geliştirme bağımlılıklarında paket spa-http-server
Böylece Vue Router'ın düzgün çalışması sağlanır. --Push-state bayrağı index.html'ye yönlendirir. 1 saniye değerindeki -c bayrağı eklendi http sunucusu komut dosyalarını önbelleğe almadı. Bu bir test örneğidir; gerçek bir projede nginx kullanmak daha iyidir.
Vuex mağazasında bir alan oluşturuyoruz apiHost: 'http://localhost:3000'
NodeJS Api bağlantı noktasının kayıtlı olduğu yer. Client kısmı hazır. Artık istemciden arkaya gelen tüm istekler bu URL'ye gidiyor.
NodeJS sunucu API'si
Klasöründe /server
yaratmak sunucu.js ve Docker dosyası:
FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
В sunucu.js gösterilir url veritabanı için const url = 'mongodb://mongo:27017/';
. İstemciden gelen etki alanları arası isteklere izin verme:
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));
});
Sonuç
Şimdi proje dizinine gidelim ve çalıştıralım docker-compose build
görüntüleri oluşturmak için ve docker-compose up
konteynerleri çalıştırmak için. Ekip 3 konteyneri kaldıracak: sunucu, istemci, mongo. Bir NodeJS sunucusu için, sunucuyu kullanıcı klasörüne bağlayarak çalışırken yeniden yüklemeyi yapılandırabilirsiniz. Ve geliştirilmekte olan istemci, ayrı olarak çalışarak, sıcak yeniden yükleme ile yerel olarak başlatılmalıdır. sunucu и Mongo. Ayrı bir hizmet başlatmak için adını belirtmeniz yeterlidir docker-compose up client
. Bazen yapmayı unutmayın prune
ve kaynakları boşaltmak için kapsayıcıları, ağları ve görüntüleri silmek.
Kodun tamamını görebilirsiniz
Kaynak: habr.com