Docker 構建前端項目鏡像

參考資料：

1. Dockerfile reference
2. Docker CLI commands
3. Docker Hub
4. Docker 入門教程 - 阮一峰

 

一、使用 Docker 構建前端項目鏡像：

1. 下載安裝 Docker Desktop (建議電腦內存 8G+ 使用 Docker)
2. 准備一個 React / Vue / 其他 項目
3. 在項目的根目錄新建名為 Dockerfile 的文件 (語法請看參考資料1)
   
   Dockerfile 文件示例：
   

   FROM node:current-slim AS build
   COPY . /frontend
   WORKDIR /frontend
   RUN npm i --registry=https://registry.npm.taobao.org
   RUN npm run build
   
   FROM nginx
   COPY --from=build /frontend/<打包后的文件目錄>/ /usr/share/nginx/html/
   

    

4. 打開終端運行 Docker build 命令構建鏡像 （命令使用請看參考資料2, 注意：以下的命令都是在Dockerfile所在的目錄下執行）
   
   

   docker build -t name:tag .

   例：docker build -t demo:v0.0.1 .

   注意：name:tag name 是你要構建的鏡像名，tag 可設為版本號。最后的 . 代表你當前目錄
   
   

5. 啟動容器
   
   

   docker run -d -p 8080:80 --name name name:tag

   例：docker run -d -p 8080:80 --name demo demo:v0.0.1

   注意：name:tag 是你構建鏡像時設置的鏡像名和標簽，8080:80 代表 將本地的 8080 端口 映射到容器的 80 端口，--name name 代表給你啟動的容器起個名字
   
   

6. 打開瀏覽器，訪問 localhost:8080，頁面正常，則成功。

 

二、上傳到鏡像倉庫：

Push an image or a repository to a registry

1.  tag the image
   

   docker tag name:tag Repository:tag

   例：docker tag demo:v0.0.1 18001700016/demo:v0.0.1

   注意：name:tag 是你構建鏡像時設置的鏡像名和標簽，Repository:tag  Repository 代表倉庫地址, tag 可設為版本號
   
   

2. push the image to the registry
   

   docker push Repository:tag

   例：docker push 18001700016/demo:v0.0.1

   注意：Repository:tag 是第一步設置的