详解angular应用容器化部署
Intro
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、雅安服务器托管、营销软件、网站建设、南岗网站维护、网站推广。
我自己有做一个个人主页,虽然效果不怎么样(不懂设计的典型程序猿...),但是记录了我对于前端框架及工具的一些实践,
从开始只有一个 angularjs 制作的页面到后面加入 less 动态写css, gulp 自动化的将 less 文件编译成 css 文件以及自动化的压缩 js 和 css,到后面加入的基于 vue 和 angular 实现,主要维护的是基于 angular 的,目前 angular 的个人主页已经支持 PWA(Progressive Web Application),前几天添加了 docker 部署的支持,记录一篇文章记录一下。
编写 dockerfile
完整的 dockerfile 如下:
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 # https://stackoverflow.com/questions/18861300/how-to-run-nginx-within-a-docker-container-without-halting CMD ["nginx", "-g", "daemon off;"]
整个 dockerfile 可分为两部分,第一部分是编译 angular 应用,生成最后要部署的文件。
第二部分则是将生成的部分拷贝到基于 nginx 的环境中,部署到 nginx 中
打包 docker 镜像
通过 docker build
命令打包 docker 镜像,详细命令使用参考 https://docs.docker.com/engine/reference/commandline/build/
docker build -t weihanli/homepage .
启动容器
docker run
通过 docker run 命令启动一个容器,部署打包好的镜像,详细命令使用参考 https://docs.docker.com/engine/reference/commandline/run/
docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage
docker compose
通过 docker-compose.yml
启动容器,启动命令: docker-compose up
更多 compose 信息参考 https://docs.docker.com/compose/compose-file
docker-compose.yml 文件如下:
version: "3" services: web: image: "weihanli/homepage" container_name: "weihanli-homepage-demo" ports: - "5200:80"
访问容器中的应用
访问 http://localhost:5200 ,即可访问到容器中部署的应用
More
项目源代码: https://github.com/WeihanLi/weihanli.github.io
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
名称栏目:详解angular应用容器化部署
网站路径:http://azwzsj.com/article/pjgjjg.html