如何创建 AngularJS 应用程序的 Docker 容器？答案

【问题标题】：How to create a Docker container of an AngularJS app?如何创建 AngularJS 应用程序的 Docker 容器？
【发布时间】：2017-04-04 06:16:46
【问题描述】：

我有一个具有这种结构的 AngularJS 应用程序：

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

如何创建自己的映像并在容器上运行它？我尝试使用 Dockerfile 运行它但没有成功，而且我对 Docker 比较陌生，所以如果这很简单，我深表歉意。我只想在 http 服务器上运行它（也许使用 nginx？）

我已经尝试过这些寻求帮助，但没有成功：

【问题讨论】：

一般来说docker容器是纯粹的web服务。在运行容器时挂载一个卷，该容器将您的代码链接到容器中的 Web 根目录。由于这个原因，docker 和 AngularJS 是互斥的，你可以使用任何通用的 Apache 或 nginx docker 容器来运行你的应用程序

标签： angularjs nginx docker containers dockerfile

【解决方案1】：

首先，按照best practice guide 构建您的 Angular 应用程序结构。 index.html 应该放在根文件夹中。如果不存在，我不确定以下步骤是否有效。

要使用 nginx，你可以按照这个小教程：Dockerized Angular app with nginx

1.在应用的根文件夹中创建一个 Dockerfile（在您的 index.html 旁边）

FROM nginx
COPY ./ /usr/share/nginx/html
EXPOSE 80

2.在你的Dockerfile文件夹中运行docker build -t my-angular-app .。

3.docker run -p 80:80 -d my-angular-app 然后你就可以访问你的应用了http://localhost

【讨论】：

-t 是什么意思？
参数-t my-angular-app为创建的图像创建一个标签。所以你可以在docker run 命令中引用my-angular-app。有关更多详细信息，请查看 docker 文档：docker build docs
COPY 命令不正确，除非您想从/dist 提供服务。您链接到的教程正确：COPY dist /usr/share/nginx/html
另外，您可能无法从端口 80 提供服务，具体取决于您的操作系统，因为它是保留的。
为什么在这个子 Dockerfile 中需要EXPOSE 80？来自 nginx 的基本 Dockerfile 中不需要它，它在端口 80 上运行而不需要 EXPOSE 80，所以在孩子中需要它似乎很奇怪。

【解决方案2】：

一般来说

Docker 用于 dockerize 应用程序。现在应用程序不仅仅包含 JavaScript（因为 AngularJS 是一个 JS 框架），除非您选择像 Node、ASP.NET Core、Python 等后端框架。因此，如果您只有简单的 HTML 应用程序，请使用反向代理或 Robbie 提到的 Web 服务器容器。对于一个简单的案例（Nginx 示例）：

从 Hub 下载 Nginx Docker 映像。
使用卷或创建您自己的映像来保存您的配置
从容器向主机公开一个端口。

【讨论】：

【解决方案3】：

在@adebasi 回答的基础上，我想突出显示this Dockerfile，以便与当前的 Angular CLI 应用程序一起使用。

它使用 Dockers 在 17.05 中引入的 multi-stage build feature。在第 1 步中，Node 容器仅用于创建构建。最终镜像将使用 Nginx 并静态传递构建文件。

### STAGE 1: Build ###    
# We label our stage as 'builder'
FROM node:8-alpine as builder

COPY package.json package-lock.json ./

RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

## Storing node modules on a separate layer will prevent 
## unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --build-optimizer


### STAGE 2: Setup ###

FROM nginx:1.13.3-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder 
## to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

【讨论】：

我来宾这是为 Angular2 准备的
@lrkwz 是的，它适用于 Angular2
@Hedge 是的，所以问题是针对 AngularJS，但也谢谢你。