欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

详解angular应用容器化部署

时间:2021-03-05 12:43:20|栏目:AngularJS|点击:

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

上一篇:Angularjs为ng-click事件传递参数

栏    目:AngularJS

下一篇:AngularJS 路由详解和简单实例

本文标题:详解angular应用容器化部署

本文地址:http://www.codeinn.net/misctech/74845.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有