Docker+Nginx部署Angular
阿新 • • 發佈：2018-11-27
在部署Angular生產環境之前，需要電腦已經安裝docker。
新增Dockerfile
在已經完成的Angular專案的專案根目錄下新增Dockerfile檔案。
Dockerfile檔案內容：
FROM nginx:1.11-1.11-alpine COPY index.html /usr/share/nginx/html/index.html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
編譯Angular
ng build --prod
此時會在專案目錄下生成dist資料夾，裡面是我們專案打包之後的檔案。
然後將Dockerfile檔案複製到dist目錄下，並修改。
FROM nginx:1.11-1.11-alpine COPY . /usr/share/nginx/html/index.html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
然後進入dist目錄下
cd dist
建立docker映象
docker build -t angular5
檢視當前所有映象和執行的容器
docker images
# 顯示結果
REPOSITORY TAG IMAGE ID CREATED SIZE nginx latest c5c4e8fa2cf7 5 days ago 109MB angular5 latest 3c493d85970710 days ago 55.6MB nginx 1.11-alpine bedece1f06cc 12 months ago 54.3MB
docker ps
# 顯示結果
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
執行映象
埠不要和本地埠衝突，比如如果8082被使用，請更換
docker run -d --name demo1 -p 8082:80 angular5
# 成功結果
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
bddc01ddf0a3 nginx "nginx -g 'daemon of…" 1 minutes ago Up 3 seconds 0.0.0.0:8082->80/tcp demo1
瀏覽器訪問：127.0.0.1:8082即可訪問。
停止執行
docker stop bddc01ddf0a3 # 這個是id可以使用前幾位，或者使用NAMES demo1
啟動一個容器
docker ps -a #檢視所有容器
docker start bddc01ddf0a3 #或者名字