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

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

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

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

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

解決済

Docker DesktopのKubernetesを使ってブラウザからAngularアプリケーションへアクセスできない

Linkey
Linkey

総合スコア77

docker-compose

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

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

1回答

0評価

0クリップ

438閲覧

投稿2021/12/21 08:11

編集2021/12/23 13:00

Kubernetesの勉強をしているものです。
Windows PCにDocker Desktopをインストールし、設定でKubernetesを有効化にした状態で
Angularアプリのpodを作成し、外部公開したのですが、Angularアプリケーションへアクセスができません。

①Dockerfileを作成
Dockerfile

Dockerfile

# Angualr のビルドする環境として node をインストール FROM node:16.13.1-alpine3.14 as build-stage # npmのパッケージをインストールする RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn #angular-sample-appを作業ディレクトリとする。 WORKDIR /angular-sample-app COPY ./angular-sample-app/package*.json ./ # npmパッケージをDockerのコンテナにコピーする COPY ./angular-sample-app/ ./ ARG configuration=production #コンテナ内でビルドする。 RUN npm run build -- --configuration $configuration FROM nginx:1.17.3-alpine #ビルドしたものを/var/www/htmlへコピーする COPY --from=build-stage ./angular-sample-app/dist/angular-sample-app/ /var/www/html COPY ./docker/nginx/nginx.conf /etc/nginx/

②nginx.confを作成

user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; keepalive_timeout 65; include /etc/nginx/conf.d/*.conf; }

③Angularアプリケーションのイメージを作成する
docker build -t (Dockerユーザ名)/angular-sample:v1 .

④作成したイメージを実行してDockerfileの記載通りに資材が配置できているかを確認する

>docker images REPOSITORY TAG IMAGE ID CREATED SIZE (Dockerユーザ名)/angular-sample v1 0a404fe1c8ed 10 days ago 21.5MB >docker run --name angular-sample -it (Dockerユーザ名)/angular-sample:v1 /bin/ash / # ls -la /var/www/html/ total 268 drwxr-xr-x 3 root root 4096 Dec 13 12:29 . drwxr-xr-x 3 root root 4096 Dec 13 12:29 .. -rw-r--r-- 1 root root 12947 Dec 13 12:29 3rdpartylicenses.txt drwxr-xr-x 3 root root 4096 Dec 13 12:29 assets -rwxr-xr-x 1 root root 948 Dec 13 12:29 favicon.ico -rw-r--r-- 1 root root 518 Dec 13 12:29 index.html -rw-r--r-- 1 root root 189970 Dec 13 12:29 main.2534eb6930a77fce.js -rw-r--r-- 1 root root 37084 Dec 13 12:29 polyfills.dcd0b4e5c6c60e9e.js -rw-r--r-- 1 root root 1089 Dec 13 12:29 runtime.7a48c58b94db3c87.js -rw-r--r-- 1 root root 0 Dec 13 12:29 styles.ef46db3751d8e999.css

⑤Deployment作成用のマニフェストファイルを作成する
angular-sample-deployment.yaml

yaml

apiVersion: apps/v1 kind: Deployment metadata: name: angular-sample-deployment labels: app: angular-sample-container spec: replicas: 1 selector: matchLabels: app: angular-sample-container template: metadata: labels: app: angular-sample-container label-key : label-value spec: containers: - name: angular-sample-container image: (Dockerユーザ名)/angular-sample:v1 imagePullPolicy: Always ports: - containerPort: 80

⑥Deploymentマニフェストファイルを実行する

>kubectl apply -f angular-sample-deployment.yaml deployment.apps/angular-sample-deployment created

⑦podの状態と中身を確認する

>kubectl get pods NAME READY STATUS RESTARTS AGE angular-sample-deployment-cc4986595-7bjwg 1/1 Running 0 92s >kubectl exec -it angular-sample-deployment-cc4986595-7bjwg /bin/ash kubectl exec [POD] [COMMAND] is DEPRECATED and will be removed in a future version. Use kubectl exec [POD] -- [COMMAND] instead. / # ls -la /var/www/html/ total 268 drwxr-xr-x 3 root root 4096 Dec 13 12:29 . drwxr-xr-x 3 root root 4096 Dec 13 12:29 .. -rw-r--r-- 1 root root 12947 Dec 13 12:29 3rdpartylicenses.txt drwxr-xr-x 3 root root 4096 Dec 13 12:29 assets -rwxr-xr-x 1 root root 948 Dec 13 12:29 favicon.ico -rw-r--r-- 1 root root 518 Dec 13 12:29 index.html -rw-r--r-- 1 root root 189970 Dec 13 12:29 main.2534eb6930a77fce.js -rw-r--r-- 1 root root 37084 Dec 13 12:29 polyfills.dcd0b4e5c6c60e9e.js -rw-r--r-- 1 root root 1089 Dec 13 12:29 runtime.7a48c58b94db3c87.js -rw-r--r-- 1 root root 0 Dec 13 12:29 styles.ef46db3751d8e999.css

⑧Deploymentを公開するServiceオブジェクトを作成

>kubectl expose deployment angular-sample-deployment --type=LoadBalancer --name=angular-sample-service service/angular-sample-service exposed

⑨Serviceに関する情報を表示

>kubectl describe services angular-sample-service Name: angular-sample-service Namespace: default Labels: app=angular-sample-container Annotations: <none> Selector: app=angular-sample-container Type: LoadBalancer IP Family Policy: SingleStack IP Families: IPv4 IP: XX.XXX.XXX.XXX IPs: XX.XXX.XXX.XXX LoadBalancer Ingress: localhost Port: <unset> 80/TCP TargetPort: 80/TCP NodePort: <unset> 32298/TCP Endpoints: XX.X.X.XX:80 Session Affinity: None External Traffic Policy: Cluster Events: <none> >kubectl get service NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE angular-sample-service LoadBalancer XX.XXX.XXX.XXX localhost 80:32298/TCP 4m45s kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 2d

⑨以下のブラウザから以下のURLでアクセスしてみる
http://localhost:80/

⑩「Welcome to nginx!」という初期画面が表示される
イメージ説明

/var/www/html/にあるindex.htmlを表示させたいのですが、うまくいきません。
解決方法をいろいろと調べていますが、未だに解決できていません。
Kubernetes、Dockerにお詳しい方がいましたらご回答いただけないでしょうか?
よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

docker-compose

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

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