如何创建一个AngularJS应用程序的Docker容器？

Question

我有了这种结构的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的吧？）：

• https://www.quora.com/Can-I-have-an-Angular-app-on-Docker-container
• AngularJS and NodeJS app in Docker
• Dockerize your Angular NodeJS application

Answer 1

首先，请按照此best practice guide构建您的角度应用程序结构。 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

Answer 2

一般来说，

泊坞窗用于dockerize 应用。现在一个应用程序不仅仅由JavaScript组成（因为AngularJS是一个JS框架），除非你选择像Node，ASP.NET Core，Python等后端框架。所以如果你只有简单的HTML应用程序，使用反向代理或Robbie提到的Web服务器容器。对于一个简单的情况下（例如Nginx的）：

• 下载从集线器的Nginx泊坞图像。
• 使用卷或创建自己的图像来保存您的配置
• 公开从容器到主机的端口。

Answer 3

建立在@adebasi答案我想突出this Dockerfile与当前的Angular CLI应用程序一起使用。

它使用17.05年推出的Dockers'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;"]