1 00:00:02,290 --> 00:00:05,510 So for deploying this multi-stage build file. 2 00:00:05,510 --> 00:00:06,960 We, first of all, should 3 00:00:06,960 --> 00:00:10,840 of course verify whether our code needs any adjustments 4 00:00:10,840 --> 00:00:12,600 or, for example, if we need any 5 00:00:12,600 --> 00:00:15,070 environment variables that should be considered 6 00:00:15,070 --> 00:00:16,560 in the build process. 7 00:00:16,560 --> 00:00:19,560 And indeed there is one adjustment we should make. 8 00:00:19,560 --> 00:00:22,170 I'm sending a bunch of HTTP requests 9 00:00:22,170 --> 00:00:25,090 and I'm always sending them to local host here. 10 00:00:25,090 --> 00:00:28,220 Locally, on my machine when running this container 11 00:00:28,220 --> 00:00:31,950 this will work per our docker-compose setup 12 00:00:31,950 --> 00:00:34,083 and the way we launched this before. 13 00:00:34,970 --> 00:00:36,760 But when we deploy this 14 00:00:36,760 --> 00:00:41,470 for example, with AWS ECS, this won't work anymore. 15 00:00:41,470 --> 00:00:43,520 You might argue that you learned 16 00:00:43,520 --> 00:00:47,850 that on AWS ECS, local host is a special name 17 00:00:47,850 --> 00:00:49,210 which indeed will allow 18 00:00:49,210 --> 00:00:52,350 this dockerized application to send requests 19 00:00:52,350 --> 00:00:57,150 to other containers running into same AWS ECS task. 20 00:00:57,150 --> 00:01:01,300 But that would only be true, if this code would be executed 21 00:01:01,300 --> 00:01:04,209 on the server inside of the container, 22 00:01:04,209 --> 00:01:07,220 but keep in mind what you learned earlier in the course 23 00:01:07,220 --> 00:01:08,570 this react code, 24 00:01:08,570 --> 00:01:11,590 is code that runs in the browser in the end. 25 00:01:11,590 --> 00:01:14,620 And therefore this request is not sent 26 00:01:14,620 --> 00:01:18,210 from inside the container, but from inside the browser 27 00:01:18,210 --> 00:01:22,340 which runs on the machine of your end users. 28 00:01:22,340 --> 00:01:25,560 So then local hosts, will refer to their machine, 29 00:01:25,560 --> 00:01:30,560 not to your task or container or ECS managed server. 30 00:01:31,660 --> 00:01:34,434 So therefore local host is still wrong. 31 00:01:34,434 --> 00:01:37,520 URL to be used here, the wrong domain. 32 00:01:37,520 --> 00:01:40,130 Now the proper domain we should use here, 33 00:01:40,130 --> 00:01:44,230 now depends on how we're going to deploy this. 34 00:01:44,230 --> 00:01:48,380 And I plan on deploying this in the same task 35 00:01:48,380 --> 00:01:52,610 as my rest API, my note rest API. 36 00:01:52,610 --> 00:01:55,790 That means that ultimately it will be reachable 37 00:01:55,790 --> 00:01:56,893 through the same URL. 38 00:01:57,880 --> 00:02:00,360 This front end application will be reachable 39 00:02:00,360 --> 00:02:01,410 through the same URL. 40 00:02:02,620 --> 00:02:04,680 And therefore we can actually 41 00:02:04,680 --> 00:02:07,400 eliminate this entire domain here 42 00:02:07,400 --> 00:02:10,530 and just send a request to slash goals 43 00:02:10,530 --> 00:02:14,930 which then by default, will be sent to the same server 44 00:02:14,930 --> 00:02:17,840 as was used for serving this website. 45 00:02:17,840 --> 00:02:20,850 That's a browser default behavior. 46 00:02:20,850 --> 00:02:24,850 So we can get rid of this part here 47 00:02:24,850 --> 00:02:29,850 in all requests and just send the request to slash goals. 48 00:02:30,580 --> 00:02:33,380 If you would be hosting this on a different server, 49 00:02:33,380 --> 00:02:36,300 you'll of course will need to plaque the actual domain 50 00:02:36,300 --> 00:02:38,080 of that server in here. 51 00:02:38,080 --> 00:02:40,360 And you could use environment variables, 52 00:02:40,360 --> 00:02:43,220 which this react project also supports, 53 00:02:43,220 --> 00:02:45,970 to use different URLs during development 54 00:02:45,970 --> 00:02:47,680 and for production. 55 00:02:47,680 --> 00:02:50,670 For this demo here, I wanna deploy it 56 00:02:50,670 --> 00:02:52,610 on the same server as the backend. 57 00:02:52,610 --> 00:02:56,663 So therefore using this solution should work fine. 58 00:02:57,930 --> 00:03:00,700 Now with that, we adjusted the code. 59 00:03:00,700 --> 00:03:03,150 We have our production Docker file 60 00:03:03,150 --> 00:03:05,340 and we have our development Docker file 61 00:03:05,340 --> 00:03:07,110 which is still the Docker file 62 00:03:07,110 --> 00:03:09,620 we're using in Docker compose. 63 00:03:09,620 --> 00:03:13,160 Now I wanna build this image for production though 64 00:03:13,160 --> 00:03:18,160 push it to Docker hub and then deployed with AWS ECS. 65 00:03:18,670 --> 00:03:21,290 So for that here on Docker hub I'll first of all, 66 00:03:21,290 --> 00:03:26,290 sign in again, and then there in my repositories section, 67 00:03:26,970 --> 00:03:29,350 I will create a new repository, 68 00:03:29,350 --> 00:03:31,890 and I named my backend goals node. 69 00:03:31,890 --> 00:03:35,120 I will name this one goals react 70 00:03:35,120 --> 00:03:37,800 because that's the front end for this application 71 00:03:37,800 --> 00:03:40,633 and create this public repository. 72 00:03:41,840 --> 00:03:44,900 With it created, we now need to create an image 73 00:03:44,900 --> 00:03:46,860 locally with that name, 74 00:03:46,860 --> 00:03:50,980 and then push it just as we did it with the node backend. 75 00:03:50,980 --> 00:03:55,190 So therefore here, I will now run Docker build, 76 00:03:55,190 --> 00:03:58,380 and I wanna build a Docker file in my front end folder 77 00:03:58,380 --> 00:04:01,540 but not the default file, but the.prod file. 78 00:04:01,540 --> 00:04:04,470 And you don't add the file name here then 79 00:04:04,470 --> 00:04:08,050 but instead there is an extra dash F option 80 00:04:08,050 --> 00:04:11,200 which allows you to specify the Docker file name. 81 00:04:11,200 --> 00:04:13,720 And by default that looks for Docker file, 82 00:04:13,720 --> 00:04:15,150 but we can override this, 83 00:04:15,150 --> 00:04:18,649 to look for a Docker file.prod file. 84 00:04:18,649 --> 00:04:21,200 Also assign a tech and here I wanna use 85 00:04:21,200 --> 00:04:25,400 academind/goals-react to use that repository name 86 00:04:25,400 --> 00:04:27,330 as a image name. 87 00:04:27,330 --> 00:04:29,010 If we now hit Enter, 88 00:04:29,010 --> 00:04:31,960 I get an error because I have a tiny mistake. 89 00:04:31,960 --> 00:04:36,400 This file here actually needs the full path. 90 00:04:36,400 --> 00:04:39,490 So, front end slash Docker file prod. 91 00:04:39,490 --> 00:04:41,940 And we still need to path here at the end, 92 00:04:41,940 --> 00:04:44,090 because here with the path at the end, 93 00:04:44,090 --> 00:04:47,770 we set the context for this build command. 94 00:04:47,770 --> 00:04:50,250 And here we set the path to the file 95 00:04:50,250 --> 00:04:53,080 basically, as we did it in Docker compose. 96 00:04:53,080 --> 00:04:55,710 There you might remember that we also could set 97 00:04:55,710 --> 00:04:58,850 build such that we have a context and a separate file. 98 00:04:58,850 --> 00:05:00,790 And the context was the folder 99 00:05:00,790 --> 00:05:03,090 in which to build command will be executed 100 00:05:03,090 --> 00:05:07,600 and file was a full path to that Docker file. 101 00:05:07,600 --> 00:05:09,300 And it's the same what we need here. 102 00:05:09,300 --> 00:05:12,800 So dash F takes the full path to the Docker file. 103 00:05:12,800 --> 00:05:13,850 And then here at the end, 104 00:05:13,850 --> 00:05:16,870 we have to context for the build command. 105 00:05:16,870 --> 00:05:18,280 Now we can hit Enter, 106 00:05:18,280 --> 00:05:21,750 and now this production ready image is being built. 107 00:05:21,750 --> 00:05:25,490 So, let's wait for that to be built and to be finished 108 00:05:26,650 --> 00:05:30,310 which can take a couple of seconds or even minutes. 109 00:05:30,310 --> 00:05:32,793 You can ignore warnings like this, by the way. 110 00:05:33,690 --> 00:05:35,710 And now the installation finished at least, 111 00:05:35,710 --> 00:05:39,500 now we're on that final part of that first stage 112 00:05:39,500 --> 00:05:41,120 building the optimized files 113 00:05:41,120 --> 00:05:44,790 and now we're entering the next stage copying over the files 114 00:05:44,790 --> 00:05:49,163 from the first stage and then building this image. 115 00:05:50,070 --> 00:05:51,663 So, now the image is built. 116 00:05:52,700 --> 00:05:54,500 Now we can push it. 117 00:05:54,500 --> 00:05:59,500 Push academind goals react, to Docker hub. 118 00:05:59,580 --> 00:06:02,280 So let's push it there. 119 00:06:02,280 --> 00:06:03,820 And with it being pushed, 120 00:06:03,820 --> 00:06:07,193 we can now deploy it to AWS ECS here.