詳解angular應(yīng)用容器化部署
Intro
我自己有做一個(gè)個(gè)人主頁，雖然效果不怎么樣（不懂設(shè)計(jì)的典型程序猿...)，但是記錄了我對(duì)于前端框架及工具的一些實(shí)踐，
從開始只有一個(gè) angularjs 制作的頁面到后面加入 less 動(dòng)態(tài)寫css， gulp 自動(dòng)化的將 less 文件編譯成 css 文件以及自動(dòng)化的壓縮 js 和 css，到后面加入的基于 vue 和 angular 實(shí)現(xiàn)，主要維護(hù)的是基于 angular 的，目前 angular 的個(gè)人主頁已經(jīng)支持 PWA（Progressive Web Application）,前幾天添加了 docker 部署的支持，記錄一篇文章記錄一下。
編寫 dockerfile
完整的 dockerfile 如下：
FROM node # set working directory WORKDIR /app # install and cache app dependencies COPY . /app # install dependencies and build the angular app RUN yarn && yarn run build FROM nginx:stable-alpine # copy from dist to nginx root dir COPY --from=builder /app/dist/weihanli /usr/share/nginx/html # expose port 80 EXPOSE 80 # set author info LABEL maintainer="WeihanLi" # run nginx in foreground # https://stackoverflow.com/questions/18861300/how-to-run-nginx-within-a-docker-container-without-halting CMD ["nginx", "-g", "daemon off;"]
整個(gè) dockerfile 可分為兩部分，第一部分是編譯 angular 應(yīng)用，生成最后要部署的文件。
第二部分則是將生成的部分拷貝到基于 nginx 的環(huán)境中，部署到 nginx 中
打包 docker 鏡像
通過 docker build 命令打包 docker 鏡像，詳細(xì)命令使用參考 https://docs.docker.com/engine/reference/commandline/build/
docker build -t weihanli/homepage .
啟動(dòng)容器
docker run
通過 docker run 命令啟動(dòng)一個(gè)容器，部署打包好的鏡像，詳細(xì)命令使用參考 https://docs.docker.com/engine/reference/commandline/run/
docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage
docker compose
通過 docker-compose.yml 啟動(dòng)容器，啟動(dòng)命令： docker-compose up
更多 compose 信息參考 https://docs.docker.com/compose/compose-file
docker-compose.yml 文件如下：
version: "3"
services:
web:
image: "weihanli/homepage"
container_name: "weihanli-homepage-demo"
ports:
- "5200:80"
訪問容器中的應(yīng)用
訪問 http://localhost:5200 ，即可訪問到容器中部署的應(yīng)用
More
項(xiàng)目源代碼： https://github.com/WeihanLi/weihanli.github.io
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS的Routing路由的定義與使用,講解了when()和otherwise()兩個(gè)相關(guān)的常用方法,需要的朋友可以參考下2016-03-03
AngularJS 實(shí)現(xiàn)彈性盒子布局的方法
本文給大家?guī)硪欢魏喍檀a實(shí)現(xiàn)angularjs彈性布局效果，非常實(shí)用，對(duì)angularjs彈出布局知識(shí)感興趣的朋友可以參考下2016-08-08
在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，對(duì)angularjs 谷歌地圖相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
AngularJS學(xué)習(xí)筆記之TodoMVC的分析
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之TodoMVC的分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了Angular使用Md5加密的解決方法,需要的朋友可以參考下2017-09-09
AngularJS基礎(chǔ) ng-class-odd 指令示例
本文主要介紹AngularJS ng-class-odd 指令,這里對(duì)ng-class-odd基礎(chǔ)知識(shí)做了詳細(xì)整理,并有示例代碼和效果圖,學(xué)習(xí)AngularJS的同學(xué)可以參考下2016-08-08
本篇文章主要介紹了詳解Angular 4 表單快速入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了angular 中的自定義指令之詳解API，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了angular多語言配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05