详解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学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
vue.js循环radio的实例
Nov 07 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 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文件操作的详解
2013/06/05 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP文件操作详解
2016/12/30 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
围观tangram js库
2010/12/28 Javascript
jQuery参数列表集合
2011/04/06 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
js格式化时间的方法
2015/12/18 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
vue使用自定义icon图标的方法
2018/05/14 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
python练习程序批量修改文件名
2014/01/16 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python_mask_array的用法
2020/02/18 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
类、抽象类、接口的差异
2016/06/13 面试题
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
干部年终考核评语
2015/01/04 职场文书
七一建党节慰问信
2015/02/14 职场文书
毕业设计工作总结
2015/08/14 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
PYTHON InceptionV3模型的复现详解
2022/05/06 Python