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

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

①Dockerfileを作成
Dockerfile

Dockerfile
1# Angualr のビルドする環境として node をインストール
2FROM node:16.13.1-alpine3.14 as build-stage
3
4# npmのパッケージをインストールする
5RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn
6
7#angular-sample-appを作業ディレクトリとする。
8WORKDIR /angular-sample-app
9
10COPY ./angular-sample-app/package*.json ./
11
12# npmパッケージをDockerのコンテナにコピーする
13COPY ./angular-sample-app/ ./
14
15ARG configuration=production
16
17#コンテナ内でビルドする。
18RUN npm run build -- --configuration $configuration
19
20FROM  nginx:1.17.3-alpine
21
22#ビルドしたものを/var/www/htmlへコピーする
23COPY --from=build-stage ./angular-sample-app/dist/angular-sample-app/ /var/www/html
24
25COPY ./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
1apiVersion: apps/v1
2kind: Deployment
3metadata:
4  name: angular-sample-deployment
5  labels:
6    app: angular-sample-container
7spec:
8  replicas: 1
9  selector:
10    matchLabels:
11      app: angular-sample-container
12  template:
13    metadata:
14      labels:
15        app: angular-sample-container
16        label-key : label-value  
17    spec:
18      containers:
19      - name: angular-sample-container
20        image: (Dockerユーザ名)/angular-sample:v1
21        imagePullPolicy: Always
22        ports:
23          - 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にお詳しい方がいましたらご回答いただけないでしょうか？
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

以下のサイトを参照したところ自己解決できました。
https://qiita.com/oguogura/items/68741b91b70962081504
https://kubernetes.io/ja/docs/tasks/configure-pod-container/configure-pod-configmap/
https://blog.mayadata.io/openebs/steps-to-deploy-angular-application-on-kubernetes

①nginx.confを以下のように修正する。(ドキュメントルートを/usr/share/nginx/htmlに設定する)

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

②nginx.confからConfigMapを作成する
kubectl create configmap angular-sample-config --from-file=./nginx.conf

③ConfigMapの設定を確認する

>kubectl describe configmaps angular-sample-config
Name:         angular-sample-config
Namespace:    default
Labels:       <none>
Annotations:  <none>

Data
====
nginx.conf:
----
server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

BinaryData
====

Events:  <none>

④angular-sample-deployment.yamlにmountVolumesとvolumesを追加し「deployment-label: angular-sample-deployment」というラベルを追加する

yaml
1apiVersion: apps/v1
2kind: Deployment
3metadata:
4  name: angular-sample-deployment
5  labels:
6    app: angular-sample-container
7spec:
8  replicas: 1
9  selector:
10    matchLabels:
11      app: angular-sample-container
12  template:
13    metadata:
14      labels:
15        app: angular-sample-container
16        deployment-label: angular-sample-deployment
17    spec:
18      containers:
19      - name: angular-sample-container
20        image: (Dockerユーザ名)/angular-sample:v1
21        imagePullPolicy: Never
22        volumeMounts:
23        - mountPath: /mount
24          name: config
25        ports:
26          - containerPort: 80
27        volumes:
28      - name: config
29        configMap:
30          name: angular-sample-config

⑤Serviceマニフェストファイルを作成

yaml
1apiVersion: v1
2kind: Service
3metadata:
4  labels:
5    service-label: angular-sample-service
6  name: angular-sample-service-name
7spec:
8  type: ClusterIP
9  ports:
10  - name: angular-sample-service-port-name
11    port: 80
12    protocol: TCP
13  selector:
14    deployment-label: angular-sample-deployment

⑥Loadbalancerマニフェストファイルを作成

yaml
1apiVersion: v1
2kind: Service
3metadata:
4  labels:
5    service-label: angular-sample-service
6  name: angular-sample-service-name-loadbalancer
7spec:
8  type: LoadBalancer
9  ports:
10  - name: angular-sample-service-port-name
11    port: 8080
12    protocol: TCP
13  selector:
14    deployment-label: angular-sample-deployment

⑦Deployment、Service、Loadbalancerリソースを作成する
kubectl apply -f angular-sample-deployment.yaml
kubectl apply -f angular-sample-service.yaml
kubectl apply -f angular-sample-load-balancer-service.yaml

⑧サービスを確認する

>kubectl get svc -owide
NAME                                       TYPE           CLUSTER-IP      EXTERNAL-IP   PORT(S)          AGE     SELECTOR
angular-sample-service-name                ClusterIP      XX.XXX.XX.XXX   <none>        80/TCP           10s     deployment-label=angular-sample-deployment
angular-sample-service-name-loadbalancer   LoadBalancer   XX.XX.XX.X      localhost     8080:31881/TCP   7s      deployment-label=angular-sample-deployment
kubernetes                                 ClusterIP      10.96.0.1       <none>        443/TCP          3d12h   <none>

http://localhost:8080でアクセスしたところ画面表示させることができました。