詳解angular應(yīng)用容器化部署
Intro
我自己有做一個個人主頁，雖然效果不怎么樣（不懂設(shè)計的典型程序猿...)，但是記錄了我對于前端框架及工具的一些實踐，
從開始只有一個 angularjs 制作的頁面到后面加入 less 動態(tài)寫css， gulp 自動化的將 less 文件編譯成 css 文件以及自動化的壓縮 js 和 css，到后面加入的基于 vue 和 angular 實現(xiàn)，主要維護的是基于 angular 的，目前 angular 的個人主頁已經(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;"]
整個 dockerfile 可分為兩部分，第一部分是編譯 angular 應(yīng)用，生成最后要部署的文件。
第二部分則是將生成的部分拷貝到基于 nginx 的環(huán)境中，部署到 nginx 中
打包 docker 鏡像
通過 docker build 命令打包 docker 鏡像，詳細命令使用參考 https://docs.docker.com/engine/reference/commandline/build/
docker build -t weihanli/homepage .
啟動容器
docker run
通過 docker run 命令啟動一個容器，部署打包好的鏡像，詳細命令使用參考 https://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 信息參考 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
項目源代碼： https://github.com/WeihanLi/weihanli.github.io
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解AngularJS2 Http服務(wù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了詳解如何構(gòu)建一個Angular6的第三方npm包,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
快速解決angularJS中用post方法時后臺拿不到值的問題
今天小編就為大家分享一篇快速解決angularJS中用post方法時后臺拿不到值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡單嘗試,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了AngularJS 自定義指令，這里整理了詳細的資料及簡單實例代碼，有需要的小伙伴可以參考下2016-09-09
使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學習到如何使用Angular 6來創(chuàng)建各種動畫效果。在此，我們將使用Visual Studio Code來進行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
使用Angular CLI進行Build(構(gòu)建)和Serve詳解
這篇文章主要介紹了使用Angular CLI進行Build(構(gòu)建)和Serve詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了AngularJS實現(xiàn)Input格式化的方法,結(jié)合實例形式分析了AngularJS實現(xiàn)Input格式化的操作步驟與相關(guān)注意事項,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了AngularJS 異步解決實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學習教程 ,文中通過多個示例代碼介紹的非常詳細，相信對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-04-04