web-dev-qa-db-fra.com

Comment créer un conteneur Docker d'une application AngularJS?

J'ai une application AngularJS qui a cette structure:

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

Comment puis-je créer ma propre image à partir de cela et l'exécuter sur un conteneur? J'ai essayé de l'exécuter sans succès avec un Dockerfile et je suis relativement nouveau à Docker, donc excuses si c'est simple. Je veux juste l'exécuter sur un serveur http (en utilisant peut-être nginx?)

J'ai essayé ceux-ci pour de l'aide, sans succès:

angularjsnginxdockercontainersdockerfile
13
stop

Tout d'abord, suivez ceci guide des meilleures pratiques pour construire votre angular. Le fichier index.html doit être placé dans le dossier racine. Je ne sais pas si le les étapes suivantes fonctionneront, si ce n'est pas le cas.

Pour utiliser un nginx, vous pouvez suivre ce petit tutoriel: Dockerized Angular app with nginx

1.Créez un Dockerfile dans le dossier racine de votre application (à côté de votre index.html)

FROM nginx
COPY ./ /usr/share/nginx/html
EXPOSE 80

2.Exécuter docker build -t my-angular-app . dans le dossier de votre Dockerfile.

3 .docker run -p 80:80 -d my-angular-app puis vous pouvez accéder à votre application http: // localhost

18
adebasi

en s'appuyant sur la réponse de @adebasi, je veux mettre en évidence ce Dockerfile à utiliser avec l'application Angular CLI CLI actuelle).

Il utilise les Dockers ' fonctionnalité de construction en plusieurs étapes introduit en 17.05. À l'étape 1, le conteneur Node est uniquement utilisé pour créer une génération. L'image finale utilisera Nginx et fournira statiquement les fichiers générés.

### STAGE 1: Build ###    
# We label our stage as 'builder'
FROM node:8-Alpine as builder

COPY package.json package-lock.json ./

RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

## Storing node modules on a separate layer will prevent 
## unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --build-optimizer


### STAGE 2: Setup ###

FROM nginx:1.13.3-Alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder 
## to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]
8
Hedge

Généralement,

Docker est utilisé pour docker les applications . Maintenant, une application ne se compose pas uniquement de JavaScript (comme AngularJS est un framework JS) à moins que vous ne choisissiez un framework back-end comme Node, ASP.NET Core, Python etc. Donc, si vous avez seulement application HTML simple, utilisez un proxy inversé ou un conteneur de serveur Web comme mentionné par Robbie. Pour un cas simple (exemple Nginx):

  • Téléchargez l'image Nginx Docker depuis le Hub.
  • Utilisez des volumes ou créez votre propre image pour conserver vos configurations
  • Exposez un port du conteneur à l'hôte.
1
Janshair Khan