When we develop the Angular app inside Docker container, we can simulate Production envioment by build Angualr App instead of using 'ng serve':

ng build --watch --delete-output-path false

'--delete-output-path false': tells it do not delete the dist folder when doing the build.

nginx.dockerfile file:

FROM nginx:alpine
LABEL author="Dan Wahlin"
COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf # Use the following commands to build the image and run the container (run from the root folder)
# 1. You'll first need to build the project using `ng build --watch --delete-output-path false` # 2. Now build the Docker image:
# docker build -t nginx-angular -f nginx.dockerfile . #3. Run the Docker container:
# To run the container we'll create a volume to point to our local source code. On Mac
# you can use $(pwd) to reference your local folder where your running Docker commands from.
# If you're on Windows there are several options to point to the folder. See my following post:
# https://blog.codewithdan.com/2017/10/25/docker-volumes-and-print-working-directory-pwd/ # docker run -p 8080:80 -v $(pwd)/dist:/usr/share/nginx/html nginx-angular

[Angular CLI] Build application without remove dist folder for Docker Volume的更多相关文章

  1. 使用 Angular CLI 和 Webpack 分析包尺寸

    使用 Angular CLI 和 Webpack 分析包尺寸 对于 Web app 来说,高性能总是最高优先级,对于 Angular 也不例外.但是随着应用复杂度的不断增长,我们如何才能知道哪些内容打 ...

  2. 使用Angular CLI进行Build (构建) 和 Serve

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  3. [转]How to Add Bootstrap to an Angular CLI project

    本文转自:https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ In this article we w ...

  4. 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  5. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  6. Angular CLI behind the scenes, part one

    原文:https://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art074 --------------------------- ...

  7. Using Sass with the Angular CLI

    https://www.tuicool.com/articles/mauiMzY One of the first things you'll usually do in a project is t ...

  8. Angular CLI 升级 6.0 之后遇到的问题

    Angular CLI 1.7.4 在使用 ng build --prod 会构建失败,而 ng build 是正常的.比较好的解决办法是使用 ng build --prod --extract-li ...

  9. .Net Core + Angular Cli / Angular4 开发环境搭建

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm  ...

随机推荐

  1. .net下的span和memory

    .net core 2.1的重头戏就是性能,其中最重要的两个类就是span和memory,本文这里简单的介绍一下这两个类的使用. 什么是 Span<T> Span<T> 是新一 ...

  2. STM32 GPIO 配置之ODR, BSRR, BRR 详解

    STM32 GPIO 配置之ODR, BSRR, BRR 详解 用stm32 的配置GPIO 来控制LED 显示状态,可用ODR,BSRR,BRR 直接来控制引脚输出状态. ODR寄存器可读可写:既能 ...

  3. Snmp学习总结(五)——WindowsServer2008安装和配置SNMP

    一.安装SNMP 在Windows Server 2008以及Windows Server 2008 R2中,SNMP是以一个服务器功能的形式存在的,SNMP的安装步骤如下所示: 1.打开[开始]→[ ...

  4. ASP.NET MVC与Sql Server建立连接

    用惯了使用Entity Framework连接数据库,本篇就来体验使用SqlConnection连接数据库. 打开Sql Server 2008,创建数据库,创建如下表: create table P ...

  5. 咏南Mormot中间件接口

    咏南Mormot中间件接口 只使用了MORMOT的HTTPS.SYS作为通讯,数据引擎使用FIREDAC,数据序列/还原是自行封装. 客户端支持FDMemeTable和ClientDataSet数据集 ...

  6. 图标框架Font Awesome

    直接引入Font Awesome的css <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. Netbeans 安装emmet插件

    一.下载插件 http://plugins.netbeans.org/plugin/48315/emmet 二.点击工具-> 插件 -> 已下载 -> 添加插件 ->(导入下载 ...

  8. python测试开发django-34.xadmin管理后台

    前言 django自带的admin后台管理页面有点丑陋,于是网上的大神优化了一版后台管理xadmin,并且开源了,在github开源下载到源码. 注意环境搭配: django 2.1.2 xadmin ...

  9. YII框架分析笔记2:组件和事件行为管理

    Yii是一个基于组件.用于开发大型 Web 应用的高性能 PHP 框架.CComponent几乎是所有类的基类,它控制着组件与事件的管理,其方法与属性如下,私有变量$_e数据存放事件(evnet,有些 ...

  10. jQuery Ajax 上传文件夹及文件

    我们先来看一下文件夹结构 这是上传处理的: 看一下系统日志: 升级 HTML5文件实现拖拽上传提示效果改进(支持三种状态提示) 拖拽过程详解: 1:文件未拖出文件选择框的时候提示:将要上传的文件或文件 ...