如何创build一个AngularJS应用程序的Docker容器?

我有一个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 

我如何去创build自己的图像,并在容器上运行它? 我已经尝试运行它与Dockerfile没有成功,我相对较新的Docker,所以很抱歉,如果这很简单。 我只是想在一个http服务器上运行它(使用nginx也许?)

我试过这些帮助,没有成功:

  • https://www.quora.com/Can-I-have-an-Angular-app-on-Docker-container
  • Docker中的AngularJS和NodeJS应用程序
  • Dockerize您的Angular NodeJS应用程序

首先,按照这个最佳实践指南来构建您的角度应用程序结构。 index.html应放置在根文件夹中。 我不确定下面的步骤是否可行,如果不在那里。

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

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

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

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

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

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

它使用了17.05年推出的Dockers的多阶段构建功能 。 在第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;"] 

通常,

Docker被用来dockerize 应用程序 。 现在,一个应用程序不仅仅是由JavaScript组成(除非你选择像Node,ASP.NET Core,Python等后端框架),所以如果你只有简单的HTML应用程序,使用反向代理或Robbie提到的Web服务器容器。 对于一个简单的例子(Nginx例子):

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