利用docker搭建前端開發環境

前言

因爲去年的燒烤攤營收達預期，燒烤哥給本身買了臺新電腦。但新電腦上啥都沒有，致使晚上收攤後回去沒法加班，非常苦惱。javascript

爲了避免影響燒烤攤今年的業績，燒烤哥仍是在本身的遊戲本（玩遊戲的本子）上搭起了一個前端開發環境。前端

怎麼搭？

面臨的一個問題就是，該怎麼搭這個環境？java

咱們先來捋一捋，燒烤哥的業務涉及到web開發、taro小程序。因此只要電腦上有node、git，而後再利用npm去安裝一些全局庫（如typescript、taro-cli等）不就能夠了嘛？node

確實如此，但燒烤哥不是一個容易知足的人，否則也不會去搞燒烤了。react

在燒烤哥的認知範圍內，有以下方式能夠搭建一個開發環境。 linux

直接安裝不考慮，屬於燒烤哥能力圈的溫馨區（能力圈能夠分爲溫馨區、拉伸區和困難區，處在拉伸區時我的成長最快），作了等於浪費時間。虛擬機呢估計每次啓動環境得先花個半小時（誇張修辭手法）也不考慮。而使用docker呢，正好處於燒烤哥的拉伸區，很是值得嘗試。git

初探docker

原本開發，只要能speak javascript就ok了，如今還要能speak docker。web

docker的一些概念

docker是什麼就很少說了，先來了解下本文會涉及到的一些概念。docker

image：鏡像，是一個只讀模版，用來建立容器。
container: 容器，是一個可運行的鏡像實例。
Dockerfile: 鏡像構建的模版，描述鏡像構建的步驟。

因此它們之間的關係是，經過Dockerfile構建出鏡像，而後經過鏡像來建立容器，程序就跑在容器中。而且一個鏡像能夠隨意建立N個容器，各個容器間相互隔離。typescript

寫一個hello world

來作個demo，寫一個hello world的node程序，而後在容器裏面跑該程序。

照葫蘆畫瓢，編寫代碼文件index.js -> 編寫Dockerfile -> image -> container.

編寫代碼文件

建立一個docker-test目錄，在裏面新建一個index.js，鍵入如下指令

console.log('hello world');
複製代碼

編寫Dockerfile

繼續在裏面新建一個Dockerfile文件（不須要後綴），鍵入如下指令

FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
CMD node index.js
複製代碼

簡單解釋一下這幾個指令。

FROM node:15.10.0-slim 就是說咱們的鏡像會繼承 node:15.10.0-slim 這個鏡像，這個鏡像在哪裏找呢？沒錯，你可能也猜到了，在Docker交流網站Docker Hub中。

COPY . ./demo 是把當前目錄拷貝到鏡像的/demo目錄下，固然你也可使用.dockerignore來排除你不須要打包的文件。

WORKDIR /demo 相似於 cd /demo。

CMD node index.js 容器啓動後執行node index.js命令。

構建鏡像

在bash中運行 docker image build -t demo .

構建好以後，運行docker image ls就能夠查看到demo鏡像了。

運行容器

運行docker container run demo，不出意外你會在hello world打印出來。

docker說到這裏就差很少了，下面咱們來看看如何搭建開發環境。

搭建開發環境

咱們的開發環境須要全局安裝有node、git、typescript、taro-cli。

先讓項目跑起來

咱們先讓項目在本地跑起來，假設機器上已經有了一個項目，該項目是用create-react-app建立的項目。

總體步驟跟上面的demo是一致的，只是把index.js替換成了項目文件，還有一個區別是因爲是開發運行（不是構建項目後運行），因此咱們須要安裝package.json中的依賴。

其實總體區別只在Dockerfile，下面來看看Dockerfile。

FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
RUN npm install
CMD npm run start
複製代碼

構建iamge：docker image build -t react-demo .。

運行容器： docker container run -p 3000:3000 react-demo。

這裏運行容器時須要指定-p參數將容器的3000端口映射到本機的3000端口。

此時，react項目就跑起來了。

存在問題

能夠看到，按開發的模式來講，這樣是存在問題的。好比：

將代碼打包進鏡像中，每次修改代碼都必需要從新構建鏡像
打包出來的鏡像指包含node環境，缺乏開發時須要的依賴

咱們但願的是，經過容器來提供開發時須要的依賴，而後經過vscode修改的代碼實時跑在容器中。

解決

構建本身開發鏡像

要讓咱們的鏡像提供開發時須要的依賴，其實就是讓咱們的鏡像包含node(typescript、taro-cli)、git就好了。

其實咱們以前的node鏡像node:15.10.0-slim啓動後的容器，能夠當作一個只帶有node環境虛擬化的linux虛擬系統，咱們能夠進入到容器裏面去看看，運行docker container run -it node:15.10.0-slim /bin/bash就能夠進入到容器的bash中。

因此只須要依賴現有的node鏡像，並在構建咱們的鏡像時安裝須要的程序便可。來看看Dockerfile。

FROM node:15.10.0-slim
RUN apt-get update && apt-get install -y git
RUN npm install -g typescript @tarojs/cli
複製代碼

此次咱們沒有把代碼打包到鏡像中了，而是執行了apt-get upgrade && apt-get install git 和 npm install -g typescript @taro-cli兩個命令。

構建鏡像：docker image build -t frontend-dev .。

運行容器: docker container run -it frontend-dev /bin/bash。

進入到容器，就能夠看到咱們安裝的程序了。

此時，咱們的鏡像就已經具有開發時須要的環境了。

掛載點

docker提供了掛載點，可讓容器訪問咱們本機的文件系統。

只須要在咱們的項目中啓動容器時指定-v 參數就行，即docker container run -v "${pwd}:/demo" -it frontend-dev /bin/bash。

你會發現咱們的frontend-dev鏡像啓動的容器中多了/demo目錄，並且進去裏面能夠看到就是咱們的項目。

而後在/demo目錄中執行項目啓動命令npm run start，咱們的項目就運行起來了。

這時你就可使用vscode修改咱們的項目代碼了，全部的修改都會跟/demo目錄同步。

此時，咱們的鏡像就只作環境依賴做用了，咱們也能夠愉快的加班了。

不過你們確定會說，這種方式好是好，可是也太麻煩了吧。

利用vscode

Remote-Containers

其實咱們上面作的，vscode有對應的插件已經幫咱們完成了。

怎麼用？

用三張圖告訴你怎麼用。

只要你機器裝了docker，按上面三步走下來，你的代碼就在容器中了。

你們確定又要說了，燒烤哥你怎麼不早說啊？

由於燒烤哥想說，其實上面說的都不重要。對！你沒聽錯，是都不重要。

一個想法

其實燒烤哥這篇文章想說的，是有一個想法。

Remote-SSH

咱們先再來看一個東西，一個vscode的插件。

看名字就能知道這個插件是幹啥的，它能讓咱們利用vscode經過ssh登陸到一個遠程機器上，登陸上去以後看到的目錄就是遠程目錄了，而且對文件的修改，都是實實在在的修改遠程機器上的文件。

這也就意味着咱們能夠經過vscode從本地直接編輯遠程服務器的文件。

想法

結合上述說的，燒烤哥有個想法，就是：

利用linux系統的多用戶多任務特色，和docker快速搭建、遷移環境的能力，團隊在一個遠程機器上進行業務開發。

這樣作的優勢是：

方便複製環境：有新人來時，只須要在遠程機器上爲ta開一個帳戶，而後把鏡像(或Dockerfile)給ta，一個新的我的開發環境就搭建好了。
方便統一環境：團隊中你們可使用同一個image，有須要時，能夠統一對環境依賴進行更換或升級。
方便隨時隨地加班：在遠程開發的話，對本地終端基本就沒有什麼限制了。本地裝個vscode（甚至是有個瀏覽器）就能隨時隨地愉快的加班了。

最後

想說的都放在文章裏了，燒烤哥也該去加班了。

若是決定對您有幫助的話，麻煩點個贊吧～！