在Docker环境中，将Angular和AngularJS实现热重载

11 月 ago
雅, 悟
2 minutes

Angular在不同版本中有不同的称呼。

以下是如下所述的情况：
AngularJS（1.x 系列）
Angular（2.0 系列至最新版本）

想做的事情

使用Docker和Angular，当本地文件发生更改时，在容器中也可以实现热重载，使开发更加便捷。

这次居然带了 AngularJS！(谁会需要)

请告诉我这个该怎么称呼 orz

不確定是否有正式名稱，但當本地文件被修改時，使用熱重載可以方便進行開發。

以下我们将称之为「容器的热重载」。

总结一下

在Docker中运行Angular（8.3.0）
附录：包含AngularJS（1.7.9）

假设

    • Angular → angular cli で生成した新規プロジェクト

 

    AngularJS → webpack で構築された既存プロジェクト

环境


Angular: 8.3.0
Angular CLI: 8.3.20
Docker desktop: 2.1.0.5

AngularJS: 1.7.9
Webpack: 4.41.2

积分 (jī

将0.0.0.0传递给主机。

这两个都是使用webpack运行的，对吧？

使用docker-compose.yml文件来配置卷

在中国市场中，我们应该排除 .dockerignore、volumes 和 node_modules。

Angular的容器实时重新加载的流程

    1. 安装 Angular CLI

 

    1. 创建新项目

 

    1. 添加 Dockerfile 和 .dockerignore 文件

 

    1. 添加 docker-compose.yml 文件

 

    辛苦了

安装 angular-cli

建议使用公式提供的 angular-cli 工具来创建新项目，
推荐使用 brew 进行安装。

如果已经安装了 angular-cli，请跳过此步骤。

brew install angular-cli

确认是否安装了Angular CLI。

ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.20
〜〜以下省略〜〜

创建一个新的 angular 项目。

试着传递参数 –enableIvy=true，可以在版本8.1中使用Ivy并进行快速渲染。

ng new angular-sample --enableIvy=true

添加 Dockerfile 和 .dockerignore。

为了加快构建速度，请记得添加 Dockerfile 和 .dockerignore。

Dockerfile 可以参考下述的中文表达方式：
“`
dockerfile文件
“`

# 現バージョンでは、10.9.0以降を推奨しているので、nodeのstableの12系の最新を使用
# https://angular.jp/guide/setup-local#nodejs
FROM node:12.13.1

# ローカルフォルダのファイルを置いていくフォルダ作成
RUN mkdir /usr/src/app

# package.json と package.lockをコピー
COPY ./package*.json /usr/src/app/

# yarnの人はこちらもコピー
COPY ./yarn.lock /usr/src/app/

# yarn install する箇所を
WORKDIR /usr/src/app/

# yarn使用している人は yarn.lock を元にインストールする yarn install --frozen-lockfile でもいいと思います
RUN npm ci

# ローカルのファイルすべてコピー
COPY . /usr/src/app/

# docker上でコピーした angular-cli で ビルド実行
RUN npx ng build --aot

.dockerignore -> .dockerignore 文件

node_modules

Dockerfile只是用来构建的！

请试试能否顺利构建没有问题

docker build --rm .

如果成功构建了4f89bd9818ae（类似哈希值的东西），我认为就可以确认OK。

使用docker-compose.yml文件启动服务器。

4. 添加 docker-compose.yml

重要的要点 de

    • volumes の- $PWD/:/usr/src/appでローカルのファイルを上書きしている

 

    • だけど、node_modules はビルド遅くなるので除外している

 

    command で　–host=0.0.0.0を渡してる(恐らく webpack に渡している)
version: '3.7'

services:
  anguar-app:
    image: anguar-app
    build:
      context: $PWD/
    ports:
      - '4201:4200'
    volumes:
      - $PWD/:/usr/src/app
      - /usr/src/app/node_modules # node_modulesは除外
    command: npx ng serve --aot --host=0.0.0.0

5. 辛苦了

设定已完成，辛苦了

我们来确认一下是否会反映本地的更改。


docker-compose up -d;\
sleep 3;\
open http://localhost:4201;

在后台运行 docker-compose
↓
等待 3 秒
↓
在浏览器中打开 localhost

如果在没有任何更改的情况下启动，它会保持默认的Angular界面。

1.png

让我们尝试做一些本地的修改。

这次我们试着用 echo 命令覆盖本地文件吧。

echo "<h1>反映やっほー</h1>" > ./src/app/app.component.html
2.png

只需更新文件，屏幕即可反映，完成了。

隨附文件

使用AngularJS（在webpack的前提下），对容器进行热重载的步骤是什么？

    1. 我使用webpack-dev-server来运行它。

 

    1. 添加了Dockerfile、dockerignore。

 

    1. 添加了docker-compose.yml。

 

    辛苦了。

0. 我们正在使用这个来运行 webpack-dev-server。

只需参考devServer这一部分就可以了。

要将容器实现热重载，只需传递host: ‘0.0.0.0’即可成功实现。

const path = require('path');
const webpack = require('webpack');

const NODE_ENV = process.env.NODE_ENV;
console.log(`${NODE_ENV} modeで実行`);

module.exports = {
  mode: NODE_ENV,
  entry: path.join(__dirname, 'src/app/entry.ts'),
  output: {
    filename: 'bundle[hash].js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name][hash].js',
    publicPath: '',
  },
  module: (省略),
  resolve: (省略),
  devtool: (省略),
  optimization: (省略),
  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'dist'),
    publicPath: 'http://localhost:8080/',
    host: '0.0.0.0',
    port: 8080,
    stats: 'minimal',
    hot: true,
    inline: true,
    proxy: (省略)
  },
  plugins:(省略),
}

添加 Dockerfile 和 Dockerignore.

在现有的项目中，前提是使用 webpack-dev-server 进行开发，可以说是必然的，也可以说是奇迹的。
Dockerfile 和 .dockerignore 文件是一样的，唯一不同的是构建命令。
无论是使用 node 的版本 12.13.0 还是 typescript 的版本 3.7.2，在项目中都可以正常运行，没有问题。


# dockerfile
〜Angularと一緒のため省略〜

# docker上でコピーした angular-cli で ビルド実行
RUN NODE_ENV=production npm run webpack

追加 docker-compose.yml 文件。


services:
  spa-dev:
    build:
      context: $PWD/
    image: spa-dev
    ports:
      - '8080:8080'
    volumes:
      - $PWD/:/usr/src/app
      - /usr/src/app/node_modules # node_modulesは除外
    command: NODE_ENV=development npm run webpack-dev-server

3. 辛苦了

请在您现有的项目中进行验证。

顺便提一下，在上述的 Docker 设置中。

AngularJS（1.7.9）
typescript（3.7.2）
webpack（4.41.2）
webpack-dev-server（3.9.0）正常运行。

后记

有关将现有的AngularJS替换为Angular的讨论已经出现，但由于代码量较大，替换所需的工作量和业务影响尚未得出决定。

虽然不是最新版本的Angular项目，但我仍然希望能接触最新的前端技术，因此我用AngularJS来编写新功能，并通过组件编写方式来维护项目。

在进行了Docker化后，我们在AWS上完成了ECR和ECS的部署，并使用CircleCI的Orbs来进行持续集成。

所以，除了框架的版本之外，我觉得技术趋势终于迎头赶上了。

我考虑过使用Angular Element逐步迁移AngularJS到Angular，可以按功能模块或领域进行。但由于现有代码较多，并且需要考虑业务影响是否相符。不过，个人觉得Angular还是很好的，因为我个人已经在使用它。

虽然我认为处于相同境遇的人很少，但是我误以为一旦将自己的项目容器化，本地环境就无法实现热重载，从而失去了开发的便利性，所以我之前一直觉得容器化是后续的事情！但是只需设置上述主机，就能轻松实现热重载！

如果对于像webpack等与热重载无关的部分有疑问的话，请随时提问！