So for deploying this multi-stage build file.
We, first of all, should
of course verify whether our code needs any adjustments
or, for example, if we need any
environment variables that should be considered
in the build process.
And indeed there is one adjustment we should make.
I'm sending a bunch of HTTP requests
and I'm always sending them to local host here.
Locally, on my machine when running this container
this will work per our docker-compose setup
and the way we launched this before.
But when we deploy this
for example, with AWS ECS, this won't work anymore.
You might argue that you learned
that on AWS ECS, local host is a special name
which indeed will allow
this dockerized application to send requests
to other containers running into same AWS ECS task.
But that would only be true, if this code would be executed
on the server inside of the container,
but keep in mind what you learned earlier in the course
this react code,
is code that runs in the browser in the end.
And therefore this request is not sent
from inside the container, but from inside the browser
which runs on the machine of your end users.
So then local hosts, will refer to their machine,
not to your task or container or ECS managed server.
So therefore local host is still wrong.
URL to be used here, the wrong domain.
Now the proper domain we should use here,
now depends on how we're going to deploy this.
And I plan on deploying this in the same task
as my rest API, my note rest API.
That means that ultimately it will be reachable
through the same URL.
This front end application will be reachable
through the same URL.
And therefore we can actually
eliminate this entire domain here
and just send a request to slash goals
which then by default, will be sent to the same server
as was used for serving this website.
That's a browser default behavior.
So we can get rid of this part here
in all requests and just send the request to slash goals.
If you would be hosting this on a different server,
you'll of course will need to plaque the actual domain
of that server in here.
And you could use environment variables,
which this react project also supports,
to use different URLs during development
and for production.
For this demo here, I wanna deploy it
on the same server as the backend.
So therefore using this solution should work fine.
Now with that, we adjusted the code.
We have our production Docker file
and we have our development Docker file
which is still the Docker file
we're using in Docker compose.
Now I wanna build this image for production though
push it to Docker hub and then deployed with AWS ECS.
So for that here on Docker hub I'll first of all,
sign in again, and then there in my repositories section,
I will create a new repository,
and I named my backend goals node.
I will name this one goals react
because that's the front end for this application
and create this public repository.
With it created, we now need to create an image
locally with that name,
and then push it just as we did it with the node backend.
So therefore here, I will now run Docker build,
and I wanna build a Docker file in my front end folder
but not the default file, but the.prod file.
And you don't add the file name here then
but instead there is an extra dash F option
which allows you to specify the Docker file name.
And by default that looks for Docker file,
but we can override this,
to look for a Docker file.prod file.
Also assign a tech and here I wanna use
academind/goals-react to use that repository name
as a image name.
If we now hit Enter,
I get an error because I have a tiny mistake.
This file here actually needs the full path.
So, front end slash Docker file prod.
And we still need to path here at the end,
because here with the path at the end,
we set the context for this build command.
And here we set the path to the file
basically, as we did it in Docker compose.
There you might remember that we also could set
build such that we have a context and a separate file.
And the context was the folder
in which to build command will be executed
and file was a full path to that Docker file.
And it's the same what we need here.
So dash F takes the full path to the Docker file.
And then here at the end,
we have to context for the build command.
Now we can hit Enter,
and now this production ready image is being built.
So, let's wait for that to be built and to be finished
which can take a couple of seconds or even minutes.
You can ignore warnings like this, by the way.
And now the installation finished at least,
now we're on that final part of that first stage
building the optimized files
and now we're entering the next stage copying over the files
from the first stage and then building this image.
So, now the image is built.
Now we can push it.
Push academind goals react, to Docker hub.
So let's push it there.
And with it being pushed,
we can now deploy it to AWS ECS here.