angular應用程式容器化部署

angular 應用程式容器化部署Intro

我自己有做一個個人首頁，雖然效果不怎麼樣（不懂設計的典型程式猿...)，但是記錄了我對於前端架構及工具的一些實踐，
從開始只有一個 angularjs 製作的頁面到後面加入 less 動態寫css， gulp 自動化的將 less 檔案編譯成 css 檔案以及自動化的壓縮 js 和 css，到後面加入的基於 vue 和 angular 實現，主要維護的是基於 angular 的，目前 angular 的個人首頁已經支援 PWA（Progressive Web Application）,前幾天添加了 docker 部署的支援，記錄一篇文章記錄一下。

個人首頁體驗地址：weihanli.xyz

編寫 dockerfile

完整的 dockerfile 如下：

FROM node# set working directoryWORKDIR /app# install and cache app dependenciesCOPY . /app# install dependencies and build the angular appRUN yarn && yarn run buildFROM nginx:stable-alpine# copy from dist to nginx root dirCOPY --from=builder /app/dist/weihanli /usr/share/nginx/html# expose port 80EXPOSE 80# set author infoLABEL maintainer="WeihanLi"# run nginx in foreground# stackoverflow.com/questions/18861300/how-to-run-nginx-within-a-docker-container-without-haltingCMD ["nginx", "-g", "daemon off;"]

整個 dockerfile 可分為兩部分，第一部分是編譯 angular 應用，產生最後要部署的檔案。
第二部分則是將產生的部分拷貝到基於 nginx 的環境中，部署到 nginx 中

打包 docker 鏡像

通過 docker build 命令打包 docker 鏡像，詳細命令使用參考 docs.docker.com/engine/reference/commandline/build/

docker build -t weihanli/homepage .

啟動容器docker run

通過 docker run 命令啟動一個容器，部署打包好的鏡像，詳細命令使用參考 docs.docker.com/engine/reference/commandline/run/

docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage

docker compose

通過 docker-compose.yml 啟動容器，啟動命令：docker-compose up

更多 compose 資訊參考 docs.docker.com/compose/compose-file

docker-compose.yml 檔案如下：

version: "3"services:  web:    image: "weihanli/homepage"    container_name: "weihanli-homepage-demo"    ports:        - "5200:80"

訪問容器中的應用

訪問 http://localhost:5200 ，即可訪問到容器中部署的應用

More

項目原始碼：github.com/WeihanLi/weihanli.github.io

Contact

Contact me: weihanli@outlook.com