1
00:00:02,330 --> 00:00:05,939
So how can we deploy as such a frontend application

2
00:00:05,939 --> 00:00:08,440
so that we don't have to run docker run locally

3
00:00:08,440 --> 00:00:10,324
which of course wouldn't help the users

4
00:00:10,324 --> 00:00:13,500
which try to reach our application.

5
00:00:13,500 --> 00:00:17,380
Well, we already did deploy frontend early in the course.

6
00:00:17,380 --> 00:00:20,090
And indeed here, we already got everything we need.

7
00:00:20,090 --> 00:00:22,230
We've got a multistage Dockerfile

8
00:00:22,230 --> 00:00:24,040
which builds the application

9
00:00:24,040 --> 00:00:26,659
and then sets up an NGINX web server

10
00:00:26,659 --> 00:00:29,400
which serves the build application

11
00:00:29,400 --> 00:00:31,150
and therefore all we gotta do

12
00:00:31,150 --> 00:00:34,475
to make this web application reachable

13
00:00:34,475 --> 00:00:37,820
is that we need to run this as a container,

14
00:00:37,820 --> 00:00:40,570
which is what we did in the last lecture already

15
00:00:40,570 --> 00:00:42,483
locally with docker run.

16
00:00:43,510 --> 00:00:47,120
Now we just need to move that into a pod

17
00:00:47,120 --> 00:00:51,880
on Kubernetes to make it reachable by our end users.

18
00:00:51,880 --> 00:00:54,150
And I want to create a new pod here

19
00:00:54,150 --> 00:00:56,090
and therefor a new deployment

20
00:00:56,090 --> 00:00:58,360
because it's not tightly coupled

21
00:00:58,360 --> 00:01:00,363
to one of my other services.

22
00:01:01,200 --> 00:01:02,969
You could say that it's tightly coupled

23
00:01:02,969 --> 00:01:04,980
to the tasks backend

24
00:01:04,980 --> 00:01:06,786
because we're sending requests there

25
00:01:06,786 --> 00:01:09,620
but that's not the tight coupling which I mean,

26
00:01:09,620 --> 00:01:10,620
I mean after all

27
00:01:10,620 --> 00:01:14,240
we can also send requests there from inside Postman

28
00:01:14,240 --> 00:01:16,628
and our frontend might also send requests

29
00:01:16,628 --> 00:01:20,260
to other services like the user's API here.

30
00:01:20,260 --> 00:01:21,440
It doesn't do that

31
00:01:21,440 --> 00:01:25,610
in this example, but it's not unrealistic that it should.

32
00:01:25,610 --> 00:01:29,037
So there is no tight coupling with one specific API

33
00:01:29,037 --> 00:01:31,320
and therefore I'll create a brand new

34
00:01:31,320 --> 00:01:34,993
frontend-deployment.yaml file.

35
00:01:36,220 --> 00:01:39,787
Now in there I'll copy the code from the tasks deployment

36
00:01:39,787 --> 00:01:42,216
or from the users deployment

37
00:01:42,216 --> 00:01:44,810
into the frontend deployment file

38
00:01:44,810 --> 00:01:48,206
and of course rename it to frontend-deployment

39
00:01:48,206 --> 00:01:51,350
match the label app frontend

40
00:01:51,350 --> 00:01:53,853
and set this as a label down there.

41
00:01:54,890 --> 00:01:57,603
And then here, the container which I wanna use

42
00:01:57,603 --> 00:01:59,400
is also named frontend

43
00:01:59,400 --> 00:02:01,358
and of course here I'm referring to the

44
00:02:01,358 --> 00:02:04,740
kub-demo-frontend container

45
00:02:04,740 --> 00:02:08,199
which we have yet to push to Docker Hub by the way

46
00:02:08,199 --> 00:02:09,820
we built it locally,

47
00:02:09,820 --> 00:02:13,083
but as you learned earlier, that won't really help us.

48
00:02:14,340 --> 00:02:17,669
Now what about this address or this environment variable?

49
00:02:17,669 --> 00:02:20,690
Well, for the moment we don't need it.

50
00:02:20,690 --> 00:02:23,910
So I will actually remove that here.

51
00:02:23,910 --> 00:02:28,250
And instead we have this pretty lean deployment YAML file

52
00:02:28,250 --> 00:02:29,383
for the frontend.

53
00:02:30,357 --> 00:02:34,600
Now, of course the frontend should not be cluster internal

54
00:02:34,600 --> 00:02:37,430
but the users visiting our website

55
00:02:37,430 --> 00:02:38,780
should be able to reach it

56
00:02:38,780 --> 00:02:39,743
and to see it.

57
00:02:40,630 --> 00:02:43,460
Therefore, we also want a service which exposes it

58
00:02:43,460 --> 00:02:44,750
to the public.

59
00:02:44,750 --> 00:02:48,580
Hence I'll add a frontend-service.yaml file.

60
00:02:48,580 --> 00:02:50,690
Use the user's service set up

61
00:02:50,690 --> 00:02:52,450
and copy it over data

62
00:02:52,450 --> 00:02:55,790
and now just rename it to frontend service

63
00:02:55,790 --> 00:02:58,370
and select parts which have an app label

64
00:02:58,370 --> 00:03:00,355
with a value of frontend

65
00:03:00,355 --> 00:03:03,170
but I'll stick to the type load balancer

66
00:03:03,170 --> 00:03:05,926
because this is a service that should be accessible

67
00:03:05,926 --> 00:03:08,210
from the entire world.

68
00:03:08,210 --> 00:03:10,320
So it should not be cluster internal

69
00:03:10,320 --> 00:03:14,320
and there for load balancer is the type to use.

70
00:03:14,320 --> 00:03:16,210
Now for the pots

71
00:03:16,210 --> 00:03:20,970
in this frontend application, we are listening on pot 80

72
00:03:21,850 --> 00:03:25,203
that's all the pot which is specified in a Dockerfile,

73
00:03:26,100 --> 00:03:29,610
and therefore I will of course also

74
00:03:29,610 --> 00:03:32,570
send requests to the target pot 80,

75
00:03:32,570 --> 00:03:34,820
but I also wanna listen on pot 80

76
00:03:34,820 --> 00:03:37,650
on this service IP address.

77
00:03:37,650 --> 00:03:39,633
And that's the finished service though.

78
00:03:41,010 --> 00:03:43,520
Now with that, we just have to go

79
00:03:43,520 --> 00:03:46,800
into that Kubernetes folder with cd Kubernetes

80
00:03:46,800 --> 00:03:51,470
and then run kube control apply-F to apply the deployment

81
00:03:51,470 --> 00:03:52,780
and service.

82
00:03:52,780 --> 00:03:54,282
However, keep in mind

83
00:03:54,282 --> 00:03:57,450
that we need to push this image first

84
00:03:57,450 --> 00:03:59,398
and therefore before doing that,

85
00:03:59,398 --> 00:04:04,398
I will actually run docker push academind/kub-demo-frontend.

86
00:04:06,651 --> 00:04:08,970
However, before you hit enter

87
00:04:08,970 --> 00:04:12,690
make sure that such a repository exists on Docker Hub.

88
00:04:12,690 --> 00:04:14,050
It doesn't for me.

89
00:04:14,050 --> 00:04:15,516
So I will go to Docker Hub,

90
00:04:15,516 --> 00:04:19,500
click on repositories, create a repository

91
00:04:19,500 --> 00:04:23,460
give it that name kub-demo-frontend

92
00:04:24,470 --> 00:04:26,033
and click create.

93
00:04:27,350 --> 00:04:30,300
And once this repository is created here

94
00:04:30,300 --> 00:04:33,580
on Docker Hub, we can run docker push

95
00:04:33,580 --> 00:04:35,830
your account name slash

96
00:04:35,830 --> 00:04:37,950
and then this repository name

97
00:04:37,950 --> 00:04:40,560
which should be your local image name too,

98
00:04:40,560 --> 00:04:42,513
and this image will be pushed,

99
00:04:43,450 --> 00:04:45,020
and once it's pushed

100
00:04:45,020 --> 00:04:47,915
we can then apply our deployment and service

101
00:04:47,915 --> 00:04:50,075
because then Kubernetes will be able

102
00:04:50,075 --> 00:04:53,250
to find this image on Docker Hub.

103
00:04:53,250 --> 00:04:56,710
Which of course is an important prerequisite.

104
00:04:56,710 --> 00:04:59,833
So let's wait for the push process to finish.

105
00:05:01,010 --> 00:05:02,973
And now that it's did finish

106
00:05:02,973 --> 00:05:07,973
let's run kubectl apply-f=frontend-service.yaml

107
00:05:10,650 --> 00:05:14,720
and -F=frontend-deployment.yaml.

108
00:05:15,760 --> 00:05:18,940
To apply these two new files in which we worked

109
00:05:18,940 --> 00:05:21,700
and they offered to deploy this frontend

110
00:05:21,700 --> 00:05:24,407
in a pod with a service.

111
00:05:24,407 --> 00:05:28,210
If you hit enter, both shall be created,

112
00:05:28,210 --> 00:05:30,410
and if you run get pods thereafter

113
00:05:30,410 --> 00:05:32,640
we see that this container is being created

114
00:05:32,640 --> 00:05:36,070
and soon it should be up and running.

115
00:05:36,070 --> 00:05:38,793
So let's wait until that's the case.

116
00:05:39,700 --> 00:05:41,150
Here we go,

117
00:05:41,150 --> 00:05:44,790
and of course now we also wanna expose our new service.

118
00:05:44,790 --> 00:05:47,316
We can see it with, if we get all services

119
00:05:47,316 --> 00:05:50,350
but in order to expose it, of course, as always

120
00:05:50,350 --> 00:05:55,020
we need to run minikube service and then your service name

121
00:05:55,020 --> 00:06:00,020
which in my case here is frontend-service.

122
00:06:00,220 --> 00:06:01,664
And now we get a URL which we can

123
00:06:01,664 --> 00:06:05,350
use to visit this running application.

124
00:06:05,350 --> 00:06:08,620
And it should open up in the browser automatically.

125
00:06:08,620 --> 00:06:10,920
Otherwise simply grab that URL

126
00:06:10,920 --> 00:06:11,793
and enter it.

127
00:06:12,830 --> 00:06:15,620
And this is now the react application served

128
00:06:15,620 --> 00:06:17,960
by our Kubernetes cluster.

129
00:06:17,960 --> 00:06:22,960
And if I add a third task, which is, "Learn Kubernetes,"

130
00:06:23,050 --> 00:06:24,820
I can also fetch that

131
00:06:24,820 --> 00:06:26,243
and it works.

132
00:06:27,330 --> 00:06:31,233
We also shouldn't have any errors here in the console log.

133
00:06:32,200 --> 00:06:33,250
So that is working

134
00:06:33,250 --> 00:06:35,500
and that is how we can deploy this

135
00:06:35,500 --> 00:06:37,970
but we have one floor

136
00:06:37,970 --> 00:06:41,524
or one aspect which I'm not too happy about

137
00:06:41,524 --> 00:06:45,150
and that's in our frontend code, in the source folder

138
00:06:45,150 --> 00:06:46,950
in the app JS file.

139
00:06:46,950 --> 00:06:51,060
It's this address here to which we sent the request.

140
00:06:51,060 --> 00:06:52,950
This is the address

141
00:06:52,950 --> 00:06:56,090
of our deployed tasks service in the end.

142
00:06:56,090 --> 00:06:59,720
It works, but of course we have to hardcode

143
00:06:59,720 --> 00:07:02,920
that here into this source code.

144
00:07:02,920 --> 00:07:05,580
Now that's not necessarily horrible

145
00:07:05,580 --> 00:07:07,254
because typically if you deploy this

146
00:07:07,254 --> 00:07:12,190
on a real cloud provider and not just with minikube,

147
00:07:12,190 --> 00:07:14,384
this address will be pretty stable

148
00:07:14,384 --> 00:07:17,370
and you might even map your own domain

149
00:07:17,370 --> 00:07:21,110
to this IP address so that it's super stable.

150
00:07:21,110 --> 00:07:22,710
So it might not be horrible

151
00:07:22,710 --> 00:07:25,993
that you have to hardcode into your code.

152
00:07:26,840 --> 00:07:29,140
And indeed earlier on in the course

153
00:07:29,140 --> 00:07:31,950
when we deployed everything we did that.

154
00:07:31,950 --> 00:07:36,050
We did hardcode the domain which we had

155
00:07:36,050 --> 00:07:40,223
for our deployed application there into our frontend code.

156
00:07:41,170 --> 00:07:44,290
Nonetheless, I wanna show you a little trick now

157
00:07:44,290 --> 00:07:46,440
a trick we could have used early on

158
00:07:46,440 --> 00:07:47,910
in the course as well

159
00:07:47,910 --> 00:07:50,473
but which I now finally do wanna use.