I used tips from your video and actually managed to decrease image size from 2GB to 139MB. Thanks a lot! Unfortunately some dockefile steps that you specified are stale, specifically: - CMD - ENV declaration it's an easy fix and I am still very grateful for provided info 👍
@@haiffy Wow, I have only now realised that my comment got that much attention. I can't share a link in the comments (YT is auto-deleting comments with links) I will be sharing this fixed Dockerfile in my upcoming Next.js starter kit free and open-source project, so make sure to subscribe to not miss out on that :)
A few other tips 1. `COPY` instructions in general should have `--link` to speed up cache. and prevent a lot of other invalidation 1.5 Do not copy package.json and package-lock.json, instead use the bind instruction. 2. Remember to set the proper folder from npm as cache with --bind for the `npm ci`. (if you do `docker init` the image recommended by docker has this well set) 3. do `npm ci --only=production` and copy those deps. 4. Write a decent .dockerignore that removes files that are not needed NextJS standalone kind of does those things, but the tips here are for any build process, not just NextJS. And nevertheless, I believe like that you would get a result somewhat similar in size to what next js is achieving with the standalone option (but probably with better cache)
Great video! Thanks for sharing. Can I use this approach to develop nextjs web app locally? I mean are there any benefits to create docker image and run it instead of running npm run dev?
hey bro for standalone builds you still need to add .next/static and public folder do it in the builder stage like this after the build command: $ cp -r .next/static .next/standalone/.next $ cp -r public .next/standalone then copy the standalone folder later in the last stage as you do
I am sorry but how is the person make this i do image like this just for developement but for production a 2 phase image one to build application and after that copy build and run using node
I think it is stable enough that Next.js recommends it in their documentation. You can check out these two: nextjs.org/docs/app/api-reference/next-config-js/output github.com/vercel/next.js/tree/canary/examples/with-docker
I think you can make it even smaller with a `node:lts-bullseye-slim` image. It will always use LTS version, and this image feels the best as I've read.
@@putrafajarh yeah, I confused some stuff a bit. I chose "bullseye-slim" some time ago to ensure everything runs well there (and works the same as locally), as alpine has some differences in compilation and utils.
hello what a great video to wathc thanks a lot. I have just one question about the public and static folder how can we upload them to CDN or S3, like whats the configurations that should be included to nextjs to make it work?
You can check out assetPrefix option: nextjs.org/docs/app/api-reference/next-config-js/assetPrefix Basically create a structure where the prefix is your cdn link + the commit hash so that it syncs fine.
By separating the two stages, you can shorten build times. The first stage (install stage) will only be run whenever you add or remove packages from package.json. This means whenever you run docker build, it'll skip the install stage 99% of the time since it is cached, and go straight into building your application. This is great if you have slower internet speeds or have a large amount of dependencies, saving that 1+ minutes it would take to run "npm install"
Bro with an image size that small, you can run a web app anywhere. Even self host for no charge… Also most free hosting options would easily handle something like this.
@@reze_dev Oracle has a decent free tier iirc. Google cloud offers a free e2-micro instance which could run a web app. But I recommend getting into self hosting at home, can be complicated at times but you get complete freedom of how you set up your services. Pretty much any old hardware, like an old workstation or even a laptop can suffice to get started with a homelab/self hosted web app. There are plenty of good tutorials and free tools out there to make this easier too.
I haven't search that topic but I think it is highly dependent on what your application consists of and how many requests you are getting per second. Let me know if there are magic tricks for optimizing the ram usage as well.
I am pretty sure that you are supposed to build the project on your pipeline before building the docker container and only copy only the build in the docker image, don't build it inside the container.
I used tips from your video and actually managed to decrease image size from 2GB to 139MB. Thanks a lot!
Unfortunately some dockefile steps that you specified are stale, specifically:
- CMD
- ENV declaration
it's an easy fix and I am still very grateful for provided info 👍
If you don't mind can you please share what fix did you implement?
@heyjitendra do you use latest docker version? It should show warning messages for deprecated syntaxes
Cant believe you said easy fix then left us hanging
@@haiffy Wow, I have only now realised that my comment got that much attention. I can't share a link in the comments (YT is auto-deleting comments with links)
I will be sharing this fixed Dockerfile in my upcoming Next.js starter kit free and open-source project, so make sure to subscribe to not miss out on that :)
@@tsykin cool
A few other tips
1. `COPY` instructions in general should have `--link` to speed up cache. and prevent a lot of other invalidation
1.5 Do not copy package.json and package-lock.json, instead use the bind instruction.
2. Remember to set the proper folder from npm as cache with --bind for the `npm ci`. (if you do `docker init` the image recommended by docker has this well set)
3. do `npm ci --only=production` and copy those deps.
4. Write a decent .dockerignore that removes files that are not needed
NextJS standalone kind of does those things, but the tips here are for any build process, not just NextJS. And nevertheless, I believe like that you would get a result somewhat similar in size to what next js is achieving with the standalone option (but probably with better cache)
Can you elaborate on 1.5?
This video is amazing! Thank you so much,
Would be great to see how to do this for a monorepo setup with multiple next apps and some shared resources.
If you liked the video, don't forget to subscribe. More videos will come
Thank's for video! Good practice to have one repository for production ready multistage build for Next JS in Docker
Great tips, exactly what I was looking for 😊
Great video! Thanks for sharing. Can I use this approach to develop nextjs web app locally? I mean are there any benefits to create docker image and run it instead of running npm run dev?
No need for that. You can use npm run dev for local
Containerization should be the last step because it makes debugging harder
hey bro for standalone builds you still need to add .next/static and public folder
do it in the builder stage like this after the build command:
$ cp -r .next/static .next/standalone/.next
$ cp -r public .next/standalone
then copy the standalone folder later in the last stage as you do
I am sorry but how is the person make this i do image like this just for developement but for production a 2 phase image one to build application and after that copy build and run using node
How stable this setup is? And why it’s not recommended?
I think it is stable enough that Next.js recommends it in their documentation.
You can check out these two:
nextjs.org/docs/app/api-reference/next-config-js/output
github.com/vercel/next.js/tree/canary/examples/with-docker
Thank you for the video friend❤ IMHO, you are Turkish right? Your edit & concept the best one I have ever seen 🎉
Yes I am. Glad you liked it ❤️
I think you can make it even smaller with a `node:lts-bullseye-slim` image. It will always use LTS version, and this image feels the best as I've read.
Does Alpine smaller?
@@putrafajarh bullseye is smaller
@@zorkname i dont know bro, but in my knowledge, bullseye its a version of Debian right? So it should have more bigger size rather than Alpine
@@putrafajarh yeah, I confused some stuff a bit. I chose "bullseye-slim" some time ago to ensure everything runs well there (and works the same as locally), as alpine has some differences in compilation and utils.
You can't convince me that JavaScript is not a vulnerability created by RAM companies
hello what a great video to wathc thanks a lot. I have just one question about the public and static folder how can we upload them to CDN or S3, like whats the configurations that should be included to nextjs to make it work?
You can check out assetPrefix option:
nextjs.org/docs/app/api-reference/next-config-js/assetPrefix
Basically create a structure where the prefix is your cdn link + the commit hash so that it syncs fine.
Why separate dependency install and build into 2 stages?
By separating the two stages, you can shorten build times.
The first stage (install stage) will only be run whenever you add or remove packages from package.json.
This means whenever you run docker build, it'll skip the install stage 99% of the time since it is cached, and go straight into building your application.
This is great if you have slower internet speeds or have a large amount of dependencies, saving that 1+ minutes it would take to run "npm install"
Eyvallah, patronları sevindirecek haber :D
Huh, standalone is the recommended way if you need to deploy it inside docker though
People apparently never read any docs…
🤣🤣🤣🤣
What's with the zoom in and out?
Awsome explanation. Thanks a lot man
Thanks for the comment ❤️ I am still working on improving my tutorials.
Kardeş, thank you very much, I needed it very much.
Glad you liked it kanki ❤️
@@frontendbasicshuh?
Why we use this instead of vercel?
If you don’t want to use their platform and host it in anywhere else, docker is the way to go
@@frontendbasics is there a way to deploy container for free?
Bro with an image size that small, you can run a web app anywhere. Even self host for no charge… Also most free hosting options would easily handle something like this.
@@SlickYeet How? Aws only give 12 month for free tier
@@reze_dev Oracle has a decent free tier iirc. Google cloud offers a free e2-micro instance which could run a web app. But I recommend getting into self hosting at home, can be complicated at times but you get complete freedom of how you set up your services. Pretty much any old hardware, like an old workstation or even a laptop can suffice to get started with a homelab/self hosted web app. There are plenty of good tutorials and free tools out there to make this easier too.
Thank you for a such nice tip!
Amazinh
Great tips, thanks a lot man 👍🏻
holy shit! thanks a lot!
amazing stuff
Thanks for the comment ❤️
node-slim?
this video is helpful
I love you
please could you make a video on dockerize a ready to run expo app image with all the necessary deps to run
environment variables not work...... how to fixed???
how about docker ram usage?
I haven't search that topic but I think it is highly dependent on what your application consists of and how many requests you are getting per second. Let me know if there are magic tricks for optimizing the ram usage as well.
türk müsün
I am pretty sure that you are supposed to build the project on your pipeline before building the docker container and only copy only the build in the docker image, don't build it inside the container.