Docker+Nginx部署Angular

在部署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 3c493d859707 10 days ago 55.6MB nginx 1.11-alpine bedece1f06cc 12 months ago 54.3MBdocker 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 #或者名字

總結

以上是生活随笔為你收集整理的Docker+Nginx部署Angular的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。