teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Docker DesktopのKubernetesを使ってブラウザからAngularアプリケーションへアクセスできない

編集履歴

質問編集履歴

7

タイトルと説明を修正

2021/12/23 13:00

投稿

Linkey
Linkey

スコア77

test CHANGED
@@ -1 +1 @@
1
- kubectl minikubeを使ってブラウザからAngularアプリケーションへアクセスできない
1
+ Docker DesktopのKubernetesを使ってブラウザからAngularアプリケーションへアクセスできない
test CHANGED
@@ -1,16 +1,10 @@
1
1
  Kubernetesの勉強をしているものです。
2
2
 
3
+ Windows PCにDocker Desktopをインストールし、設定でKubernetesを有効化にした状態で
4
+
3
- 以下のサイトを参考にブラウザからAngularアプリケーションにアクセスするための設定を行っています。
5
+ Angularアプリのpodを作成し、外部公開したのですが、Angularアプリケーションへアクセスができません。
4
-
5
- https://uzimihsr.github.io/post/2019-10-28-hello-minikube/
6
+
6
-
7
-
8
-
9
- 作成したサービスにアクセスしたのですが、ページが表示できませんでした。
7
+
10
-
11
-
12
-
13
- 実施した手順は以下です。
14
8
 
15
9
  ①Dockerfileを作成
16
10
 
@@ -122,148 +116,236 @@
122
116
 
123
117
 
124
118
 
125
- ④Dockerリポジトリにpushする
126
-
127
- docker push (Dockerユーザ名)/angular-sample:v1
128
-
129
-
130
-
131
- ⑤Deploymentを作成する
132
-
133
- kubectl create deployment angular-sample1 --image=docker.io/(Dockerユーザ名)/angular-sample:v1
134
-
135
-
136
-
137
- ⑥kubectlの設定を表示する
138
-
139
- kubectl config view
140
-
141
- ```ここに言語を入力
142
-
143
- apiVersion: v1
144
-
145
- clusters:
146
-
147
- - cluster:
148
-
149
- certificate-authority-data: DATA+OMITTED
150
-
151
- server: https://kubernetes.docker.internal:6443
152
-
153
- name: docker-desktop
154
-
155
- - cluster:
156
-
157
- certificate-authority: C:\Users\User.minikube\ca.crt
158
-
159
- extensions:
160
-
161
- - extension:
162
-
163
- last-update: Wed, 22 Dec 2021 21:59:57 JST
164
-
165
- provider: minikube.sigs.k8s.io
166
-
167
- version: v1.24.0
168
-
169
- name: cluster_info
170
-
171
- server: https://127.0.0.1:53345
172
-
173
- name: minikube
174
-
175
- contexts:
176
-
177
- - context:
178
-
179
- cluster: docker-desktop
180
-
181
- user: docker-desktop
182
-
183
- name: docker-desktop
184
-
185
- - context:
186
-
187
- cluster: minikube
188
-
189
- extensions:
190
-
191
- - extension:
192
-
193
- last-update: Wed, 22 Dec 2021 21:59:57 JST
194
-
195
- provider: minikube.sigs.k8s.io
196
-
197
- version: v1.24.0
198
-
199
- name: context_info
200
-
201
- namespace: default
202
-
203
- user: minikube
204
-
205
- name: minikube
206
-
207
- current-context: minikube
208
-
209
- kind: Config
210
-
211
- preferences: {}
212
-
213
- users:
214
-
215
- - name: docker-desktop
216
-
217
- user:
218
-
219
- client-certificate-data: REDACTED
220
-
221
- client-key-data: REDACTED
222
-
223
- - name: minikube
224
-
225
- user:
226
-
227
- client-certificate: C:\Users\User.minikube\profiles\minikube\client.crt
228
-
229
- client-key: C:\Users\User.minikube\profiles\minikube\client.key
230
-
231
- ```
232
-
233
-
234
-
235
- ⑦Podをインターネット(外部)からアクセス可能にするためのServiceを作成する
236
-
237
- kubectl expose deployment angular-sample1 --type=LoadBalancer --port=8080
238
-
239
-
240
-
241
- ⑧Serviceの一覧を表示する
242
-
243
- kubectl get services
244
-
245
- ```ここに言語を入力
246
-
247
- NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
248
-
249
- angular-sample1 LoadBalancer XX.XXX.XXX.XXX <pending> 8080:30645/TCP 11m
250
-
251
- kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 89m
252
-
253
- ```
254
-
255
- ⑨Service(angular-sample1)にアクセスする
256
-
257
- minikube service angular-sample1
258
-
259
-
260
-
261
- しかし、以下の画面となる
262
-
263
- ![イメージ説明](cef44d21964859af68901ccfaef3dfb8.png)
264
-
265
-
266
-
267
- Dockerfileの設定が悪そうな気がしていて解決方法を調べていますが、今のところ見つかっておりません。
268
-
269
- Kubernetesのminikubeの使い方にお詳しい方がいましたら、ご回答いただけないでしょうか？
119
+ ④作成したイメージを実行してDockerfileの記載通りに資材が配置できているかを確認する
120
+
121
+ ```ここに言語を入力
122
+
123
+ >docker images
124
+
125
+ REPOSITORY TAG IMAGE ID CREATED SIZE
126
+
127
+ (Dockerユーザ名)/angular-sample v1 0a404fe1c8ed 10 days ago 21.5MB
128
+
129
+
130
+
131
+ >docker run --name angular-sample -it (Dockerユーザ名)/angular-sample:v1 /bin/ash
132
+
133
+ / # ls -la /var/www/html/
134
+
135
+ total 268
136
+
137
+ drwxr-xr-x 3 root root 4096 Dec 13 12:29 .
138
+
139
+ drwxr-xr-x 3 root root 4096 Dec 13 12:29 ..
140
+
141
+ -rw-r--r-- 1 root root 12947 Dec 13 12:29 3rdpartylicenses.txt
142
+
143
+ drwxr-xr-x 3 root root 4096 Dec 13 12:29 assets
144
+
145
+ -rwxr-xr-x 1 root root 948 Dec 13 12:29 favicon.ico
146
+
147
+ -rw-r--r-- 1 root root 518 Dec 13 12:29 index.html
148
+
149
+ -rw-r--r-- 1 root root 189970 Dec 13 12:29 main.2534eb6930a77fce.js
150
+
151
+ -rw-r--r-- 1 root root 37084 Dec 13 12:29 polyfills.dcd0b4e5c6c60e9e.js
152
+
153
+ -rw-r--r-- 1 root root 1089 Dec 13 12:29 runtime.7a48c58b94db3c87.js
154
+
155
+ -rw-r--r-- 1 root root 0 Dec 13 12:29 styles.ef46db3751d8e999.css
156
+
157
+ ```
158
+
159
+ ⑤Deployment作成用のマニフェストファイルを作成する
160
+
161
+ angular-sample-deployment.yaml
162
+
163
+ ```yaml
164
+
165
+ apiVersion: apps/v1
166
+
167
+ kind: Deployment
168
+
169
+ metadata:
170
+
171
+ name: angular-sample-deployment
172
+
173
+ labels:
174
+
175
+ app: angular-sample-container
176
+
177
+ spec:
178
+
179
+ replicas: 1
180
+
181
+ selector:
182
+
183
+ matchLabels:
184
+
185
+ app: angular-sample-container
186
+
187
+ template:
188
+
189
+ metadata:
190
+
191
+ labels:
192
+
193
+ app: angular-sample-container
194
+
195
+ label-key : label-value
196
+
197
+ spec:
198
+
199
+ containers:
200
+
201
+ - name: angular-sample-container
202
+
203
+ image: (Dockerユーザ名)/angular-sample:v1
204
+
205
+ imagePullPolicy: Always
206
+
207
+ ports:
208
+
209
+ - containerPort: 80
210
+
211
+ ```
212
+
213
+
214
+
215
+ ⑥Deploymentマニフェストファイルを実行する
216
+
217
+ ```ここに言語を入力
218
+
219
+ >kubectl apply -f angular-sample-deployment.yaml
220
+
221
+ deployment.apps/angular-sample-deployment created
222
+
223
+ ```
224
+
225
+ ⑦podの状態と中身を確認する
226
+
227
+ ```ここに言語を入力
228
+
229
+ >kubectl get pods
230
+
231
+ NAME READY STATUS RESTARTS AGE
232
+
233
+ angular-sample-deployment-cc4986595-7bjwg 1/1 Running 0 92s
234
+
235
+
236
+
237
+ >kubectl exec -it angular-sample-deployment-cc4986595-7bjwg /bin/ash
238
+
239
+ kubectl exec [POD] [COMMAND] is DEPRECATED and will be removed in a future version. Use kubectl exec [POD] -- [COMMAND] instead.
240
+
241
+ / # ls -la /var/www/html/
242
+
243
+ total 268
244
+
245
+ drwxr-xr-x 3 root root 4096 Dec 13 12:29 .
246
+
247
+ drwxr-xr-x 3 root root 4096 Dec 13 12:29 ..
248
+
249
+ -rw-r--r-- 1 root root 12947 Dec 13 12:29 3rdpartylicenses.txt
250
+
251
+ drwxr-xr-x 3 root root 4096 Dec 13 12:29 assets
252
+
253
+ -rwxr-xr-x 1 root root 948 Dec 13 12:29 favicon.ico
254
+
255
+ -rw-r--r-- 1 root root 518 Dec 13 12:29 index.html
256
+
257
+ -rw-r--r-- 1 root root 189970 Dec 13 12:29 main.2534eb6930a77fce.js
258
+
259
+ -rw-r--r-- 1 root root 37084 Dec 13 12:29 polyfills.dcd0b4e5c6c60e9e.js
260
+
261
+ -rw-r--r-- 1 root root 1089 Dec 13 12:29 runtime.7a48c58b94db3c87.js
262
+
263
+ -rw-r--r-- 1 root root 0 Dec 13 12:29 styles.ef46db3751d8e999.css
264
+
265
+ ```
266
+
267
+ ⑧Deploymentを公開するServiceオブジェクトを作成
268
+
269
+ ```ここに言語を入力
270
+
271
+ >kubectl expose deployment angular-sample-deployment --type=LoadBalancer --name=angular-sample-service
272
+
273
+ service/angular-sample-service exposed
274
+
275
+ ```
276
+
277
+
278
+
279
+ ⑨Serviceに関する情報を表示
280
+
281
+ ```ここに言語を入力
282
+
283
+ >kubectl describe services angular-sample-service
284
+
285
+ Name: angular-sample-service
286
+
287
+ Namespace: default
288
+
289
+ Labels: app=angular-sample-container
290
+
291
+ Annotations: <none>
292
+
293
+ Selector: app=angular-sample-container
294
+
295
+ Type: LoadBalancer
296
+
297
+ IP Family Policy: SingleStack
298
+
299
+ IP Families: IPv4
300
+
301
+ IP: XX.XXX.XXX.XXX
302
+
303
+ IPs: XX.XXX.XXX.XXX
304
+
305
+ LoadBalancer Ingress: localhost
306
+
307
+ Port: <unset> 80/TCP
308
+
309
+ TargetPort: 80/TCP
310
+
311
+ NodePort: <unset> 32298/TCP
312
+
313
+ Endpoints: XX.X.X.XX:80
314
+
315
+ Session Affinity: None
316
+
317
+ External Traffic Policy: Cluster
318
+
319
+ Events: <none>
320
+
321
+
322
+
323
+ >kubectl get service
324
+
325
+ NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
326
+
327
+ angular-sample-service LoadBalancer XX.XXX.XXX.XXX localhost 80:32298/TCP 4m45s
328
+
329
+ kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 2d
330
+
331
+ ```
332
+
333
+ ⑨以下のブラウザから以下のURLでアクセスしてみる
334
+
335
+ http://localhost:80/
336
+
337
+
338
+
339
+ ⑩「Welcome to nginx!」という初期画面が表示される
340
+
341
+ ![イメージ説明](acfe5ec7296863be952aab6895afd0ca.png)
342
+
343
+
344
+
345
+ /var/www/html/にあるindex.htmlを表示させたいのですが、うまくいきません。
346
+
347
+ 解決方法をいろいろと調べていますが、未だに解決できていません。
348
+
349
+ Kubernetes、Dockerにお詳しい方がいましたらご回答いただけないでしょうか？
350
+
351
+ よろしくお願いいたします。

6

説明を修正

2021/12/23 13:00

投稿

Linkey
Linkey

スコア77

test CHANGED
File without changes
test CHANGED
@@ -246,7 +246,7 @@
246
246
 
247
247
  NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
248
248
 
249
- angular-sample1 LoadBalancer 10.102.118.122 <pending> 8080:30645/TCP 11m
249
+ angular-sample1 LoadBalancer XX.XXX.XXX.XXX <pending> 8080:30645/TCP 11m
250
250
 
251
251
  kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 89m
252
252
 

5

タイトルと質問内容を修正

2021/12/22 13:41

投稿

Linkey
Linkey

スコア77

test CHANGED
@@ -1 +1 @@
1
- kubectl minikubeを使ってブラウザからAngularアプリケーションへアクセスしたい
1
+ kubectl minikubeを使ってブラウザからAngularアプリケーションへアクセスできない
test CHANGED
@@ -2,206 +2,268 @@
2
2
 
3
3
  以下のサイトを参考にブラウザからAngularアプリケーションにアクセスするための設定を行っています。
4
4
 
5
- https://blog.mayadata.io/openebs/steps-to-deploy-angular-application-on-kubernetes
5
+ https://uzimihsr.github.io/post/2019-10-28-hello-minikube/
6
+
7
+
8
+
6
-
9
+ 作成したサービスにアクセスしたのですが、ページが表示できませんでした。
10
+
11
+
12
+
7
-
13
+ 実施した手順は以下です。
14
+
8
-
15
+ ①Dockerfileを作成
16
+
17
+ Dockerfile
18
+
19
+ ```Dockerfile
20
+
21
+ # Angualr のビルドする環境として node をインストール
22
+
23
+ FROM node:16.13.1-alpine3.14 as build-stage
24
+
25
+
26
+
27
+ # npmのパッケージをインストールする
28
+
29
+ RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn
30
+
31
+
32
+
33
+ #angular-sample-appを作業ディレクトリとする。
34
+
35
+ WORKDIR /angular-sample-app
36
+
37
+
38
+
39
+ COPY ./angular-sample-app/package*.json ./
40
+
41
+
42
+
43
+ # npmパッケージをDockerのコンテナにコピーする
44
+
45
+ COPY ./angular-sample-app/ ./
46
+
47
+
48
+
49
+ ARG configuration=production
50
+
51
+
52
+
53
+ #コンテナ内でビルドする。
54
+
55
+ RUN npm run build -- --configuration $configuration
56
+
57
+
58
+
59
+ FROM nginx:1.17.3-alpine
60
+
61
+
62
+
63
+ #ビルドしたものを/var/www/htmlへコピーする
64
+
65
+ COPY --from=build-stage ./angular-sample-app/dist/angular-sample-app/ /var/www/html
66
+
67
+
68
+
69
+ COPY ./docker/nginx/nginx.conf /etc/nginx/
70
+
71
+ ```
72
+
73
+
74
+
75
+ ②nginx.confを作成
76
+
77
+ ```
78
+
79
+ user nginx;
80
+
81
+ worker_processes 1;
82
+
83
+ error_log /var/log/nginx/error.log warn;
84
+
85
+ pid /var/run/nginx.pid;
86
+
87
+ events {
88
+
89
+ worker_connections 1024;
90
+
91
+ }
92
+
93
+ http {
94
+
95
+ include /etc/nginx/mime.types;
96
+
97
+ default_type application/octet-stream;
98
+
99
+ log_format main '$remote_addr - $remote_user [$time_local] "$request" '
100
+
101
+ '$status $body_bytes_sent "$http_referer" '
102
+
103
+ '"$http_user_agent" "$http_x_forwarded_for"';
104
+
105
+ access_log /var/log/nginx/access.log main;
106
+
107
+ sendfile on;
108
+
109
+ keepalive_timeout 65;
110
+
111
+ include /etc/nginx/conf.d/*.conf;
112
+
113
+ }
114
+
115
+ ```
116
+
117
+
118
+
9
- しかし、ロードバランサーサービスを作成した後にサービスとAngularアプリケーションの接続状態を確認したのですが、
119
+ ③Angularアプリケーションのイメージを作成する
120
+
10
-
121
+ docker build -t (Dockerユーザ名)/angular-sample:v1 .
122
+
123
+
124
+
125
+ ④Dockerリポジトリにpushする
126
+
11
- ロードバランサーの外部IPが<pending>のままになってしまいます。
127
+ docker push (Dockerユーザ名)/angular-sample:v1
128
+
129
+
130
+
131
+ ⑤Deploymentを作成する
132
+
133
+ kubectl create deployment angular-sample1 --image=docker.io/(Dockerユーザ名)/angular-sample:v1
134
+
135
+
136
+
137
+ ⑥kubectlの設定を表示する
138
+
139
+ kubectl config view
12
140
 
13
141
  ```ここに言語を入力
14
142
 
143
+ apiVersion: v1
144
+
145
+ clusters:
146
+
147
+ - cluster:
148
+
149
+ certificate-authority-data: DATA+OMITTED
150
+
151
+ server: https://kubernetes.docker.internal:6443
152
+
153
+ name: docker-desktop
154
+
155
+ - cluster:
156
+
157
+ certificate-authority: C:\Users\User.minikube\ca.crt
158
+
159
+ extensions:
160
+
161
+ - extension:
162
+
163
+ last-update: Wed, 22 Dec 2021 21:59:57 JST
164
+
15
- kubernetes1>kubectl get svc -owide
165
+ provider: minikube.sigs.k8s.io
166
+
16
-
167
+ version: v1.24.0
168
+
169
+ name: cluster_info
170
+
171
+ server: https://127.0.0.1:53345
172
+
173
+ name: minikube
174
+
175
+ contexts:
176
+
177
+ - context:
178
+
179
+ cluster: docker-desktop
180
+
181
+ user: docker-desktop
182
+
183
+ name: docker-desktop
184
+
185
+ - context:
186
+
187
+ cluster: minikube
188
+
189
+ extensions:
190
+
191
+ - extension:
192
+
17
- NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE SELECTOR
193
+ last-update: Wed, 22 Dec 2021 21:59:57 JST
194
+
18
-
195
+ provider: minikube.sigs.k8s.io
196
+
197
+ version: v1.24.0
198
+
199
+ name: context_info
200
+
201
+ namespace: default
202
+
203
+ user: minikube
204
+
205
+ name: minikube
206
+
19
- angular-sample-service-name ClusterIP XX.XXX.XX.XX <none> 80/TCP 13m deployment-label-key=deployment-label-value
207
+ current-context: minikube
208
+
20
-
209
+ kind: Config
210
+
211
+ preferences: {}
212
+
213
+ users:
214
+
215
+ - name: docker-desktop
216
+
217
+ user:
218
+
21
- angular-sample-service-name-loadbalancer LoadBalancer XX.XXX.XXX.XXX <pending> 80:31120/TCP 8m17s deployment-label-key=deployment-label-value
219
+ client-certificate-data: REDACTED
220
+
22
-
221
+ client-key-data: REDACTED
222
+
223
+ - name: minikube
224
+
225
+ user:
226
+
23
- kubernetes ClusterIP XX.XX.X.X <none> 443/TCP 36m <none>
227
+ client-certificate: C:\Users\User.minikube\profiles\minikube\client.crt
228
+
24
-
229
+ client-key: C:\Users\User.minikube\profiles\minikube\client.key
230
+
25
- ```
231
+ ```
232
+
233
+
234
+
235
+ ⑦Podをインターネット(外部)からアクセス可能にするためのServiceを作成する
236
+
237
+ kubectl expose deployment angular-sample1 --type=LoadBalancer --port=8080
238
+
239
+
240
+
241
+ ⑧Serviceの一覧を表示する
242
+
243
+ kubectl get services
26
244
 
27
245
  ```ここに言語を入力
28
246
 
29
- kubernetes1>kubectl get deployments
30
-
31
- NAME READY UP-TO-DATE AVAILABLE AGE
32
-
33
- angular-sample-deployment 1/1 1 1 29m
34
-
35
-
36
-
37
- kubernetes1>kubectl get pods
38
-
39
- NAME READY STATUS RESTARTS AGE
40
-
41
- angular-sample-deployment-cc4986595-svs9s 1/1 Running 0 88s
42
-
43
-
44
-
45
- kubernetes1>kubectl get services
46
-
47
- NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
48
-
49
- angular-sample-service-name ClusterIP XX.XXX.XX.XX <none> 80/TCP 25m
50
-
51
- angular-sample-service-name-loadbalancer LoadBalancer XX.XXX.XXX.XXX <pending> 80:31120/TCP 20m
52
-
53
- kubernetes ClusterIP XX.XX.X.X <none> 443/TCP 48m
54
-
55
-
56
-
57
- kubernetes1>kubectl get pods --output=wide
58
-
59
- NAME READY STATUS RESTARTS AGE IP NODE NOMINATED NODE READINESS GATES
60
-
61
- angular-sample-deployment-cc4986595-svs9s 1/1 Running 0 27m XXX.XX.X.X minikube <none> <none>
62
-
63
- ```
64
-
65
-
66
-
67
- angular-sample-deployment.yaml
68
-
69
- ```yaml
70
-
71
- apiVersion: apps/v1
72
-
73
- kind: Deployment
74
-
75
- metadata:
76
-
77
- name: angular-sample-deployment
78
-
79
- labels:
80
-
81
- app: angular-sample-container
82
-
83
- spec:
84
-
85
- replicas: 1
86
-
87
- selector:
88
-
89
- matchLabels:
90
-
91
- app: angular-sample-container
92
-
93
- template:
94
-
95
- metadata:
96
-
97
- labels:
98
-
99
- app: angular-sample-container
100
-
101
- label-key : label-value
102
-
103
- spec:
104
-
105
- containers:
106
-
107
- - name: angular-sample-container
108
-
109
- image: (Dockerのユーザ名)/angular-sample:v1
110
-
111
- imagePullPolicy: Always
112
-
113
- ports:
114
-
115
- - containerPort: 80
116
-
117
- ```
118
-
119
- angular-sample-service.yaml
120
-
121
- ```yaml
122
-
123
- apiVersion: v1
124
-
125
- kind: Service
126
-
127
- metadata:
128
-
129
- labels:
130
-
131
- service-label-key: service-label-value
132
-
133
- name: angular-sample-service-name
134
-
135
- spec:
136
-
137
- type: ClusterIP
138
-
139
- ports:
140
-
141
- - name: angular-sample-service-port-name
142
-
143
- port: 80
144
-
145
- protocol: TCP
146
-
147
- selector:
148
-
149
- deployment-label-key: deployment-label-value
150
-
151
- ```
152
-
153
-
154
-
155
- angular-sample-load-balancer-service.yaml
156
-
157
- ```yaml
158
-
159
- apiVersion: v1
160
-
161
- kind: Service
162
-
163
- metadata:
164
-
165
- labels:
166
-
167
- service-label-key: service-label-value
168
-
169
- name: angular-sample-service-name-loadbalancer
170
-
171
- spec:
172
-
173
- type: LoadBalancer
174
-
175
- ports:
176
-
177
- - name: angular-sample-service-port-name
178
-
179
- port: 80
180
-
181
- protocol: TCP
182
-
183
- selector:
184
-
185
- deployment-label-key: deployment-label-value
186
-
187
-
188
-
189
- #for creating a deployment in kubernetes
190
-
191
- #kubectl apply -f angular-sample-deployment.yaml
192
-
193
- ##for internal communicating to angualar application
194
-
195
- #kubeclt apply -f angular-sample-service.yaml
196
-
197
- #for access the angular application outside kubernetes
198
-
199
- #kubeclt apply -f angular-sample-load-balancer-service.yaml
200
-
201
- ```
202
-
203
-
204
-
205
- pending状態について色々と調べていますが、いまだに解決できていません。
206
-
207
- kubernetesのminikubeにお詳しい方がいましたらご回答いただけないでしょうか？
247
+ NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
248
+
249
+ angular-sample1 LoadBalancer 10.102.118.122 <pending> 8080:30645/TCP 11m
250
+
251
+ kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 89m
252
+
253
+ ```
254
+
255
+ ⑨Service(angular-sample1)にアクセスする
256
+
257
+ minikube service angular-sample1
258
+
259
+
260
+
261
+ しかし、以下の画面となる
262
+
263
+ ![イメージ説明](cef44d21964859af68901ccfaef3dfb8.png)
264
+
265
+
266
+
267
+ Dockerfileの設定が悪そうな気がしていて解決方法を調べていますが、今のところ見つかっておりません。
268
+
269
+ Kubernetesのminikubeの使い方にお詳しい方がいましたら、ご回答いただけないでしょうか？

4

説明を修正

2021/12/22 13:41

投稿

Linkey
Linkey

スコア77

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,46 @@
24
24
 
25
25
  ```
26
26
 
27
+ ```ここに言語を入力
28
+
29
+ kubernetes1>kubectl get deployments
30
+
31
+ NAME READY UP-TO-DATE AVAILABLE AGE
32
+
33
+ angular-sample-deployment 1/1 1 1 29m
34
+
35
+
36
+
37
+ kubernetes1>kubectl get pods
38
+
39
+ NAME READY STATUS RESTARTS AGE
40
+
41
+ angular-sample-deployment-cc4986595-svs9s 1/1 Running 0 88s
42
+
43
+
44
+
45
+ kubernetes1>kubectl get services
46
+
47
+ NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
48
+
49
+ angular-sample-service-name ClusterIP XX.XXX.XX.XX <none> 80/TCP 25m
50
+
51
+ angular-sample-service-name-loadbalancer LoadBalancer XX.XXX.XXX.XXX <pending> 80:31120/TCP 20m
52
+
53
+ kubernetes ClusterIP XX.XX.X.X <none> 443/TCP 48m
54
+
55
+
56
+
57
+ kubernetes1>kubectl get pods --output=wide
58
+
59
+ NAME READY STATUS RESTARTS AGE IP NODE NOMINATED NODE READINESS GATES
60
+
61
+ angular-sample-deployment-cc4986595-svs9s 1/1 Running 0 27m XXX.XX.X.X minikube <none> <none>
62
+
63
+ ```
64
+
65
+
66
+
27
67
  angular-sample-deployment.yaml
28
68
 
29
69
  ```yaml

3

説明を修正

2021/12/21 13:17

投稿

Linkey
Linkey

スコア77

test CHANGED
File without changes
test CHANGED
@@ -1,40 +1,30 @@
1
1
  Kubernetesの勉強をしているものです。
2
2
 
3
+ 以下のサイトを参考にブラウザからAngularアプリケーションにアクセスするための設定を行っています。
4
+
3
- MacでminikubeとDocker DesktopをインストールしてDockerで作成したAngularアプリケーションのイメージを使ってkubernetesのpodを作成してブラウザからアクセスしようとしています。kubectl applyでマニフェストファイルからリソースを作成したところ、podのSTATUSがImagePullBackOffになってしまいます。
5
+ https://blog.mayadata.io/openebs/steps-to-deploy-angular-application-on-kubernetes
4
6
 
5
7
 
6
8
 
7
- [実施手順]
9
+ しかし、ロードバランサーサービスを作成した後にサービスとAngularアプリケーションの接続状態を確認したのですが、
8
10
 
9
- 1 MacにDocker Desktopとminikubeをインストールする
11
+ ロードバランサーの外部IPが<pending>のままになってしまいます。
10
-
11
- 2 minikube start --driver=dockerを実行
12
-
13
- 3 dockerでangularアプリケーションのイメージを作成
14
-
15
- 実施したコマンドは以下
16
-
17
- $ docker build -t angular-sample:1.0 .
18
-
19
-
20
-
21
- 4 イメージが作成できていることを確認する
22
-
23
- $ docker images
24
12
 
25
13
  ```ここに言語を入力
26
14
 
27
- REPOSITORY TAG IMAGE ID CREATED SIZE
15
+ kubernetes1>kubectl get svc -owide
28
16
 
29
- angular-sample 1.0 aeebdaecc92c 3 hours ago 21.5MB
17
+ NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE SELECTOR
30
18
 
19
+ angular-sample-service-name ClusterIP XX.XXX.XX.XX <none> 80/TCP 13m deployment-label-key=deployment-label-value
20
+
21
+ angular-sample-service-name-loadbalancer LoadBalancer XX.XXX.XXX.XXX <pending> 80:31120/TCP 8m17s deployment-label-key=deployment-label-value
22
+
31
- gcr.io/k8s-minikube/kicbase v0.0.28 e2a6c047bedd 2 months ago 1.08GB
23
+ kubernetes ClusterIP XX.XX.X.X <none> 443/TCP 36m <none>
32
24
 
33
25
  ```
34
26
 
35
-
36
-
37
- 5 angular-sample-deployent.yamlを作成
27
+ angular-sample-deployment.yaml
38
28
 
39
29
  ```yaml
40
30
 
@@ -46,15 +36,19 @@
46
36
 
47
37
  name: angular-sample-deployment
48
38
 
39
+ labels:
40
+
41
+ app: angular-sample-container
42
+
49
43
  spec:
44
+
45
+ replicas: 1
50
46
 
51
47
  selector:
52
48
 
53
49
  matchLabels:
54
50
 
55
- app: angular-sample
51
+ app: angular-sample-container
56
-
57
- replicas: 1
58
52
 
59
53
  template:
60
54
 
@@ -62,124 +56,112 @@
62
56
 
63
57
  labels:
64
58
 
65
- app: angular-sample
59
+ app: angular-sample-container
60
+
61
+ label-key : label-value
66
62
 
67
63
  spec:
68
64
 
69
65
  containers:
70
66
 
71
- - name: angular-sample
67
+ - name: angular-sample-container
72
68
 
73
- image: angular-sample:1.0
69
+ image: (Dockerのユーザ名)/angular-sample:v1
70
+
71
+ imagePullPolicy: Always
74
72
 
75
73
  ports:
76
74
 
77
- - containerPort: 80
75
+ - containerPort: 80
76
+
77
+ ```
78
+
79
+ angular-sample-service.yaml
80
+
81
+ ```yaml
82
+
83
+ apiVersion: v1
84
+
85
+ kind: Service
86
+
87
+ metadata:
88
+
89
+ labels:
90
+
91
+ service-label-key: service-label-value
92
+
93
+ name: angular-sample-service-name
94
+
95
+ spec:
96
+
97
+ type: ClusterIP
98
+
99
+ ports:
100
+
101
+ - name: angular-sample-service-port-name
102
+
103
+ port: 80
104
+
105
+ protocol: TCP
106
+
107
+ selector:
108
+
109
+ deployment-label-key: deployment-label-value
78
110
 
79
111
  ```
80
112
 
81
113
 
82
114
 
83
- 6 kubectl applyコマンドを実行
115
+ angular-sample-load-balancer-service.yaml
84
116
 
85
- ```ここに言語を入力
117
+ ```yaml
86
118
 
87
- $ kubectl apply -f angular-sample-deployent.yaml
119
+ apiVersion: v1
88
120
 
121
+ kind: Service
122
+
123
+ metadata:
124
+
125
+ labels:
126
+
127
+ service-label-key: service-label-value
128
+
129
+ name: angular-sample-service-name-loadbalancer
130
+
131
+ spec:
132
+
133
+ type: LoadBalancer
134
+
135
+ ports:
136
+
137
+ - name: angular-sample-service-port-name
138
+
139
+ port: 80
140
+
141
+ protocol: TCP
142
+
143
+ selector:
144
+
145
+ deployment-label-key: deployment-label-value
146
+
147
+
148
+
149
+ #for creating a deployment in kubernetes
150
+
89
- deployment.apps/angular-sample-deployment created
151
+ #kubectl apply -f angular-sample-deployment.yaml
152
+
153
+ ##for internal communicating to angualar application
154
+
155
+ #kubeclt apply -f angular-sample-service.yaml
156
+
157
+ #for access the angular application outside kubernetes
158
+
159
+ #kubeclt apply -f angular-sample-load-balancer-service.yaml
90
160
 
91
161
  ```
92
162
 
93
163
 
94
164
 
95
- 7 podが状態を確認する
96
-
97
- ```ここに言語を入力
98
-
99
- $ kubectl get deployments
100
-
101
- NAME READY UP-TO-DATE AVAILABLE AGE
102
-
103
- angular-sample-deployment 0/1 1 0 22s
104
-
105
-
106
-
107
- $ kubectl get pods
108
-
109
- NAME READY STATUS RESTARTS AGE
110
-
111
- angular-sample-deployment-5575794849-r229w 0/1 ImagePullBackOff 0 35s
112
-
113
- ```
114
-
115
-
116
-
117
- Angularアプリケーションのイメージはローカルで作成していますが、Dockerリポジトリにはプッシュしていません。
118
-
119
- DockerリポジトリにプッシュしないとKubernetesでは作成したAngularアプリケーションを利用することはできないのでしょうか？
120
-
121
- Podの起動失敗について色々と調べていますが、いまだに解決できていません。
165
+ pending状態について色々と調べていますが、いまだに解決できていません。
122
166
 
123
167
  kubernetesのminikubeにお詳しい方がいましたらご回答いただけないでしょうか？
124
-
125
-
126
-
127
- ちなみにDockerfileの中身は以下のようになっています。
128
-
129
- ```Dockerfile
130
-
131
- # Angualr のビルドする環境として node をインストール
132
-
133
- FROM node:16.13.1-alpine3.14 as build-stage
134
-
135
-
136
-
137
- # npmのパッケージをインストールする
138
-
139
- RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn
140
-
141
-
142
-
143
- #angular-sample-appを作業ディレクトリとする。
144
-
145
- WORKDIR /angular-sample-app
146
-
147
-
148
-
149
- #コンテナ上の/angular-sample-app/配下にコピーする。
150
-
151
- COPY ./angular-sample-app/package*.json ./
152
-
153
-
154
-
155
- # npmパッケージをDockerのコンテナにコピーする
156
-
157
- COPY ./angular-sample-app/ ./
158
-
159
-
160
-
161
- ARG configuration=production
162
-
163
-
164
-
165
- RUN npm run build -- --configuration $configuration
166
-
167
-
168
-
169
- FROM nginx:1.17.3-alpine
170
-
171
-
172
-
173
- #ビルドしたものを/var/www/htmlへコピーする
174
-
175
- COPY --from=build-stage ./angular-sample-app/dist/angular-sample-app/ /var/www/html
176
-
177
-
178
-
179
- COPY ./docker/nginx/nginx.conf /etc/nginx/
180
-
181
-
182
-
183
- RUN echo "now building..."
184
-
185
- ```

2

説明を修正

2021/12/21 13:13

投稿

Linkey
Linkey

スコア77

test CHANGED
File without changes
test CHANGED
@@ -114,6 +114,10 @@
114
114
 
115
115
 
116
116
 
117
+ Angularアプリケーションのイメージはローカルで作成していますが、Dockerリポジトリにはプッシュしていません。
118
+
119
+ DockerリポジトリにプッシュしないとKubernetesでは作成したAngularアプリケーションを利用することはできないのでしょうか？
120
+
117
121
  Podの起動失敗について色々と調べていますが、いまだに解決できていません。
118
122
 
119
123
  kubernetesのminikubeにお詳しい方がいましたらご回答いただけないでしょうか？

1

タイトルの修正

2021/12/21 12:59

投稿

Linkey
Linkey

スコア77

test CHANGED
@@ -1 +1 @@
1
- kubectl minikubeを使ってAngularアプリケーションをブラウザからアクセスしたい
1
+ kubectl minikubeを使ってブラウザからAngularアプリケーションへアクセスしたい
test CHANGED
File without changes