質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Q&A

解決済

1回答

2228閲覧

AngularをDockerに上げたいです。

jones

総合スコア36

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0グッド

0クリップ

投稿2021/12/25 14:59

作成したAngularのリポジトリをDockerに上げようとして、Dockerfileとdocker-compose.ymlを作成し、いざDockerを起動するところまで実施してみました。
terminal上ではAngularを起動したときに表示される

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

という表記がでてうまくいったのかなと思い、localhost:4200へ接続しようとしましたが、接続できない状況です。

Dockerfileの記述がおかしいのか、ymlの記述がおかしいのか指摘していただけるとありがたいです。

ディレクトリ構造

frontend -docker -file -Dockerfile -onkabu-feapp ←Angularリポジトリ -.dockerignore -docker-compose.yml

Dockerfile

1FROM node:14 2WORKDIR /feapp 3RUN npm install @angular-devkit/build-angular 4RUN npm install -g @angular/cli 5 6EXPOSE 4201

docker-compose.yml

yml

1version: '3' 2services: 3 node: 4 build: 5 context: ./docker/file 6 dockerfile: Dockerfile 7 image: onkabu-feapp 8 container_name: onkabu-feapp 9 ports: 10 - 4201:4201 11 volumes: 12 - ./onkabu-feapp:/feapp 13 command: [sh, -c, npm install && npm start] 14 tty: true

package.json

json

1{ 2 "name": "onkabu", 3 "version": "0.0.0", 4 "scripts": { 5 "ng": "ng", 6 "start": "ng serve --port 4201", ポート番号を変えているので多分ここも原因と思いました。 7 "build": "ng build", 8 "test": "ng test", 9 "lint": "ng lint", 10 "e2e": "ng e2e" 11 }, 12省略 13}

これらのファイルを書いた後ターミナルで下記のコマンドを入力しました。

docker-compose up -d docker-compose exec node bash

docker内

npm install ng serve (Angular/cliなどは入れています)

この後

Your global Angular CLI version (13.1.2) is greater than your local version (11.1.4). The local Angular CLI version is used. To disable this warning use "ng config -g cli.warnings.versionMismatch false". ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Size vendor.js | vendor | 6.52 MB polyfills.js | polyfills | 128.73 kB main.js | main | 88.14 kB styles.css | styles | 74.07 kB runtime.js | runtime | 9.14 kB | Initial Total | 6.81 MB Lazy Chunk Files | Names | Size xxxxxxxxxxx-module.js | xxxxxxxxxxx-module | 20.21 kB xxxxxxxxxxxxxxx-module.js | xxxxxxxxxxxxxxx-module | 18.61 kB xxxxxxxxx-module.js | xxxxxxxxx-module | 15.64 kB Build at: 2021-12-25T14:39:13.748Z - Hash: 749f3fed3b4dfb9a69b7 - Time: 40924ms Warning: /feapp/src/app/xxxxxxxxxxx/xxxxxxxxxxx.component.ts depends on 'export-to-csv'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

ターミナルの表示は上記のようになり、Angularを起動した時と同じような挙動になりました。
これでいけるのかなと思ってlocalhost:4200を開けてみましたが、接続できませんでした。

何を修正する必要がありますでしょうか?
何卒よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

試しに回答してみますが、Docker コンテナ内でのng serve を下記に変更することでいけるかもです。
ng serve --host 0.0.0.0 --port 4201

近い事象としてはAngularの開発用ローカルサーバーにスマホでアクセスする の記事が参考になるかも知れません。

動かなかったらすいません。

投稿2021/12/28 00:47

tshion

総合スコア65

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jones

2022/01/01 07:53

返信遅くなり申し訳ありません。仰るとおり実施してみると、localhostで開くことができました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問