如何创建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
• Docker中的AngularJS和NodeJS应用程序
• Dockerize你的Angular NodeJS应用程序

Answer 1

首先,请遵循此最佳实践指南来构建您的角度应用程序结构.index.html应放在根文件夹中.我不确定以下步骤是否有效,如果不存在的话.

要使用nginx,您可以按照这个小教程:使用nginx的Dockerized Angular应用程序

1.在应用程序的根文件夹中创建一个Dockerfile(在index.html旁边)

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

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

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

Answer 2

建立在@adebasi上的答案我想强调这个Dockerfile与当前的Angular CLI应用程序一起使用.

它使用了Dockers 在17.05中引入的多阶段构建功能.在步骤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;"]