Static Asset Project Exercise

[00:00:00]
>> Brian Holt: We have a project. You're gonna apply everything you just learned here, and whoever makes the smallest container wins. No, I'm just kidding, that's a joke [LAUGH]. You can do this however you want to, but I'm gonna have you build an Astro project. And I had it built with Astro and React and TypeScript and Tailwind and the reason why I'm doing that is I'm not actually using any of them in the project I just wanted you to have a bunch of dependencies to install, okay?

[00:00:30]
And you can either start from an npx create astro@latest on your local development environment, or you can just use my copy of it. I added Tailwind and react to it, but you don't have to, it effectively ends up being the same thing. But here's what I want you to do.

[00:00:51]
I want you to have a multi stage build where you're going to take your Astro project, you're going to build it, and then you're going to copy it into an nginx container, and that NGINX container is then going to run your project for you, right? It's gonna distribute it, right?

[00:01:07]
Cuz think about a natural project once you build it is just static assets, right? It's HTML, it's CSS, it's Javascript, it's images. There's nothing dynamic or server or nodey about what's to be being distributed to the public, right? So, in your production container, you don't want node, for example, right?

[00:01:29]
So what you're gonna do is you're gonna have a build container that is gonna have node in it. It's gonna build the project, it's going to copy that all over into a very special directory inside of NGINX. That nginx is then gonna serve for you.
>> Brian Holt: Okay, I have a link here for you.

[00:01:46]
Feel free to just go ahead and use this if you don't feel like actually creating your Astro project yourself. And then go ahead and figure out how to do a Dockerfile. There is a solution.dockerfile here, right here. This is the answer. I would remind you to try to do this yourself before you look at my solution.

[00:02:07]
But I'm gonna give you a bit of time to go ahead and go and try and do that. And then we'll come back and I'll walk you through my solution. There's a couple of things I want just some caveats to give you here. Please make a multi-stage Dockerfile, I think we talked about that.

[00:02:27]
And then, have another container that can be NGINX. It can be NGINX Alpine. There's a bunch of different flavors of NGINX as well.
>> Brian Holt: Yeah, either one of those there. Make sure you're copying just the newly built files. Don't include the source files, which will be the dist directory inside of the project.

[00:02:54]
And then make sure you copy that to /user/share/nginx/html. You don't have to do anything else with nginx. If you put everything here in that directory, it knows what to do with them automatically, so you don't have to do any configuration, and nginx will take care of the rest.

[00:03:10]
So you don't even have to have a CMD in it. Don't have a CMD on that last line because nginx already has one and you wanna use the default one. So do not include your own CMD.