Static Assets Project Solution

[00:00:25]
>> So the first thing we do is I will say Create a new file. Here in the static assets project, I'm gonna call it Docker file. So here I'm gonna say FROM and we're gonna do some version of node. Let's do 12-stretch, I think I have latest in my notes, but you can do it from whatever you want.

[00:00:46]
Let's do it from 12 stretch, cuz that's what we've been doing. Give it a working directory, let's call it /app or whatever you wanna call it. I'm gonna go with /app. Copy everything, copy dot dot, and we're gonna do run, NPMCI, right? To install of our dependencies. And then you could technically have another run underneath this.

[00:01:11]
In general when I have multiple sequential things running, right? And they're all accomplishing relatively the same thing, I'll just do and, right? So do this and this and this and this, right? What's nice about that is that gets made into one layer, right? So it gets cached all together, which is in general, what the kind of behavior you're looking for.

[00:01:31]
So here I'm going to say nmp, run, build, right? Cuz I try like build out the final project. So let's do this as bulid, or something like that, right? We'll call it builder for fun. So for the second one, we're gonna do FROM nginx and I said, 1.17, right?

[00:02:01]
But you can totally do this from Alpine, you can do it from LaTeX, that's kind of up to you. And now all we need to do is we need to copy it from the previous one into the directory that I told you before, right? So I'm gonna say COPY.

[00:02:15]
And we could create a user and all that kind of stuff now. For now let's just ignore, let's just all do it from root. So I'm gonna say --FROM =builder. And we're gonna do it from /app/build right? That's where it gets build into, right? And we're gonna copy that into /user/share/nginx/html.

[00:02:42]
And again, I told you not to put in a cmd because if you put in the cmd, then you're gonna overwrite what nginx ones is doing. We don't wanna do that, we want nginx to handle all the thinks So that's it, now this should work, so let's try it.

[00:02:59]
So where are we? We are in static-assets-project. So I'm gonna say docker build-t, let's just call this like static app or something like that. We should be able to build, this will take a second cuz react takes forever to build. I should say, it's web pack, web pack takes forever to build.

[00:03:24]
But it's gonna run both of those commands, the install the assets. And then as soon as it's done with that then it's gonna go ahead and run our build. It's gonna output our build directory. You know what I did in here, which I didn't realize it, this is still gonna work.

[00:03:41]
You can see here it's going into node-sass now, there we go. Now we're finally into the build process. But while it's doing that, I got it right from builder. You can also put from zero here as well, that would totally work. And that's what I have in my notes.

[00:03:59]
All right, so that built, And so now what's gonna do is, it's gonna go download from nginx, right? Looks like I don't have it on my computer, so it's gonna go do that really quick. Looks like it's about 50 odd megabytes. And then it copied everything from builder into that directory, okay?

[00:04:27]
So now we have our built container. So what we're gonna say is, docker run-P, or dash lower case p rather, sorry, 8080, which you can run this on any port that you want to. But the first one's gonna be the host port, but it is gonna be run on port 80 because that's what nginx runs on by default, right?

[00:04:49]
So we're gonna go from 80 to 8080 in our local computer, okay? And then we're gonna do static-app. So let's go see if that works, localhost 8080. Lo and behold, your app is now running, but this is being served by nginx, right? So what was hard about that?

[00:05:12]
What did you struggle with?
>> For us it was not forgetting that there needs to be working, to specify the working directory and copying all the files. You know what I mean? Like it's kind of like this idea that, this is basically like an empty container you need to bring something in for it to work with.

[00:05:28]
>> Mm-hm.
>> So there was a little bit of disconnect. So everything else was were very spot on. Just that particular part. So then as it was trying to build, I can't find the index file. I can't find the directives.
>> That makes sense. Yeah.
>> It's like I don't have anything.

[00:05:42]
>> Yep, that would definitely be a problem. Hopefully this all at least makes sense, and if we went back and did it again, you would be able to do it. So, right now we're just using some default config file that nginx has for us. You can also copy in an nginx configuration, and then modify your nginx configuration to however you want to.

[00:06:01]
It allows you to do that as well. Now we're not gonna do that one, because I don't know how to configure nginx and I'm not sure many people do. [LAUGH]. Nginx is hard to configure, that's the long and the short of it. [LAUGH]. So we're actually gonna go and do some more stuff with nginx here in just a second, to show you how we can actually even make this even simpler.

[00:06:19]
We can actually run the nginx container directly without even building it, which is kind of fun as well