web-dev-qa-db-ja.com

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

これから独自のイメージを作成し、コンテナで実行するにはどうすればよいですか？ Dockerfileで成功せずに実行しようとしましたが、Dockerが比較的新しいので、これが簡単な場合はおologiesびします。 httpサーバーで実行したいだけです（おそらくnginxを使用していますか？）

私は助けのためにこれらを試しましたが、成功しませんでした：

angularjsnginxdockercontainersdockerfile
13
stop

まず、これに従ってください ベストプラクティスガイド angular app構造を構築します。index.htmlはルートフォルダーに配置する必要があります。存在しない場合、次の手順が機能します。

Nginxを使用するには、この小さなチュートリアルに従ってください： Dockerized Angular app with nginx

1.アプリのルートフォルダー（index.htmlの隣）にDockerfileを作成します

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

18
adebasi

@adebasiの回答に基づいて、現在のAngular CLIアプリケーションで使用する this Dockerfile を強調したい。

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;"]
8
Hedge

一般的に、

Dockerは、アプリケーションのドッキングに使用されます。 Node、ASP.NET Core、Pythonなど）のようなバックエンドフレームワークを選択しない限り、アプリケーションはJavaScriptのみで構成されません（AngularJSはJSフレームワークであるため）。単純なHTMLアプリケーションの場合は、Robbieが述べたように、リバースプロキシまたはWebサーバーコンテナを使用します。

  • Nginx Dockerイメージをハブからダウンロードします。
  • ボリュームを使用するか、独自のイメージを作成して構成を保持します
  • コンテナからホストへのポートを公開します。
1
Janshair Khan