详解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 相关文章推荐
表单提交验证类
Jul 14 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
Javascript浅谈之this
Dec 17 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
原生js实现简单的焦点图效果实例
Dec 14 Javascript
小程序实现单选多选功能
Nov 04 Javascript
Vue 递归多级菜单的实例代码
May 05 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通用防注入程序 推荐
2011/02/26 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
php 问卷调查结果统计
2015/10/08 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python中字典和集合学习小结
2017/07/07 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Django models.py应用实现过程详解
2019/07/29 Python
如何在python中执行另一个py文件
2020/04/30 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
绩效工资分配方案
2014/01/18 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
工厂见习报告范文
2014/10/31 职场文书
食堂卫生管理制度
2015/08/04 职场文书
思品教学工作总结
2015/08/10 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers