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

摘要：它使用作为其开发语言。关于为了避免环境搭建污染我的，我选择将我的开发环境限制在一个容器中，同时避免了自制软件和不可逆的本地安装程序。我们将使用来构建一个新的镜像创建一个新的。下一篇文章将详细介绍如何用搭建真正用于生产环境的项目。

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

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

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

为了避免环境搭建污染我的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

npm install -g ionic
exit

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

# Get your CONTAINER_ID
docker ps -a

# Save your container as a new image
docker commit -a "YOUR_NAME " -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搭建真正用于生产环境的项目。