详解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中的if语句使用介绍
Nov 20 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python设置值及NaN值处理方法
2018/07/03 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
解决Python使用列表副本的问题
2019/12/19 Python
python如何快速拼接字符串
2020/10/28 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
教育科学研究生自荐信
2013/10/09 职场文书
教师实习的自我鉴定
2013/10/26 职场文书
运动会广播稿20字
2014/02/18 职场文书
民事辩护词范文
2015/05/21 职场文书
被告答辩状范文
2015/05/22 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Redis的字符串是如何实现的
2021/10/24 Redis