脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular应用容器化部署

详解angular应用容器化部署

 更新时间：2018年08月14日 08:32:07   作者：WeihanLi  
这篇文章主要介绍了详解angular应用容器化部署，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Intro

我自己有做一个个人主页，虽然效果不怎么样（不懂设计的典型程序猿...)，但是记录了我对于前端框架及工具的一些实践，

从开始只有一个 angularjs 制作的页面到后面加入 less 动态写css， gulp 自动化的将 less 文件编译成 css 文件以及自动化的压缩 js 和 css，到后面加入的基于 vue 和 angular 实现，主要维护的是基于 angular 的，目前 angular 的个人主页已经支持 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 应用，生成最后要部署的文件。

第二部分则是将生成的部分拷贝到基于 nginx 的环境中，部署到 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"

访问容器中的应用

访问 http://localhost:5200 ，即可访问到容器中部署的应用

More

项目源代码： https://github.com/WeihanLi/weihanli.github.io

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解AngularJS2 Http服务

    详解AngularJS2 Http服务

    本篇文章主要介绍了详解AngularJS2 Http服务，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 详解如何构建一个Angular6的第三方npm包

    详解如何构建一个Angular6的第三方npm包

    这篇文章主要介绍了详解如何构建一个Angular6的第三方npm包,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 快速解决angularJS中用post方法时后台拿不到值的问题

    快速解决angularJS中用post方法时后台拿不到值的问题

    今天小编就为大家分享一篇快速解决angularJS中用post方法时后台拿不到值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angular多选表单数据绑定的简单尝试

    angular多选表单数据绑定的简单尝试

    AngularJS中数据绑定相信大家应该都不陌生了,这篇文章主要给大家介绍了关于angular多选表单数据绑定的简单尝试,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • AngularJS 自定义指令详解及实例代码

    AngularJS 自定义指令详解及实例代码

    这篇文章主要介绍了AngularJS 自定义指令，这里整理了详细的资料及简单实例代码，有需要的小伙伴可以参考下
    2016-09-09
  • 使用Angular 6创建各种动画效果的方法

    使用Angular 6创建各种动画效果的方法

    Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此，我们将使用Visual Studio Code来进行示例演示。感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • 使用Angular CLI进行Build(构建)和Serve详解

    使用Angular CLI进行Build(构建)和Serve详解

    这篇文章主要介绍了使用Angular CLI进行Build(构建)和Serve详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS实现Input格式化的方法

    AngularJS实现Input格式化的方法

    这篇文章主要介绍了AngularJS实现Input格式化的方法,结合实例形式分析了AngularJS实现Input格式化的操作步骤与相关注意事项,需要的朋友可以参考下
    2016-11-11
  • AngularJS 异步解决实现方法

    AngularJS 异步解决实现方法

    这篇文章主要介绍了AngularJS 异步解决实现方法的相关资料,需要的朋友可以参考下
    2017-06-06
  • Angular.Js之Scope作用域的学习教程

    Angular.Js之Scope作用域的学习教程

    这篇文章主要给大家分享了关于Angular.Js之Scope作用域的学习教程 ,文中通过多个示例代码介绍的非常详细，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-04-04

最新评论