So how can we deploy as such a frontend application
so that we don't have to run docker run locally
which of course wouldn't help the users
which try to reach our application.
Well, we already did deploy frontend early in the course.
And indeed here, we already got everything we need.
We've got a multistage Dockerfile
which builds the application
and then sets up an NGINX web server
which serves the build application
and therefore all we gotta do
to make this web application reachable
is that we need to run this as a container,
which is what we did in the last lecture already
locally with docker run.
Now we just need to move that into a pod
on Kubernetes to make it reachable by our end users.
And I want to create a new pod here
and therefor a new deployment
because it's not tightly coupled
to one of my other services.
You could say that it's tightly coupled
to the tasks backend
because we're sending requests there
but that's not the tight coupling which I mean,
I mean after all
we can also send requests there from inside Postman
and our frontend might also send requests
to other services like the user's API here.
It doesn't do that
in this example, but it's not unrealistic that it should.
So there is no tight coupling with one specific API
and therefore I'll create a brand new
frontend-deployment.yaml file.
Now in there I'll copy the code from the tasks deployment
or from the users deployment
into the frontend deployment file
and of course rename it to frontend-deployment
match the label app frontend
and set this as a label down there.
And then here, the container which I wanna use
is also named frontend
and of course here I'm referring to the
kub-demo-frontend container
which we have yet to push to Docker Hub by the way
we built it locally,
but as you learned earlier, that won't really help us.
Now what about this address or this environment variable?
Well, for the moment we don't need it.
So I will actually remove that here.
And instead we have this pretty lean deployment YAML file
for the frontend.
Now, of course the frontend should not be cluster internal
but the users visiting our website
should be able to reach it
and to see it.
Therefore, we also want a service which exposes it
to the public.
Hence I'll add a frontend-service.yaml file.
Use the user's service set up
and copy it over data
and now just rename it to frontend service
and select parts which have an app label
with a value of frontend
but I'll stick to the type load balancer
because this is a service that should be accessible
from the entire world.
So it should not be cluster internal
and there for load balancer is the type to use.
Now for the pots
in this frontend application, we are listening on pot 80
that's all the pot which is specified in a Dockerfile,
and therefore I will of course also
send requests to the target pot 80,
but I also wanna listen on pot 80
on this service IP address.
And that's the finished service though.
Now with that, we just have to go
into that Kubernetes folder with cd Kubernetes
and then run kube control apply-F to apply the deployment
and service.
However, keep in mind
that we need to push this image first
and therefore before doing that,
I will actually run docker push academind/kub-demo-frontend.
However, before you hit enter
make sure that such a repository exists on Docker Hub.
It doesn't for me.
So I will go to Docker Hub,
click on repositories, create a repository
give it that name kub-demo-frontend
and click create.
And once this repository is created here
on Docker Hub, we can run docker push
your account name slash
and then this repository name
which should be your local image name too,
and this image will be pushed,
and once it's pushed
we can then apply our deployment and service
because then Kubernetes will be able
to find this image on Docker Hub.
Which of course is an important prerequisite.
So let's wait for the push process to finish.
And now that it's did finish
let's run kubectl apply-f=frontend-service.yaml
and -F=frontend-deployment.yaml.
To apply these two new files in which we worked
and they offered to deploy this frontend
in a pod with a service.
If you hit enter, both shall be created,
and if you run get pods thereafter
we see that this container is being created
and soon it should be up and running.
So let's wait until that's the case.
Here we go,
and of course now we also wanna expose our new service.
We can see it with, if we get all services
but in order to expose it, of course, as always
we need to run minikube service and then your service name
which in my case here is frontend-service.
And now we get a URL which we can
use to visit this running application.
And it should open up in the browser automatically.
Otherwise simply grab that URL
and enter it.
And this is now the react application served
by our Kubernetes cluster.
And if I add a third task, which is, "Learn Kubernetes,"
I can also fetch that
and it works.
We also shouldn't have any errors here in the console log.
So that is working
and that is how we can deploy this
but we have one floor
or one aspect which I'm not too happy about
and that's in our frontend code, in the source folder
in the app JS file.
It's this address here to which we sent the request.
This is the address
of our deployed tasks service in the end.
It works, but of course we have to hardcode
that here into this source code.
Now that's not necessarily horrible
because typically if you deploy this
on a real cloud provider and not just with minikube,
this address will be pretty stable
and you might even map your own domain
to this IP address so that it's super stable.
So it might not be horrible
that you have to hardcode into your code.
And indeed earlier on in the course
when we deployed everything we did that.
We did hardcode the domain which we had
for our deployed application there into our frontend code.
Nonetheless, I wanna show you a little trick now
a trick we could have used early on
in the course as well
but which I now finally do wanna use.