在 Docker 容器中创建并运行 Angular 应用程序简介先决条件入门结论

2025-05-27

在 Docker 容器中创建并运行 Angular 应用程序

介绍

先决条件

入门

结论

介绍

在本文中，将使用最新版本的Angular创建一个 WEB 应用程序，创建一个Docker镜像，并在 Docker 容器中运行该镜像。

先决条件

在开始之前，您需要安装和配置以下工具来创建 Angular 应用程序和 Docker 镜像。

  • git：Git 是一个分布式版本控制系统，它将用于同步存储库。
  • Node.js 和 npm：Node.js 是基于 Google V8 引擎的 JavaScript 代码运行时软件。npm 是 Node.js 的包管理器（Node.js 包管理器）。它们将用于构建和运行 Angular 应用程序并安装库。
  • Angular CLI：Angular CLI 是 Angular 的命令行实用工具，它将用于创建 Angular 应用程序的基础结构。
  • Docker Engine：Docker Engine 是 Docker 的命令行实用工具，用于创建和运行容器。
  • IDE（例如Visual Studio Code或WebStorm）：IDE（集成开发环境）是一种具有图形界面的工具，可帮助开发应用程序，它将用于开发 Angular 应用程序。

入门

创建 Angular 应用程序

Angular是一个使用 HTML、CSS 和 TypeScript (JavaScript) 构建 WEB、移动和桌面应用程序的开发平台。目前，Angular 版本为 17，Google 是该项目的主要维护者。

1.@angular/cli让我们使用禁用服务器端渲染（SSR）、路由文件和 SCSS 样式格式来创建具有 Angular 基础结构的应用程序。

ng new angular-docker --ssr false --routing true --style scss
CREATE angular-docker/README.md (1067 bytes)
CREATE angular-docker/.editorconfig (274 bytes)
CREATE angular-docker/.gitignore (548 bytes)
CREATE angular-docker/angular.json (2806 bytes)
CREATE angular-docker/package.json (1045 bytes)
CREATE angular-docker/tsconfig.json (903 bytes)
CREATE angular-docker/tsconfig.app.json (263 bytes)
CREATE angular-docker/tsconfig.spec.json (273 bytes)
CREATE angular-docker/.vscode/extensions.json (130 bytes)
CREATE angular-docker/.vscode/launch.json (470 bytes)
CREATE angular-docker/.vscode/tasks.json (938 bytes)
CREATE angular-docker/src/main.ts (250 bytes)
CREATE angular-docker/src/favicon.ico (15086 bytes)
CREATE angular-docker/src/index.html (299 bytes)
CREATE angular-docker/src/styles.scss (80 bytes)
CREATE angular-docker/src/app/app.component.scss (0 bytes)
CREATE angular-docker/src/app/app.component.html (20884 bytes)
CREATE angular-docker/src/app/app.component.spec.ts (940 bytes)
CREATE angular-docker/src/app/app.component.ts (373 bytes)
CREATE angular-docker/src/app/app.config.ts (227 bytes)
CREATE angular-docker/src/app/app.routes.ts (77 bytes)
CREATE angular-docker/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
Enter fullscreen mode Exit fullscreen mode

2.现在我们将使用以下命令运行该应用程序。

npm start

> angular-docker@0.0.0 start
> ng serve


Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  23.23 kB | 
styles.css          | styles        |  96 bytes | 

                    | Initial Total | 106.03 kB

Application bundle generation complete. [1.504 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
Enter fullscreen mode Exit fullscreen mode

3.准备好了！接下来，我们将访问 URLhttp://localhost:4200/并检查应用程序是否正常运行。

创建 Docker 映像

Docker：Docker 是一款允许开发人员创建和运行容器应用程序的软件。

1.让我们Dockerfile在 Angular 应用程序的根目录中创建包含 Docker 镜像配置的文件。

touch Dockerfile
Enter fullscreen mode Exit fullscreen mode

2.现在我们将Dockerfile使用下面的内容来配置该文件。

FROM node:alpine

WORKDIR /usr/src/app

COPY . /usr/src/app

RUN npm install -g @angular/cli

RUN npm install

CMD ["ng", "serve", "--host", "0.0.0.0"]
Enter fullscreen mode Exit fullscreen mode

笔记：

  • 该FROM node:alpine设置定义基本 Docker 镜像。
  • 该WORKDIR /usr/src/app设置定义了默认的应用程序目录。如果不存在，则会创建定义的目录。
  • 该COPY . /usr/src/app设置将本地应用程序文件和目录复制到定义的目录。
  • 该npm install -g @angular/cli设置为 Angular 安装全局命令行依赖项。
  • 该RUN npm install设置安装 Angular 应用程序依赖项。
  • 该CMD ["ng", "serve", "--host", "0.0.0.0"]设置创建并运行 Angular 应用程序以供外部访问。

3.接下来，我们将使用以下命令创建图像。

docker build -t angular-docker .
Enter fullscreen mode Exit fullscreen mode

4.创建图像后，我们将使用以下命令检查图像是否已创建。

docker images
REPOSITORY       TAG      IMAGE ID       CREATED          SIZE
angular-docker   latest   73bfa0093a57   10 seconds ago   463MB
Enter fullscreen mode Exit fullscreen mode

5.准备就绪！ID 为 463MB 的 Docker 镜像73bfa0093a57已创建。

运行 Docker 容器

1.让我们使用以下命令创建的 Angular 应用程序映像运行 Docker 容器。

docker run -p 4201:4200 angular-docker
Enter fullscreen mode Exit fullscreen mode

2.现在我们将使用以下命令检查容器是否正在运行。

docker ps
CONTAINER ID   IMAGE            COMMAND                  CREATED         STATUS         PORTS                                       NAMES
b9f106cbdcca   angular-docker   "docker-entrypoint.s…"   5 seconds ago   Up 4 seconds   0.0.0.0:4201->4200/tcp, :::4201->4200/tcp   eloquent_elgamal
Enter fullscreen mode Exit fullscreen mode

3.准备好了！接下来，我们将访问 URLhttp://localhost:4201/并检查应用程序是否在 Docker 容器内运行。

该应用程序存储库位于https://github.com/rodrigokamada/angular-docker。

结论

总结本文涵盖的内容：

  • 我们创建一个 Angular 应用程序。
  • 我们创建一个 Docker 镜像。
  • 我们运行一个 Docker 容器。
  • 我们在 Docker 容器内测试了 Angular 应用程序。

您可以根据本文创建一个带有 Angular 应用程序镜像的 Docker 容器。

感谢您的阅读，希望您喜欢这篇文章！

本教程以葡萄牙语发布在我的博客上。

要随时了解我发布的新文章，请在Twitter和LinkedIn上关注我。

文章来源：https://dev.to/rodrigokamada/creating-and-running-an-angular-application-in-a-docker-container-40mk
Devto 翻译
PREV
库和框架之间有什么区别？
NEXT
在 TypeScript 项目中使用 ESLint 和 Prettier cshooks 实现的目的