使用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搭建真正用於生產環境的項目。