J'ai mis en place un workflow de développement angulaire à l'aide de Docker. Cependant, la création du docker et la diffusion de l'application Angular est un peu lente et prend environ 7 minutes (compte tenu de toutes les images de base pré-téléchargées).
./docker-compose.development.yml: p> ./.docker/development.dockerfile: Comment puis-je améliorer la compilation heure? FROM node:10.15.1-alpine
# set working directory
RUN mkdir /usr/share/app
WORKDIR /usr/share/app
# add `/usr/share/app/node_modules/.bin` to $PATH
ENV PATH /usr/share/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/share/app/package.json
COPY package-lock.json /usr/share/app/package-lock.json
RUN npm install
RUN npm install -g @angular/cli@7.3.3
# add app
COPY . /usr/share/app
EXPOSE 80 443
CMD ["ng", "--host=0.0.0.0","--watch", "--poll=2000", "serve"]
version: '3.4'
services:
cc-ui-docker-service:
container_name: cc-ui-dev-container
image: cc-ui-dev-dev
build:
context: .
dockerfile: .docker/development.dockerfile
environment:
NODE_ENV: development
volumes:
- './:/usr/share/app'
- /app/node_modules/
ports:
- 4200:80
## set your startup file here
command: ['sh', '-c', 'ng serve --host=0.0.0.0 --watch --poll=2000']
{
"scripts": {
"ng": "ng",
"docker-serve-dev": "docker-compose -f docker-compose.development.yml up --build",
},
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.2.6",
"@angular/cdk": "^7.3.3",
"@angular/common": "^7.2.6",
"@angular/compiler": "^7.2.6",
"@angular/core": "^7.2.6",
"@angular/forms": "^7.2.6",
"@angular/http": "^7.2.6",
"@angular/platform-browser": "^7.2.6",
"@angular/platform-browser-dynamic": "^7.2.6",
"@angular/router": "^7.2.6",
"@asymmetrik/ngx-leaflet": "5.0.1",
"@nebular/auth": "3.3.0",
"@nebular/bootstrap": "3.3.0",
"@nebular/security": "3.3.0",
"@nebular/theme": "3.3.0",
"@ng-bootstrap/ng-bootstrap": "^4.0.4",
"@swimlane/ngx-charts": "^10.1.0",
"angular-tree-component": "8.3.0",
"angular2-chartjs": "0.5.1",
"angular2-toaster": "^7.0.0",
"bootstrap": "4.3.1",
"chart.js": "^2.7.3",
"ckeditor": "4.11.2",
"classlist.js": "1.1.20150312",
"core-js": "2.6.5",
"echarts": "^4.1.0",
"error-stack-parser": "^2.0.2",
"eva-icons": "^1.1.1",
"intl": "1.2.5",
"ionicons": "2.0.1",
"jwt-decode": "^2.2.0",
"leaflet": "1.4.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"nebular-icons": "1.1.0",
"ng-snotify": "^4.3.1",
"ng2-ckeditor": "^1.2.2",
"ng2-completer": "2.0.8",
"ng2-slim-loading-bar": "^4.0.0",
"ng2-smart-table": "1.4.0",
"ngx-echarts": "^4.1.0",
"normalize.css": "8.0.1",
"pace-js": "1.0.2",
"primeicons": "^1.0.0",
"primeng": "^7.0.5",
"roboto-fontface": "0.8.0",
"rxjs": "6.4.0",
"rxjs-compat": "6.4.0",
"socicon": "3.0.5",
"stacktrace-gps": "^3.0.2",
"stacktrace-js": "^2.0.0",
"tinymce": "4.5.7",
"tslib": "^1.9.3",
"typeface-exo": "0.0.61",
"web-animations-js": "2.2.5",
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.3",
"@angular/cli": "^7.3.3",
"@angular/compiler-cli": "^7.2.6",
"@angular/language-service": "7.2.6",
"@compodoc/compodoc": "^1.1.8",
"@fortawesome/fontawesome-free": "^5.7.2",
"@types/d3-color": "1.2.2",
"@types/googlemaps": "^3.30.16",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/leaflet": "1.4.3",
"@types/node": "~8.9.4",
"codelyzer": "^4.5.0",
"conventional-changelog-cli": "2.0.12",
"husky": "1.3.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"npm-run-all": "4.1.5",
"prettier-tslint": "^0.4.2",
"protractor": "~5.4.0",
"rimraf": "^2.6.3",
"stylelint": "9.10.1",
"ts-node": "~7.0.0",
"tslint": "~5.12.1",
"tslint-language-service": "^0.9.9",
"typescript": "~3.1.6"
},
"tasks": [
{
"type": "npm",
"script": "lint",
"problemMatcher": {
"base": "$tslint5",
"fileLocation": "relative"
}
}
]
}
3 Réponses :
Vous pouvez créer une application en dehors du menu fixe et copier uniquement le dossier dist dans image docker nginx .
Ensuite, vous n'avez pas besoin d'installer node_modules evrey time.
Exemple de Dockerfile
server {
server_name my-app;
root /var/www/frontend/src;
try_files $uri $uri/ index.html;
}
Au lieu de copier tout le dossier node_modules dans votre conteneur, essayez de ne copier que le package.json et ensuite exécutez "npm install". Le dossier node_module n'a pas besoin d'être copié dans le conteneur puisque "npm install" installe tous les modules nécessaires dans le conteneur, il lit toutes les dépendances à partir de package.json.
Cela réduira le temps de construction :)
Il est recommandé d'utiliser des builds en plusieurs étapes lors de la création d'images avec Docker.
Un exemple de Dockerfile serait:
FROM node:10 as build WORKDIR /home COPY package.json package-lock.json . RUN npm install COPY . . RUN npm build # or any other command to package FROM nginx:alpine COPY --from=build /home/dist/* /usr/share/nginx/html/
C'est tout :)