使用Docker创建Ionic2 PWA开发环境 1

我想创建一个简单的渐进式Web应用程序(PWA),在移动设备上运行,接收用户数据并将其保存到后台。

我选择了Ionic 2(忽略了它创建本地应用程序的能力),因为它基于Angular 2。它使用TypeScript作为其开发语言。如果你刚开始接触Angular(就像我一样),请前往Code School的Angular 2 Accellerating。深入了解。

在安装Ionic 2之前,您需要Node.js,因为它是Ionic 2所必需的。

关于Node.js

为了避免环境搭建污染我的MacBook,我选择将我的开发环境限制在一个Docker容器中,同时避免了自制软件和不可逆的本地安装程序。

这将为您提供一个虚拟环境,可以随身携带,交给同事,甚至发布给任何人在几分钟内开始使用。

这不是教程。你将不得不亲自访问这些链接,以便掌握,了解你要怎么做以及为什么这样做。我在Node.js开发者的Docker入门中松散地遵循了Heitor的秘诀,跳过了Express,转而使用Ionic 2,而且忽略了任何被弃用的(比如Boot2Docker)的东西。

▶安装 Docker for Mac入门指南:只需将Docker应用程序拖到应用程序文件夹即可。Windows用户应该转而使用Docker for Windows,Linux用户可以在Linux上安装Docker Engine

然后打开终端并进入

docker run hello-world

为了验证你的安装是否正确,你需要执行两个步骤,下载一个公共Docker镜像到你的计算机,实例化一个容器并运行一个Hello World应用程序。

Docker就像引入到轻量级虚拟机的依赖注入,创建快照(即容器),并将它们导出为新的虚拟机(即Docker镜像)。它有一个基础设施来分享完整的解决方案。

▶你可选择安装 Kitematic 一个用于管理Docker容器的可选GUI(Docker可视化管理工具)。这既不需要,也不是非常有用,但是对于Docker新手来说,可以方便地探索Docker的全部内容。 windows上Kitematic的安装和使用可以参考如何在Windows上通过Kitematic使用Docker?

▶安装Ubuntu和Node.js. Node.js有一个基于Debian的Docker镜像,但是我遵循Heitor的路径,它更接近于模仿真实的Linux安装,并且手动安装所需的所有东西。

稍后我将介绍一种自动配置环境的方法。跳转到介绍Dockerfiles

docker pull ubuntu
docker run ubuntu /bin/echo 'Hello World'
docker run -i -t ubuntu

您现在已经在一个Ubuntu的壳里面了。尝试ls -la并安装Node.js和npm:

ls -la
apt-get update

apt-get install curl
curl -sL https://deb.nodesource.com/setup_8.x | bash -

# 目前nodejs稳定的版本是8.94,如果需要其他版本可以修改上面那行代码中的setup_8.x

apt-get install nodejs
node -v

关于ionic 2

▶ 安装Ionic 2

npm install -g ionic
exit

现在将容器保存为一个新的镜像:

# Get your CONTAINER_ID
docker ps -a

# Save your container as a new image
docker commit -a 'YOUR_NAME <YOUR@EMAIL>' -m 'ionic2 devjump' \
    CONTAINER_ID my-ionic2:0.1
# 上面代码,用-a指定镜像作者,-m指定行创建的镜像的提交信息,接着是容器ID、目标镜像仓库、镜像名。
docker tag my-ionic2:0.1 my-ionic2:latest

立即进入一个运行你的Ionic 2安装的新容器:

docker run -i -t -p 8100:8100 -p 35729:35729 my-ionic2

创建并开始您的第一个Ionic 2应用程序:

ionic start cutePuppyPics sidemenu 

cd cutePuppyPics

# Would you like to integrate your new app with Cordova to target native iOS and Android? No
# ionic搭建pwa不需要cordova

ionic serve --all 

# without the --all Safari wouldn't connect to Ionic

现在转到Safari或Chrome并打开http:// localhost:8100:

介绍Dockerfiles和已安装的卷 大功告成!您可能很想尝试开始开发您的应用程序 - 但是您不应该这么做!你的应用程序的来源仍然是Docker容器。一旦容器消失了,你的资源也将消失。

如果在你的Docker映像中丢失了任何东西或者必须改变它,那么很可能你将不得不从头开始,繁琐地复制粘贴和重复运行所有的语句。

我们将使用Dockerfile 来构建一个新的Docker镜像:

▶︎创建一个新的Dockerfile。注意:在Docker Hub的自动构建中,Dockerfile这个例子不会再收到任何提交。

下一篇文章将详细介绍如何用Dockerfile搭建真正用于生产环境的项目。

原文链接:segmentfault.com

上一篇:编写小而美函数的艺术
下一篇:zepto与focus/blur与事件委派

相关推荐

官方社区

扫码加入 JavaScript 社区