1.github上先下載create-react-app的原始碼
git clone https://github.com/facebook/create-react-app.git
執行ls查看一下并cd 進入該專案.
2.在專案根目錄下創建Dockerfile檔案,并撰寫以下內容
vi Dockerfile // 創建檔案
撰寫內容：
# node版本號
FROM node:15-alpine
# 作業目錄
WORKDIR /create-react-app
# 添加所有檔案到create-react-app目錄
ADD . /create-react-app
# 執行命令
RUN npm install && npm run build && npm install -g http-server
# 暴露埠號
EXPOSE 3000
# 容器啟動之后, 執行http-server 注：./build是指打包后的檔案
CMD http-server ./build -p 3000
3.創建image檔案
docker image build --progress plain -t create-react-app-demo .
執行成功后, 查看一下image檔案
4.從image檔案生成容器：
// 將Dockerfile中暴露出來的3000埠映射到本機的1234埠
docker container run -p 1234:3000 create-react-app-demo
然后在本地執行http://localhost:1234/， 成功～
是不是小有成就感？ 那你就錯了，正常作業里不會這么用哈哈哈哈，
看看運行的create-react-app的鏡像多大：docker images
嚇人！一個g…一般的前端專案打包過后的代碼也就幾十兆，然后你一個docker就要一個G？加載起來時間也很漫長…運維哭暈在廁所，還是看看怎么優化一下吧
利用鏡像快取
1.package.json算是相對穩定的吧，在沒有新的安裝包需要下載的時候，這個檔案是無需重新構建的吧？！ 好像有點道理，盤他！
vim Dockerfile重新修改一下配置資訊
# node版本號
FROM node:15-alpine
# 作業目錄
WORKDIR /create-react-app
# 添加所有檔案到create-react-app目錄
ADD package.json package-lock.json /create-react-app
ADD . /create-react-app
# 執行命令
RUN npm install && npm run build && npm install -g http-server
# 暴露埠號
EXPOSE 3000
# 容器啟動之后, 執行http-server 注：./public是指打包后的檔案
CMD http-server ./build -p 3000
每次修改完組態檔之后都需要重新構建鏡像：
docker image build --progress plain -t create-react-app-demo .
接下來利用ci代替npm install.ci會比npm install的執行速度快，而且當package.json跟package-lock.json不匹配時,ci會報例外
# node版本號
FROM node:15-alpine
# 作業目錄
WORKDIR /create-react-app
# 添加所有檔案到create-react-app目錄
ADD package.json package-lock.json /create-react-app
ADD . /create-react-app
# 執行命令
RUN npm ci
RUN npm run build && npm install -g http-server
# 暴露埠號
EXPOSE 3000
# 容器啟動之后, 執行http-server 注：./public是指打包后的檔案
CMD http-server ./build -p 3000
再重新構建一次鏡像
嗯，，，構建時間是優化了那么一點，接下來看看1G的體積吧 嚇人！！！！
體積那么大，基本都歸功于我們npm install的時候生成的node_module了吧，那把node_module搞掉，應該會小很多，試一波唄
我們只需要靜態生成的靜態資源，那就只提取編譯后的檔案,而且部署專案推薦用ngnix,所以這里也需要把http-server的鏡像干掉 ，改成用ngnix的，
那 再改改dockerfile組態檔，vim dockerfile
FROM node:15-alpine as builder
WORKDIR /create-react-app
ADD . /create-react-app
ADD package.json package-lock.json /create-react-app
RUN npm ci
RUN npm run build
FROM nginx:alpine
COPY --from=builder /create-react-app/build /usr/share/ngnix/html
ngnix/html是部署專案時需要添加編譯檔案的路徑，這里需要先抓取一下ngnix的image：
docker pull nginx:alpine
拉下來過后我們進入該容器看一下執行成功了沒docker run -it --rm nginx:alpine sh
成功之后我們再重新構建一下image
docker image build -t create-react-app-demo .
然后再執行docker images ，哈哈哈哈小成就感又來了～～～
總結：
鏡像中使用基于 alpine 的鏡像，減小鏡像體積，
鏡像中需要鎖定 node 的版本號，盡可能也鎖定 alpine 的版本號，如 node:15-alpine，
npm ci 替代 npm i，避免版本問題及提高依賴安裝速度
package.json 單獨添加，充分利用鏡像快取
只提取編譯檔案（多階段構建），減小鏡像體積
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/298088.html
標籤：其他
上一篇：常用網路命令：ping命令的使用