如何創建一個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容器？

回答

相關問題