-: In the last section,
we spoke about how we're going to be making use of Nginx,
to serve up our application in a production environment.
Again, we're doing this,
because that development server we're using,
is not going to be used in production,
it's just not a production appropriate server.
So let's talk about how we're going to get Nginx in here,
first by taking a look at a quick diagram.
Now, as a quick reminder,
remember we already created a file called dockerfile.dev.
The purpose of this file was to create a image,
that could be used in the development environment.
We're now gonna start working on a second Docker file.
The second docker file is going to make a second image,
that's going to run our application,
specifically in production.
So the new Docker file that we're gonna make,
is gonna have a slightly different purpose
and some different configuration inside of it,
than what we are currently doing inside of dockerfile.dev.
All right, so I put together a diagram or two,
that kind of outlines what I kind of think,
we need to do here, all right?
So I think that we probably need to use,
Node Alpine as a base because again,
we do have to run that NPM run build command.
In order to run NPM run build,
we're gonna have to install all of our dependencies,
from the package.json file.
It's just a hard requirement for building our application.
So we'll copy where the package.json file,
we'll install the dependencies
and then once we have those dependencies installed,
we'll be able to execute NPM Run Build.
After running NPM Run Build
and generating our production assets,
remember we already did that one time
and it generated that build directory.
So these are all the,
build production ready files right here.
After we do all that, we'll then say,
okay, time to start up the Nginx server
and serve the result of that build directory.
So that's the idea.
But in this diagram, there's kind of two big issues,
I wanna point out.
Two big issues.
The first big issue,
is tied to this installed dependency step.
The dependencies that we are installing,
only have to be installed,
because we are trying to build our application.
If you recall a little bit ago,
when we initially installed all those dependencies,
when we first generated our app,
that was 155 megabytes worth of dependencies.
And those are only required,
when we're trying to build the application.
After we actually build the application,
dependencies no longer required.
It is solely that build directory.
So this thing right here, the index study HTML file
and eventually the main.js files in there as well,
that is the only output from the build step,
that we really care about.
It's just that folder and everything else inside of here,
everything else inside of our code base,
is not required to run our application,
in a production environment
and so if we could avoid it,
it would be really nice to avoid,
carrying around that 150 something megabytes,
worth of dependencies.
The other big issue with this flow,
is the start Nginx step down here.
So I said start Nginx, but yeah, pretty much,
what, where is Nginx coming from?
What point in time did that get installed
or configured or set up in any way, shape or form?
So it's clear that we've got a little bit of an issue here,
not only with our dependencies,
but also with the Nginx server set up as well.
Now I wanna do a quick aside here.
I wanna open up Docker hub
and I wanna look up a repository on Docker hub very quickly.
So I'm gonna open up a new tab
and I'm gonna navigate to hub.docker.com.
And then once here, you can find the explore tab at the top
and then you'll notice the second repository,
it might change over time,
so it might be higher or lower is Nginx,
if you click on that, you'll then see all the documentation,
for the Nginx repository and just the overall image.
Now you can scroll down here just a little bit
and see some documentation about what it is
and you'll also see some stuff about hosting,
simple content right here,
which is essentially what you and I want to do.
So it's clear that there is a Nginx image out there
and it can be probably used to host,
some simple static content.
So it kind of seems like if you and I,
want to kind of start up Nginx
or use this to host our application,
it would be really nice to use that image,
inside of our Docker container.
However, we already said we're using node alpine,
inside of our container,
because we have to get access to Node,
to install our dependencies.
So essentially it seems like we're in a situation right now,
where it would be really nice to be able to have,
two different base images
and that's exactly what we're gonna do.
So here's the plan.
We're going to build a docker file,
that has something called a multi-step build process.
Inside this docker file,
we're gonna have two different blocks of configuration.
We're gonna have one block of configuration,
to implement something that we're going to call,
the build phase.
This build phase is gonna have the sole purpose,
of using the node alpine image as base,
copying over the package.json file, installing dependencies
and then executing NPM run build.
And the result of all that is gonna be that index.html,
the main.js file, and essentially everything else,
inside this build directory right here,
that we need to serve up our application,
in a production environment.
We're then going to also have,
a second block of configuration inside of our Docker file.
When we put in a second block of configuration,
we get the ability to specify a second base image.
And so in this kind of run phase of our Docker file,
we're going to use Nginx as the base image.
Then the next step, after we specify using Nginx,
we're going to essentially reach over from the run phase,
we're gonna reach over to the build phase and say,
hey, out of everything,
that occurred during that build phase,
we want to get that build directory,
that build folder that has the index HTML file
and the main.js file and all that other stuff we care about.
And we're gonna take the result of all that,
just that build directory, and we're gonna copy it over,
to our build run phase.
Now when we copy it over to the run phase,
everything else that occurred during that build phase,
like the use of the node alpine image,
the dependencies that we installed,
all that additional stuff gets dropped,
out of the final result of our container.
So when we just copy over just that build directory,
everything else essentially gets marooned,
it gets left behind and we essentially are saying,
we don't care about anything else,
we just care about that build folder.
So then after we copy that directory over,
we essentially start Nginx
and in this case, the startup is going to work,
because we are using Nginx as the base.
So that's it, that's how we're gonna solve this.
We're gonna use a multi-step build process,
for our Docker container.
So let's take a quick pause right here
and in the next section,
we'll start writing out the Docker file,
to make all this stuff happen.
So quick break and I'll see you in just a minute.