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

我有了这种结构的AngularJS应用：如何创建一个AngularJS应用程序的Docker容器？

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的吧？）：

来源

2016-11-20 stop

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

首先，请按照此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

来源

2016-11-21 06:30:50 adebasi

-t是什么？ –

参数'-t MY-角app'创建用于创建的图像的标签。所以，你可以在'泊坞窗run'命令参考'我的棱角，app'。有关详细信息看看泊坞窗的文档：[泊坞窗构建文档（https://docs.docker.com/engine/reference/commandline/build/） – adebasi

COPY命令是不正确的，除非你想从'服务/ dist'。您链接到本教程有它正确的： 'COPY DIST在/ usr /共享/ nginx的/ html' – gred

一般来说，

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

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

来源

2016-11-21 06:39:06

建立在@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;"]

来源

2017-09-06 11:04:54 Hedge

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

回答

相关问题