一步步在Docker里运行Web应用

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
简介: 一步步在Docker里运行Web应用

2018年只剩最后30天了。Jerry在2017年的最后一天,曾经立下一个目标:这个微信公众号在2018年保证至少每周发布一篇SAP原创技术文章。


从Jerry在后台统计的2018全年文章数量来看,这个目标已经提前实现了。为了感谢大家的支持,在2018年的最后一天,Jerry会发布一个合集:《SAP成都研究院2018年XX篇原创文章合集》,包含了2018年全年SAP成都研究院的同事们发布过的文章。


Jerry在11月份中旬去SAP上海研究院参加了Kubernetes的内部培训(详情参考我的前一篇文章:站在巨人肩膀上的牛顿:Kubernetes和SAP Kyma)。在SAP上海研究院的同事们如果想参加这个内部培训,可以联系同事Yang Katie。


为了避免很快就把三位老师传授的知识忘得精光,我得给自己找点练习来巩固所学的东西。


Jerry 2014年底加入SAP CRM Fiori开发团队时,我们开发的CRM Fiori应用,还是部署在传统的SAP Netweaver上的,详情参考我的文章:SAP Fiori应用的三种部署方式。


后来,我陆续接触了Salesforce的云平台Heroku,也学着很多程序员一样把自己的博客搭在github上,再后来接触了SAP自己的云平台,自然而然地就会试着把SAP UI5部署到这些平台上:


Step by step to host your UI5 application in Heroku


Step by step to host your web application to Github


Deploy your web application to Cloud Foundry which can access resource from On-Premise ABAP system


现在既然学了Kubernetes,那么就来试试将SAP UI5应用运行在Kubernetes上面吧。


我用来部署的UI5应用名叫Jerry’s Service Order, 是一个典型的Master-Detail风格的应用,左边Master List是所有服务订单列表,选中任意一个,在右边的Detail页面显示选中的服务订单的明细。




这个UI5应用的外观如上图所示。为简单起见,所有显示的数据都是从项目里的一个json文件读取的,不支持新订单的创建或修改。该应用可以从我的github获取:


https://github.com/i042416/jerrylist


如本文标题所示,这个练习的终极目标就是让该UI5应用运行于Kubernetes上,那么第一步就是先让它运行于容器里。和SAP Kubernetes内部培训一样,我选择了Docker这个非常受欢迎的容器引擎作为这个Kubernetes练习的容器技术。


关于Docker的简介和安装介绍,请参阅阮一峰大神的文章:Docker 入门教程


http://www.ruanyifeng.com/blog/2018/02/docker-tutorial.html


为什么我们要使用Docker容器?下面这段话摘自阮一峰的博客:


“Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口。它是目前最流行的 Linux 容器解决方案。


Docker 将应用程序与该程序的依赖,打包在一个文件里面。运行这个文件,就会生成一个虚拟容器。程序在这个虚拟容器里运行,就好像在真实的物理机上运行一样。有了 Docker,就不用担心环境问题。


总体来说,Docker 的接口相当简单,用户可以方便地创建和使用容器,把自己的应用放入容器。容器还可以进行版本管理、复制、分享、修改,就像管理普通的代码一样。”


Jerry梳理了一下将SAP UI5应用运行在Docker容器里的全过程,总共分三个步骤:


1. 让UI5应用运行在本地容器内


2. 将包含了UI5应用的本地容器打成一个新镜像


3. 将本地镜像上传到Docker hub,再下载测试


下面是详细步骤。


1. 让UI5应用运行在本地容器内


如果仅仅只会跑Docker的Hello World(其实Jerry两周前就是这个水平,囧),拿到这个需求,从什么地方入手?


当然是从包含了能运行UI5应用的那些web服务器的镜像入手,这里我选择了Nginx镜像,在Docker hub上有10.4k个stars。




用下面的命令直接运行这个镜像:


docker run -it nginx


用docker ps拿到实例化的容器id:




然后进入处于运行状态中的容器,执行shell命令:


docker exec -it bbc5d48a761c /bin/sh




看到#提示符后,进入容器内部的目录:/usr/share/nginx/html


如果我们能将github上的UI5应用的文件想办法拷贝到这个目录下面,就达到了在本地Docker容器运行UI5应用的目的了。




有很多种办法可以把github里的资源下载到Docker容器内部这个指定的目录下, 这里Jerry用一种我觉得最简单的方式,即通过Docker Volume技术将宿主机上的某个目录A以Volume的方式挂接到容器内部的html文件夹上,这样我们直接把github仓库上的webapp文件夹下载到宿主机的文件夹A即可,这个文件夹会以Volume的形式自动出现在容器内部映射好的目录内。


docker run -d -p 1081:80 -v pwd/webapp:/usr/share/nginx/html/webapp –name jerry-custom nginx


使用参数-p 1081:80将Nginx服务通过端口1081暴露出来,因此我这次要使用http://localhost:1081测试新启动的容器实例。


再次执行docker exec进入docker容器内部,确保**/usr/share/nginx/html**文件夹下确实包含了期望看到的UI5应用。




浏览器里输入localhost:1081/webapp,确保UI5应用能够正常访问,至此这个应用已经在本地docker容器里成功运行起来了。




2. 将包含了UI5应用的本地容器打成一个新镜像


到目前为止这个本地docker实例是没有办法给其他人使用的,为此我们得先利用dockerfile制作一个包含了UI5应用的docker镜像,上传到docker hub上,以便其他人下载。


随便创建一个文件夹,比如jerry-build, 然后把webapp文件夹放进去,再创建一个dockerfile文件,内容就三行:


**FROM nginx:stable **


**COPY webapp/ /usr/share/nginx/html/webapp/ **


RUN ls -la /usr/share/nginx/html/webapp*


这三个指令从语义上不难理解,第一行FROM命令告诉docker镜像构建例程使用nginx的stable版本作为基础镜像进行新镜像的构建。第二行COPY命令负责把webapp文件夹下的所有UI5资源文件拷贝到nginx docker镜像的对应目录内。第三行RUN命名执行shell命令ls,生成新的镜像文件。


dockerfile的详细语法请参考Docker 官方文档:


https://docs.docker.com/engine/reference/builder/#usage


执行命令docker build ., 最后一个.代表“当前目录”。




看到上图"Successfully built(成功构建)"的输出信息后,我们加上参数**-t jerry-nginx-image:1.0**重新构建一个名为jerry-nginx-image的镜像:




成功构建后,使用参数-p暴露一个新的端口1082:


docker run -d -p 1082:80 jerry-nginx-image:1.0


现在localhost:1082/webapp也能访问UI5应用了。




使用**docker images, **现在我们能看到这个构建好的镜像了,接下来我们会将其推送到Docker hub上。




3. 将本地镜像上传到Docker hub


Docker hub的使用方式几乎和github完全一致。说句题外话:虽然github今年6月份被微软收购了,但是用户体验一点也没变,一如既往的优秀。




关于github更多另类用法,请参阅Jerry的文章:写在Github被微软收购之际 - Github的那些另类用法。


首先在Docker hub上注册一个帐号:




创建一个新仓库:




取名i042416/ui5-nginx:




新建好的空的仓库看起来是这样的:




使用docker ps得到本地正在运行的docker容器的ID:




使用commit命令提交这个本地容器的修改(类比git commit ):


docker commit 53de4188b702 i042416/ui5-nginx




现在准备将这个本地提交过后的镜像推送到Docker hub了。


执行命令docker login:




在CloudFoundry上部署应用的朋友们可以把docker login类比成cf login(下面是cf login的截图):






最后一步就是用docker push将本地镜像推送到Docker hub:






刷新Docker hub上新建的仓库,能观察到刚才的本地推送记录和镜像尺寸。




现在可以通知您的朋友,在其电脑上消费这个镜像了。当然您也可以把自己电脑上的本地镜像删除,再使用docker run执行。


在两种情况下,由于本地镜像检索失败,我们都将看到提示信息:Unable to find image ‘i042416/ui5-nginx:latest’ locally, 然后观察到远端镜像的下载过程。




使用1080端口基于镜像i042416/ui5-nginx启动一个新的容器:




localhost:1080/webapp能够正常工作:




docker inspect命令证实了这个启动的容器确实是基于镜像i042416/ui5-nginx的。




在这个主题的下半部分,我们将使用这个i042416/ui5-nginx镜像,开始我们的Kubernetes之旅。敬请期待。


更多阅读


写在Github被微软收购之际 - Github的那些另类用法


SAP Fiori应用的三种部署方式


站在巨人肩膀上的牛顿:Kubernetes和SAP Kyma


相关实践学习
通过Ingress进行灰度发布
本场景您将运行一个简单的应用,部署一个新的应用用于新的发布,并通过Ingress能力实现灰度发布。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
相关文章
|
4天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
13 2
|
10天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
25 3
|
14天前
|
安全 Docker 容器
|
27天前
|
存储 安全 关系型数据库
后端技术:构建高效稳定的现代Web应用
【10月更文挑战第5天】后端技术:构建高效稳定的现代Web应用
47 1
|
23天前
|
JSON JavaScript 测试技术
【Docker项目实战】使用Docker部署PPTist在线演示文稿应用
【10月更文挑战第9天】使用Docker部署PPTist在线演示文稿应用
32 1
【Docker项目实战】使用Docker部署PPTist在线演示文稿应用
|
3天前
|
JavaScript 持续交付 Docker
解锁新技能:Docker容器化部署在微服务架构中的应用
【10月更文挑战第29天】在数字化转型中,微服务架构因灵活性和可扩展性成为企业首选。Docker容器化技术为微服务的部署和管理带来革命性变化。本文探讨Docker在微服务架构中的应用,包括隔离性、可移植性、扩展性、版本控制等方面,并提供代码示例。
20 1
|
5天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
14 3
|
5天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
17 2
|
6天前
|
测试技术 持续交付 PHP
PHP在Web开发中的应用与最佳实践###
【10月更文挑战第25天】 本文将深入探讨PHP在现代Web开发中的应用及其优势,并分享一些最佳实践来帮助开发者更有效地使用PHP。无论是初学者还是有经验的开发者,都能从中受益。 ###
18 1
|
6天前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
32 2