[Web] Angular + Docker 實作
Docker 的安裝就直接略過了。（因為操作中沒遇到什麼困難，很快就好了）
Docker的操作基本上都在自己要移植的程式的路徑底下執行指令。
包好後會存在Docker安裝的資料夾裡。（實際要google一下，因應作業系統版本的不同。儲存的路徑也會不一樣）
包的方式是直接把自己的所有Angular的檔案放到要移植的電腦，並且以那台電腦做Docker的執行。完成後就可以讓自己的程式順利的在其他電腦上執行。
1. 在程式的路徑下建立一個檔案叫做Dockerfile
建立好後在裡面輸入以下指令
FROM node:14.7.0-alpine As builderapp
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod
FROM nginx:1.19-alpine
COPY --from=builderapp /usr/src/app/dist/Nathan-Angular/ /usr/share/nginx/html
儲存好後，就可以開始執行打包的作業囉
2. 下指令打包
假設說你的Angular 當初建立的名稱是 nathan-angular
在要打包的路徑下輸入指令
docker build . -t nathan-angular
打包完成後會顯示
Successfully built 7ffcaXXXXX
Successfully tagged nathan-angular:latest
3. 查看打包完成的檔案
下指令
docker images （會列出目前有的image檔案，經以上執行完後會有打包的檔案）
REPOSITORY TAG IMAGE ID CREATED SIZE
<none> <none> 25494bfc53e1 43 seconds ago 1.29GB
nathan-angular latest 7ffcadf6cc05 43 seconds ago 41.4MB
nathan-express latest e4e43b8603b9 44 hours ago 83.7MB
docker-demo-app latest 50610d686f12 2 days ago 74.3MB
docker run --name nathan-angular -d -p 8088:80 nathan-angular
這邊的8088代表自己的電腦port 8088 對應到虛擬機的80 port.
執行後會跳出一段字碼，我的如下：
2d8acc94420daabdaccb9509da8dc51149dad9cb669b701b0df5a4bb9110b681
之後打開自己的 http://localhost:8088/
之前寫好的前端網頁就可以正常執行了。
執行後想要關閉正在執行的container的話，記得輸入
docker ps (-a)
會列出在執行的container (加入-a會列出全部的container)， 裡面會有剛剛我們執行的nathan-angular，配合對應的ID
輸入以下指令就可以停用與刪除
docker stop container_id
docker rm container_id
PS: 不停用的話無法對image做刪除的動作喔。
5. 刪除己打包好的image
我在打包的過程式會產生（原因不是很清楚）
<none> <none> 25494bfc53e1 43 seconds ago 1.29GB
如果要刪除這種none名稱的image的話輸入以下指令
docker images|grep none|awk '{print $3 }'|xargs docker rmi
如果有要刪除確定名稱的image檔的話，假設說要刪除剛剛建立好的nathan-angular
docker rmi nathan-angular:latest
PS: latest指的是TAG
參考 reference:
主參考
https://blog.comtradedigital.com/blog/lets-make-a-docker-image
打包成docker檔
https://github.com/HcwXd/docker-tutorial
刪除none名稱的image
https://www.itread01.com/content/1549609234.html
刪除正常名稱的image
刪除與停用container
留言
張貼留言