详解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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
vue实现全选和反选功能
Aug 31 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
js原型链原理看图说明
2012/07/07 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
20个常用Python运维库和模块
2018/02/12 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
python障碍式期权定价公式
2019/07/19 Python
python Pexpect模块的使用
2020/12/25 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
保护黄河倡议书
2014/05/16 职场文书
工程售后服务承诺书
2014/05/21 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2015年教师节主持词
2015/07/03 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
Hive日期格式转换方法总结
2022/06/25 数据库