Geek Answers Handbook

How to create an AngularJS application docker container?

I have an AngularJS application that has this 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

How do I create my own image from this and run it in a container? I tried to run it unsuccessfully with the Dockerfile, and I'm relatively new to Docker, so I apologize if this is simple. I just want to run it on an http server (maybe using nginx?)

I tried this for help, but to no avail

+11
angularjs docker containers nginx dockerfile
source share
3 answers

First of all, follow this best practice guide to create your angular application framework. Index.html should be placed in the root folder. I am not sure if the following steps will be followed if this is not the case.

To use nginx you can follow this little tutorial: Angular docker application with nginx

1.Create a Docker file in the root folder of your application (next to your index.html)

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

2.Run docker build -t my-angular-app . in the folder of your Docker file.

3. docker run -p 80:80 -d my-angular-app , and then you can access your application http: // localhost

+17
source share

Building on @adebasi's answer, I want to highlight this Dockerfile for use with the current Angular CLI application.

It uses the multi-stage Dockers build function introduced in 05.17. In step 1, the Node container is used only to create the assembly. The final image will use Nginx and statically deliver embedded files.

 ### 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;"]
+7
source share

Generally,

Docker is used to pin applications . Now the application simply does not consist only of JavaScript (since AngularJS is a JS framework) if you do not choose the back end infrastructure such as Node, ASP.NET Core, Python, etc. Therefore, if you have a simple HTML application, use the reverse -proxy or web server container mentioned by Robbie. For a simple case (Nginx example):

  • Download Nginx Image Docker from the Hub.
  • Use volumes or create your own image to store your configurations.
  • Export port from container to host.
+1
source share

More articles:


All Articles