Intro
I have made a personal homepage myself. Although the effect is not very good (a typical programmer who doesn't know how to design...), it records some of my practices on front-end frameworks and tools.
From the beginning, there is only one page made by angularjs to add less dynamic writing of css later, gulp automatically compiles less files into css files and automated compressed js and css, to the later added vue and angular implementations, which mainly maintains angular based. Currently, angular's personal homepage already supports PWA (Progressive Web Application). A few days ago, the support for docker deployment was added to record an article.
Writing dockerfile
The complete dockerfile is as follows:
FROM node # set working directory WORKDIR /app # install and cache app dependencies COPY . /app # install dependencies and build the angular app RUN yarn && yarn run build FROM nginx:stable-alpine # copy from dist to nginx root dir COPY --from=builder /app/dist/weihanli /usr/share/nginx/html # expose port 80 EXPOSE 80 # set author info LABEL maintainer="WeihanLi" # run nginx in foreground # /questions/18861300/how-to-run-nginx-within-a-docker-container-without-halting CMD ["nginx", "-g", "daemon off;"]
The entire dockerfile can be divided into two parts. The first part is to compile the angular application and generate the file to be deployed at the end.
The second part is to copy the generated part to an nginx-based environment and deploy it to nginx.
Packing docker image
passdocker build Command packaging docker image, detailed command usage reference/engine/reference/commandline/build/
docker build -t weihanli/homepage .
Start the container
docker run
Start a container through the docker run command, deploy the packaged image, and use the detailed commands/engine/reference/commandline/run/
docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage
docker compose
pass Start the container, start the command:docker-compose up
More compose information reference/compose/compose-file
The file is as follows:
version: "3"
services:
web:
image: "weihanli/homepage"
container_name: "weihanli-homepage-demo"
ports:
- "5200:80"
Access applications in containers
Visit http://localhost:5200 to access the application deployed in the container
More
Project source code:/WeihanLi/
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.