在Docker环境中,将Angular和AngularJS实现热重载
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的容器实时重新加载的流程
-
- 安装 Angular CLI
-
- 创建新项目
-
- 添加 Dockerfile 和 .dockerignore 文件
-
- 添加 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](https://cdn.silicloud.com/blog-img/blog/img/657d387d37434c4406c76374/51-0.png)
让我们尝试做一些本地的修改。
这次我们试着用 echo 命令覆盖本地文件吧。
echo "<h1>反映やっほー</h1>" > ./src/app/app.component.html
![2.png](https://cdn.silicloud.com/blog-img/blog/img/657d387d37434c4406c76374/55-0.png)
只需更新文件,屏幕即可反映,完成了。
隨附文件
使用AngularJS(在webpack的前提下),对容器进行热重载的步骤是什么?
-
- 我使用webpack-dev-server来运行它。
-
- 添加了Dockerfile、dockerignore。
-
- 添加了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等与热重载无关的部分有疑问的话,请随时提问!