1
00:00:01,470 --> 00:00:05,650
The last big thing we need to do inside of our cluster is integrate that react application.

2
00:00:05,660 --> 00:00:08,900
This is going to be one of the last big topics to cover around communities.

3
00:00:08,910 --> 00:00:13,920
I know all this Cuban neti stuff has been a little bit of a slog but we are almost at the end and I

4
00:00:13,920 --> 00:00:18,960
want to repeat just one more time that even though doing a lot of stuff by hand is kind of annoying

5
00:00:19,020 --> 00:00:22,990
little bit tedious after we get through this last topic we're gonna start to look at a tool that's going

6
00:00:22,990 --> 00:00:27,040
to automate a lot of this stuff for us and make our lives a little bit easier.

7
00:00:27,090 --> 00:00:27,330
All right.

8
00:00:27,360 --> 00:00:27,960
But that might.

9
00:00:27,990 --> 00:00:33,630
Let's take a look at how we're going to get that react application inside of your so our ReACT application

10
00:00:33,660 --> 00:00:36,700
is actually the create react app development server.

11
00:00:36,930 --> 00:00:42,360
We're going to house this thing inside of a pod so we're going to create a new Docker image or our ReACT

12
00:00:42,360 --> 00:00:44,400
application or the development server.

13
00:00:44,640 --> 00:00:49,910
We're then going to create a container inside of a pod and place it inside of our cluster.

14
00:00:49,920 --> 00:00:55,290
One thing I want to clarify about what this react app dev server does is that whenever a user opens

15
00:00:55,290 --> 00:01:01,030
up their browser and navigates to our application we're going to really be attempting to connect to

16
00:01:01,030 --> 00:01:03,320
that react app dev server.

17
00:01:03,340 --> 00:01:08,230
The only goal of that dev server is to take code that you and I write inside a very act application

18
00:01:08,560 --> 00:01:12,930
and then generate some H T mail JavaScript in CFS files out of it.

19
00:01:12,970 --> 00:01:19,450
So during the initial navigation attempt to our application running inside this cluster the only thing

20
00:01:19,480 --> 00:01:25,850
that's react app dev servers doing is returning some HMRC SS and JavaScript what this react app server

21
00:01:25,850 --> 00:01:32,960
is not doing is making any requests at any point in time over two posts over two comments.

22
00:01:32,960 --> 00:01:35,270
Query anything like that.

23
00:01:35,270 --> 00:01:42,580
The actual requests for data are being issued from the user's browser so we send over that HCM LCROSS

24
00:01:42,610 --> 00:01:43,760
and JavaScript stuff.

25
00:01:43,760 --> 00:01:49,130
Then the react app boots up inside the user's browser and then inside of the browser the react app is

26
00:01:49,130 --> 00:01:53,450
going to try to reach out to the query service and get some posts and comments.

27
00:01:53,450 --> 00:02:00,800
After serving up the initial T MLC SS and JavaScript stuff the development server it is no longer relevant

28
00:02:00,800 --> 00:02:02,000
whatsoever.

29
00:02:02,120 --> 00:02:07,120
So no requests are being issued from that dev server directly over to our other pots.

30
00:02:07,190 --> 00:02:09,850
All these requests are coming from the browser.

31
00:02:10,070 --> 00:02:14,720
So this starts to open up a kind of interesting question how are you going to make sure that the react

32
00:02:14,720 --> 00:02:18,890
app can somehow make requests to all of these different pots.

33
00:02:18,920 --> 00:02:24,200
We need to reach out to at least the query service comments and posts react that doesn't technically

34
00:02:24,200 --> 00:02:26,400
need to reach out to moderation but whatever.

35
00:02:26,450 --> 00:02:31,660
Let's forget that for just a second so to make sure that the react app can reach out to all these different

36
00:02:31,660 --> 00:02:33,730
pods and the containers running inside them.

37
00:02:33,730 --> 00:02:36,250
We have two options available to us.

38
00:02:36,250 --> 00:02:39,060
One option is going to be pretty bad and we're definitely not going to do it.

39
00:02:39,070 --> 00:02:42,460
I just want to show you this option Make sure you understand that we're not going to do this in any

40
00:02:42,460 --> 00:02:43,610
serious application.

41
00:02:43,720 --> 00:02:45,500
So here's possibility number one.

42
00:02:45,640 --> 00:02:46,490
Probably not good.

43
00:02:46,510 --> 00:02:48,240
We don't want to do this.

44
00:02:48,350 --> 00:02:52,500
So option number one to make sure that the react application can reach out to these different pods.

45
00:02:52,540 --> 00:02:58,380
We could create a node port service or post comments query and moderation.

46
00:02:58,500 --> 00:03:03,900
Remember that a node ports service is going to expose a pod to the outside world or to traffic outside

47
00:03:03,900 --> 00:03:05,120
the cluster.

48
00:03:05,120 --> 00:03:09,990
So inside of a react application we could write out some code that would make requests to these different

49
00:03:09,990 --> 00:03:14,600
node port services and access the underlying pods to get all the information that is required.

50
00:03:14,610 --> 00:03:19,560
The reason that this is not a good approach is that remember when we create a node port service we are

51
00:03:19,650 --> 00:03:21,800
essentially opening up a random ports.

52
00:03:21,810 --> 00:03:24,930
We can't technically specify an exact port but more or less.

53
00:03:24,960 --> 00:03:27,510
Let's just say it's a random port inside of our cluster.

54
00:03:27,540 --> 00:03:32,580
And so if we ever changed a node port there's the possibility that who knows maybe the port that we

55
00:03:32,580 --> 00:03:33,930
get assigned would be different.

56
00:03:33,930 --> 00:03:38,520
And so if we ever start to change these ports we would have to go back to a react application and change

57
00:03:38,520 --> 00:03:44,030
the port inside of our code and updated to reflect the new node port.

58
00:03:44,040 --> 00:03:48,640
So this is probably not a good option for that reason and for a couple of others as well.

59
00:03:48,960 --> 00:03:53,700
Rather than trying to expose all of our pods using Node ports we're going to take a look at that last

60
00:03:53,700 --> 00:03:59,070
kind of service that we had discussed in the previous set of videos around services in general.

61
00:03:59,070 --> 00:04:00,720
So this is what we are going to do.

62
00:04:00,760 --> 00:04:03,840
This is what we're gonna do in production environment in a development environment.

63
00:04:03,840 --> 00:04:06,480
This is the right way to do this stuff.

64
00:04:06,480 --> 00:04:09,530
We're going to create a load balancer service.

65
00:04:09,600 --> 00:04:15,870
The goal this load balancer service is to have one single point of entry into our entire cluster.

66
00:04:15,870 --> 00:04:20,340
We're then going to make sure that our ReACT application is going to make requests to access that load

67
00:04:20,340 --> 00:04:26,310
balancer service and then we're gonna place some logic so actual code or configuration inside of this

68
00:04:26,310 --> 00:04:31,350
load balancer service that's going to take these incoming requests and then route them off to the appropriate

69
00:04:31,350 --> 00:04:34,900
pod and just be clear when I say it read it off to the appropriate pod.

70
00:04:34,920 --> 00:04:38,370
Once again what we're really reaching out to is the cluster IP service.

71
00:04:38,370 --> 00:04:42,730
We're going to create for each of these different pods so the react app is gonna reach out to a load

72
00:04:42,730 --> 00:04:48,290
balancer request gets forwarded onto the appropriate pod response comes through the load balancer and

73
00:04:48,290 --> 00:04:51,210
back to the react application.

74
00:04:51,260 --> 00:04:56,180
So this is all going to be around really this load balancer service we do of course have to go through

75
00:04:56,180 --> 00:05:00,550
writing out some more configuration building another image and so on from the react application that's

76
00:05:00,550 --> 00:05:02,710
gonna be a pretty small part where we're really focused on.

77
00:05:02,710 --> 00:05:05,680
Here is this load balancer service.

78
00:05:05,690 --> 00:05:05,970
All right.

79
00:05:05,970 --> 00:05:08,000
So now we've got an idea of what we need to do.

80
00:05:08,000 --> 00:05:12,200
Quick pause right here and we'll get some notes on this load balancer service and the general strategy

81
00:05:12,200 --> 00:05:12,950
in just a moment.