Goal: Build an Angular front-end app as a Docker image

This project code is maintained in angular-Docker-sample

Angular App Building

First, generate an Angular application with generator-gulp-angular.

The specific operation is roughly

npm install -g yo gulp bower

npm install -g generator-gulp-angular

yo gulp-angularCopy the code

It is worth noting:

  • The project relies on Node Bower Gulp
  • Debugging command gulp serve
  • Debugging command gulp serve:dist
  • Build command gulp build
  • Build the directory /dist
  • The result is a purely static file

There is a small problem with this app. Fonts file will not be displayed after build. Bower.json needs to be modified.

{
"dependencies": {
    .....
  },
"overrides": {
    "bootstrap-sass-official": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  }
}
Copy the code

Dockerfile write

First, select the official Node image as the base image for your project. Node :0.12.7-wheezy is generally used and there is no shortage of various things.

FROM node:0.12.7- Wheezy MAINTAINER YeTing "[email protected]"Copy the code

Second, since the project is generating purely static files, we need Nginx as the Web server.

RUN apt-key adv --keyserver pgp.mit.edu --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62 RUN echo "deb http://nginx.org/packages/mainline/debian/ wheezy nginx "> > / etc/apt/sources list ENV NGINX_VERSION 1.7.12-1 ~ wheezy RUN apt-get update && \ apt-get install -y ca-certificates nginx && \ rm -rf /var/lib/apt/lists/* # forward request and error logs to docker log collector RUN ln -sf /dev/stdout /var/log/nginx/access.log RUN ln -sf /dev/stderr /var/log/nginx/error.log EXPOSE 80Copy the code
  • The root directory of the Web/usr/share/nginx/html
  • Access log output to standard output, available throughdocker logsTo view
  • Exposed port 80

Next, download the dependency tools bower and gulp required by the project.

RUN npm install -g bower gulp

WORKDIR /appCopy the code

Next, copy./package.json and./bower.json to the image in preference, preloading third-party dependencies.

COPY ./package.json /app/
COPY ./bower.json /app/

RUN npm install && bower install --allow-rootCopy the code

Bower does not allow Root by default, so add the –allow-root parameter.

Then, execute the Angular build command to copy the static files generated by the build to the Web root.

COPY . /app/

RUN gulp build 

RUN cp -R /app/dist/*  /usr/share/nginx/htmlCopy the code

Finally, set the Docker default run command to start Nginx as foreground run.

CMD ["nginx", "-g", "daemon off;"]Copy the code

Nginx is set up to run in the foreground so that the Docker container can start without interruption.

Build the Docker Image

The complete Dockerfile

FROM node:0.12.7- Wheezy MAINTAINER YeTing "[email protected]" RUN apt-key adv --keyserver pgp.mit.edu --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62 RUN echo "deb http://nginx.org/packages/mainline/debian/ wheezy nginx" >> /etc/apt/sources.list ENV NGINX_VERSION 1.7.12-1~wheezy RUN apt-get update && \ apt-get install -y ca-certificates nginx  && \ rm -rf /var/lib/apt/lists/* # forward request and error logs to docker log collector RUN ln -sf /dev/stdout /var/log/nginx/access.log RUN ln -sf /dev/stderr /var/log/nginx/error.log EXPOSE 80 RUN npm install -g bower gulp WORKDIR /app COPY ./package.json /app/ COPY ./bower.json /app/ RUN npm install && bower install --allow-root COPY . /app/ RUN gulp build RUN cp -R /app/dist/* /usr/share/nginx/html CMD ["nginx", "-g", "daemon off;"]Copy the code

With Dockerfile in hand, we can run the following command to build a front-end image and name it my-angular-app:

docker build -t my-angular-app .Copy the code

Deploy the Docker Image

Finally, let’s start the container from the image:

docker run -p 80:80 my-angular-appCopy the code

This way we can access our Angular app from port 80.

Very well, now that we have a good Angular Docker Seed, add your logic to complete your Angular application.