使用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搭建真正用于生产环境的项目。