windows系統使用docker從0開始部署前端項目

docker是什麼？

能夠去看看阮一峯老師的文章：Docker入門教程，下文不對概念作過多解釋，直接上實戰步驟。

1、下載安裝docker💿

系統： windows10

在docker官網下載windows版本的安裝包安裝，下載完成後雙擊打開，點擊下一步下一步安裝便可。

校驗是否安裝成功

1. 使用window + R，打開運行。
2. 輸入cmd，回車打開cmd。
3. 輸入命令docker --version，看到顯示打印出docker版本號就說明安裝成功了。

   

2、準備一個前端項目📁

這裏使用 create-react-app腳手架建立一個新的項目。

1. 打開cmd運行命令，建立一個名爲docker-demo的項目。

   npx create-react-app docker-demo

2. 在項目根目錄新建scripts文件夾，再新建server.js。用於編寫node服務器，運行打包後的代碼。
3. 在根目錄建立Dockerfile文件，用於運行指定建立鏡像時要運行的docker命令。
4. 在根目錄建立.dockerignore文件，用於加入docker忽略文件。

建立完成後的目錄結構以下：

3、編寫node服務器📫

在server.js文件中加入以下代碼：

const express = require("express"); //引入express模塊
const path = require("path"); //引入path模塊

const app = new express(); //建立一個express實例

app.use(express.static(path.join(__dirname, "../build"))); //監聽build文件夾下的文件

//監聽8080端口
app.listen(8080, function() {
  console.log(path.join(__dirname, "../build"));
  console.log("服務器已啓動");
});

4、編寫Dockerfile🐋

1. 在編寫Dockerfile文件中加入以下代碼：

   # 使用最新的長期維護版本node做爲基礎鏡像
   FROM node:lts
   
   # 將當期目錄下的文件拷貝到linux系統的app文件夾下
   COPY . /app/
   
   # 使用app文件夾做爲工做目錄
   WORKDIR /app
   
   # 設置npm的鏡像爲淘寶鏡像，安裝依賴
   RUN npm config set registry https://registry.npm.taobao.org && npm install
   
   # 運行build命令 
   RUN npm run build
   
   # 暴露docker容器的80端口
   EXPOSE 80
   
   # 運行docker腳本命令
   CMD [ "npm", "run", "docker" ]

2. 在package.json文件中加入sciprts命令:

   "docker": "node ./scripts/server"

   

3. 在.dockerignore加入以下代碼：

   node_modules
   .git

5、部署docker🐳

1. 運行docker，雙擊Docker Desktop圖標。

   

   啓動須要等一段時間，在任務欄,將鼠標放在docker圖標上,看到Docker Desktop is running說明運行成功了。

   

2. 打包鏡像，在項目根目錄運行命令，這個命令也要跑好久，能夠先去泡杯枸杞菊花茶🍺：

   docker image build -t docker-demo .

   看到Successfully built字樣說明打包成功了。

   

3. 使用鏡像運行一個容器:

   docker container run --publish 80:8080 --detach --name dd docker-demo

   運行成功會出來一串hash值

   

4. 最後打開瀏覽器，輸入localhost就可看到頁面啦😀

   

後記🙄

若是要實現代碼自動化打包部署，這只是其中的一步，還要結合jenkins使用。

自動部署就是在你提交代碼以後，就能在服務器觸發代碼打包和運行，不再用進行手動打包代碼、提交代碼這種重複又沒有意義的工做，極大地解放了勞動力🙉。

最後附上經常使用docker命令:

將當前文件夾下的文件打包成一個鏡像文件

docker image build -t [標籤名稱] .

運行container

docker container run --publish [暴露接口]:[程序運行接口] --detach --name [container名稱] [image名稱]

查看本機全部的image文件

docker image ls

從docker hub拉取image文件

docker image pull [倉庫名]

關閉容器

docker container kill [容器id]

列出本機正在運行的容器

docker container ls

列出本機全部容器，包括終止運行的容器

docker container ls --all

刪除容器

docker container rm [containerID]