详解angular应用容器化部署


Posted in Javascript onAugust 14, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 #Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 #Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 #Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 #Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 #Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
jQuery语法总结和注意事项小结
2012/11/11 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python实现决策树分类
2018/08/30 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
多个python文件调用logging模块报错误
2020/02/12 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
《赠汪伦》教学反思
2014/04/12 职场文书
党委班子剖析材料
2014/08/21 职场文书
端午节活动总结
2014/08/26 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
离婚协议书格式
2015/01/26 职场文书
被告答辩状范文
2015/05/22 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
图神经网络GNN算法
2022/05/11 Python