Dockerize Next.js & Deploy to VPS (EASY!)

#Hivelocity #VPS #VPShosting #ad #collaboration
Get one month of VPS FREE at hivelocityinc.net/3SfVjnB. Use code BYTEGRAD1 at checkout. Learn more about Hivelocity’s VPS: hivelocityinc.net/3s3OcUF
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more kinde.com
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more kinde.com
⏱️ Timestamps:
00:00 Next.js example overview
01:18 Hosting with Docker is easier than without
01:32 Preparation
02:20 Dockerize Next.js (simple example)
06:45 Dockerize Next.js (better)
08:25 VPS
09:07 GitHub container registry
11:02 Build for AMD64
12:50 Change name / tag of image
14:03 Docker on VPS setup
17:58 Dockerized Next.js on VPS!!
#webdevelopment #programming #coding #reactjs #nextjs

Пікірлер: 74

  • @ByteGrad
    @ByteGradАй бұрын

    I had a great time working with Hivelocity's VPS again. Get one month of VPS FREE at hivelocityinc.net/3SfVjnB. Use code BYTEGRAD1 at checkout. Learn more about Hivelocity’s VPS: hivelocityinc.net/3s3OcUF

  • @HivelocityNet

    @HivelocityNet

    Ай бұрын

    We enjoyed collaborating with you and look forward to more opportunities in the future!

  • @frankyb702
    @frankyb702Ай бұрын

    This is amazing. I would love to see a solution for: 1. Using the docker container as a dev container, meaning coding on the container dev server. 2. A solution to rebuild the next app for both dev and production on git push. Making it a replacement for vercel. 3. Any type of autoscaling,

  • @BehrouzAsghari
    @BehrouzAsghariАй бұрын

    Hello, thank you very much for providing this short and practical content, please make other videos of these practical and interdisciplinary skills (CI/CD) for frontend developers.

  • @alejandroechavarria539

    @alejandroechavarria539

    Ай бұрын

    Yes, please CI/CD

  • @ronaldtejada8846

    @ronaldtejada8846

    Ай бұрын

    Definitely pls

  • @julienjoseph-agathe7447

    @julienjoseph-agathe7447

    5 күн бұрын

    Yes CI/CD with build job and some public ENV variable.. How to handle PUBLIC_NEXT_** when the image is created from the CI/CD and env variable are not stored in repo (no env.production in repo)

  • @imsarvesh_
    @imsarvesh_2 күн бұрын

    I recently joined your channel. I want to tell you that your channel has most advance content than anywhere else. ❤

  • @Alex.Shalda
    @Alex.Shalda15 күн бұрын

    you're a life-saver!!!! exactly what I needed at work! Cannot thank you enough!!!!!!!!!!!!!

  • @jagdish1o1
    @jagdish1o1Ай бұрын

    Few weeks back, i scratched my head for this and you make it look so simple. Thank you so much! Saved!

  • @vinniv6806
    @vinniv6806Ай бұрын

    This is the content I like. Hats off, congrats.

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Enjoy!

  • @strippd
    @strippdАй бұрын

    Dying for a loadbalanced prod tutorial! Thanks subbed!

  • @aolowude
    @aolowudeАй бұрын

    You don't miss with the videos. Ive never veen happien than since i chose Next JS, abd dockerizing is huge! 🙌🏾

  • @sorintautu5025
    @sorintautu5025Ай бұрын

    Every time I am stuck you post a video on that certain topic. Good content!

  • @naylord5
    @naylord5Ай бұрын

    Excelent content master!! Thank you so much for sharing. It would be really cool if you complement this video with a github action for building the updated image after a master commit, and push it to the VPS. Thank you in advance!

  • @raj_talks_tech
    @raj_talks_tech12 күн бұрын

    Great video, just clearing the confusion around EXPOSE keyword on Docker. "The EXPOSE instruction doesn't actually publish the port. It functions as a type of documentation between the person who builds the image and the person who runs the container, about which ports are intended to be published. To publish the port when running the container, use the -p flag on docker run to publish and map one or more ports, or the -P flag to publish all exposed ports and map them to high-order ports."

  • @qianyisha7891
    @qianyisha7891Ай бұрын

    Fantastic content! I've recently done something similar for my own projects: containerizing and setting up CI/CD. It will be interesting for me to see how you continue with CI/CD in this video, and perhaps even more so, how to deploy a web server + database using Docker and Kubernetes while also integrating CI/CD (which is exactly what I'm trying to figure out now LOL).

  • @alaeddinemenai5380
    @alaeddinemenai5380Ай бұрын

    Thank you @ByteGrad for your videos. Your videos are simple and any engineer can understand what your bring. There is common issue in NextJS and Docker which is access the System Env variables after the build is done in runtime. Please you can check that issue and it is still open for long time. You may share a video about how to solve that issue.

  • @wilbertdune
    @wilbertduneАй бұрын

    Continue this with CI/CD next video.

  • @illuminaughty666
    @illuminaughty666Ай бұрын

    Great efforts indeed! A tutorial of rebuild nextjs app after git push would be cool thing to see on this channel

  • @subhranshudas8862
    @subhranshudas8862Ай бұрын

    exactly what i was looking for!

  • @RoublyGroup
    @RoublyGroup13 күн бұрын

    thank you very much you saved my life

  • @farrukhfida212
    @farrukhfida212Ай бұрын

    Nice and simple and more than that to the point

  • @SlavaBezgachev
    @SlavaBezgachevАй бұрын

    Thanks for the video! I completely forgot that I can use the GH registry, that actually solves a small problem I had with where to store the built containers

  • @cybor-gg
    @cybor-ggАй бұрын

    Just wanted to say I appreciate the content! Keep up the good work :)

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Thanks, will do!

  • @vincentpena7017
    @vincentpena7017Ай бұрын

    Great content mate! More of this please. Self hosting ftw!

  • @MeerUzairWasHere
    @MeerUzairWasHereАй бұрын

    Nice one! you can use automatic port mapping as you exposed the PORT in Dockerfile e.g.( docker run -P "image )

  • @alecost2622
    @alecost2622Ай бұрын

    Thank you. Thats very useful information.

  • @darkcss1054
    @darkcss1054Ай бұрын

    I can finally say that I climbed the steep curve of learning React/Next.js and that's in great part thanks to you. Thank you so much. You're really making a difference as a content creator. Related to this video, Is it possible to set a Python FastAPI backend and a Next.js front end on the same container or would I have to use 2 separate containers?

  • @JoseWaldier
    @JoseWaldierАй бұрын

    webdevcody needs this video.

  • @abishekbaiju1705
    @abishekbaiju170522 күн бұрын

    Consider making a video about connecting ssl and domain to this vps.

  • @404-not-found-service
    @404-not-found-serviceАй бұрын

    wow, thank you very much, it is appreciated, very good video

  • @seyfallahrouini3412
    @seyfallahrouini3412Ай бұрын

    Thank you so much

  • @vazy1902
    @vazy1902Ай бұрын

    Hi, can you do dockerize with env file in your project too. Thanks you so much

  • @martinharyanto4465
    @martinharyanto4465Ай бұрын

    Great content. Can you explain the deployment part with GCP? I am not sure since they should have container registry, but how to refer the docker etc.. Very nice content!

  • @DanielPenaloza-fj8yo
    @DanielPenaloza-fj8yoАй бұрын

    Thanks a lot! You really explained this process perfectly, can we do this with many Node.js apps with different ports and add CI/CD?

  • @RationalDissonances
    @RationalDissonancesАй бұрын

    In comparison to deploying on Vercel, what features / abilities we will lose if we use docker? I think the obvious ones are serverless functions, edge functions and edge caching. basically we will have only 1 server from 1 geo to serve all of the world

  • @asadsalehumar1011
    @asadsalehumar1011Ай бұрын

    solid!

  • @mohdsahil226
    @mohdsahil226Ай бұрын

    Hi Thank you for great content. Would you please also help on how to setup dev branch on sub domain, since the port is same, it always goes to main branch. I am using nginx.

  • @user-us3bs8px3m
    @user-us3bs8px3mАй бұрын

    How to optimize the performance of Next App similarly Vercel do.Usually Next App deployed on vercel is faster.

  • @kale_bhai
    @kale_bhaiАй бұрын

    Now, do a kube cluster

  • @miguelangelcabrera2227
    @miguelangelcabrera2227Ай бұрын

    Thanks for share this!.. btw can provide de github repository?

  • @giannifed
    @giannifedАй бұрын

    Thank you. Do You use a proxy server like nginx?

  • @binhexoct
    @binhexoctАй бұрын

    Great video. Question: did you not get an error of ECONNREFUSED for the route handler when you did the "build" (npm run build)? How did you avoid it?

  • @safa_jahan
    @safa_jahanАй бұрын

    Is there a way to automate this when you change the code? to build a new docker image and deploy it to the VPS?

  • @deaaaldeen1525
    @deaaaldeen1525Ай бұрын

    How to control route and api caching on next js project that not deployed on varcel environment?😢

  • @SugengWahyudi
    @SugengWahyudiАй бұрын

    Great.., Please try dockerize Next js with Prisma

  • @madhurchaturvedi5551
    @madhurchaturvedi5551Ай бұрын

    Sir please make JavaScript interview technical coding interview questions videos and great video keep it up

  • @dirtysouth3291
    @dirtysouth3291Ай бұрын

    Great, can you make one for ci/cd pipelines??

  • @dodosaurus4875
    @dodosaurus4875Ай бұрын

    hey ByteGrad, have you switched to MacOS recently from Windows?

  • @danyacoding
    @danyacodingАй бұрын

    Does that mean that I can use websocket protocol & keep connection with backend if it's dockerizable?

  • @yasseralsaidi
    @yasseralsaidiАй бұрын

    nice thank you, please can you do a video about github action.

  • @kennethlau8108
    @kennethlau8108Ай бұрын

    This only works for a single standalone but what about horizontal scaling on docker containers for nextjs ?

  • @mma-dost
    @mma-dostАй бұрын

    Hey, can you make a crash course on micro frontend and module federation please if possible.

  • @boyywnkobe
    @boyywnkobeАй бұрын

    What mac do u use?

  • @alvaro-escalante-naves
    @alvaro-escalante-naves19 күн бұрын

    So for production you reverse proxy that 3000 port to something else with Nginx or that's something you would do within docker?

  • @lovrozagar3729
    @lovrozagar3729Ай бұрын

    It would be cool if you explain at the start what a VPS is and what are the benefits.

  • @Adrian_Galilea
    @Adrian_GalileaАй бұрын

    What about caching, ISR SSR and so on

  • @trxsson
    @trxsson19 күн бұрын

    Bonus tip: you can just connect that to a cloudflare tunnel and thus don’t have to worry about connecting your domain properly and ssl certificates

  • @NazarBrunarskyi
    @NazarBrunarskyi12 күн бұрын

    can you do please an instruction on how Dockerize nest js app????

  • @sunilchannelvlog3743
    @sunilchannelvlog3743Ай бұрын

    can i ask why dont we just git clone our repo after sending our code to github repo , then run that using terminal in the vps, i am not sure why we are using docker is it necessary?

  • @user-ih1on8ks5z
    @user-ih1on8ks5zАй бұрын

    Hi, I am still confused why such small project takes above 1GB image size ?, some projects I built almost have 3GB image size

  • @darkcss1054

    @darkcss1054

    Ай бұрын

    Because Node.js and all node_modules have to be copied to the image. It is supposed to be a standalone container that has all you need to run your application, even denying the necessity of a browser or a NodeJS installation.

  • @virtuoz-ru
    @virtuoz-ruАй бұрын

    Dockerize Nuxt.js & Deploy to VPS

  • @LOFIBOT-bp6hm
    @LOFIBOT-bp6hmАй бұрын

    I prefer dockerize only the build

  • @deeperlayer
    @deeperlayer23 күн бұрын

    Lmao, another F for mac users. thx for the info man

  • @invincibearofficial
    @invincibearofficialАй бұрын

    Eurgh, another video where you don't put the code in a github repo for us to reference :(