Angular Application containerized deployment

Angular Application containerized Deployment intro

I myself have to make a personal homepage, although the effect is not very good (do not understand the typical program ape ...), but recorded my knowledge of the front-end framework and tools of some practices,
From the beginning only a ANGULARJS made page to add less dynamic write CSS, gulp automated to compile less files into CSS files and automated compression JS and CSS, to the back of the implementation based on Vue and angular, the main maintenance is based on Angular, currently angular's personal home page already supports PWA (Progressive Web application), adding support for Docker deployments a few days ago, documenting an article.

Personal page Experience Address: weihanli.xyz

Writing Dockerfile

The complete dockerfile is as follows:

FROM node# set working directoryWORKDIR /app# install and cache app dependenciesCOPY . /app# install dependencies and build the angular appRUN yarn && yarn run buildFROM nginx:stable-alpine# copy from dist to nginx root dirCOPY --from=builder /app/dist/weihanli /usr/share/nginx/html# expose port 80EXPOSE 80# set author infoLABEL maintainer="WeihanLi"# run nginx in foreground# stackoverflow.com/questions/18861300/how-to-run-nginx-within-a-docker-container-without-haltingCMD ["nginx", "-g", "daemon off;"]

The whole dockerfile can be divided into two parts, the first part is compiling the angular application, generating the last file to be deployed.
The second part is to copy the generated parts to the Nginx-based environment and deploy them to nginx.

Package Docker image

docker buildpackage docker images with commands, detailed commands using reference docs.docker.com/engine/reference/commandline/build/

docker build -t weihanli/homepage .

Start container Docker run

docker runstart a container with a command, deploy a packaged image, and use the reference docs.docker.com/engine/reference/commandline/run/for detailed commands

docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage

Docker Compose

docker-compose.ymlstart the command by starting the container:docker-compose up

More Compose information reference Docs.docker.com/compose/compose-file

The Docker-compose.yml file is as follows:

version: "3"services:  web:    image: "weihanli/homepage"    container_name: "weihanli-homepage-demo"    ports:        - "5200:80"

Access the application in the container

Access to http://localhost:5200 for applications deployed in containers

More

Project Source code: Github.com/weihanli/weihanli.github.io

Contact

Contact me:weihanli@outlook.com