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

Поделиться
HTML-код
  • Опубликовано: 18 дек 2024

Комментарии • 91

  • @ByteGrad
    @ByteGrad  8 месяцев назад +4

    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 8 месяцев назад +2

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

    • @naolfekadu6101
      @naolfekadu6101 6 месяцев назад

      more devops content please, this was really helpful

  • @frankyb702
    @frankyb702 8 месяцев назад +34

    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,

    • @GSteeZyHD
      @GSteeZyHD 5 месяцев назад

      Check out coolify for #2

    • @federicodiaz7280
      @federicodiaz7280 2 месяца назад +2

      2. gha
      3. k8s

    • @hauntedcupoftea
      @hauntedcupoftea 17 дней назад

      ive been looking for a solution for 1. as well, pages don't compile for me.

  • @BehrouzAsghari
    @BehrouzAsghari 8 месяцев назад +33

    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 8 месяцев назад +1

      Yes, please CI/CD

    • @ronaldtejada8846
      @ronaldtejada8846 8 месяцев назад

      Definitely pls

    • @julienjoseph-agathe7447
      @julienjoseph-agathe7447 7 месяцев назад

      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)

  • @jagdish1o1
    @jagdish1o1 8 месяцев назад +1

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

  • @strippd
    @strippd 8 месяцев назад +6

    Dying for a loadbalanced prod tutorial! Thanks subbed!

  • @vinniv6806
    @vinniv6806 8 месяцев назад +11

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

  • @Alex.Shalda
    @Alex.Shalda 7 месяцев назад +4

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

  • @illuminaughty666
    @illuminaughty666 8 месяцев назад +2

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

  • @aolowude
    @aolowude 8 месяцев назад +3

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

  • @sorintautu5025
    @sorintautu5025 8 месяцев назад +1

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

  • @naylord5
    @naylord5 8 месяцев назад +6

    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!

  • @qianyisha7891
    @qianyisha7891 8 месяцев назад +3

    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 8 месяцев назад +3

    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.

    • @suryag6879
      @suryag6879 2 месяца назад

      Yes, do we have any solution for that?
      For the context, I have deployed the dockerized next js on ECS and I'm not able to consume the envs from task definition

  • @SlavaBezgachev
    @SlavaBezgachev 8 месяцев назад +1

    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

  • @raj_talks_tech
    @raj_talks_tech 7 месяцев назад +1

    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."

  • @imsarvesh_
    @imsarvesh_ 7 месяцев назад

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

  • @wilbertdune
    @wilbertdune 8 месяцев назад +8

    Continue this with CI/CD next video.

  • @gorkxs
    @gorkxs 6 месяцев назад +2

    You are a life saver. Thank you

  • @oli-9609
    @oli-9609 2 месяца назад +1

    Thanks a lot ! It's working !

  • @seyfallahrouini3412
    @seyfallahrouini3412 8 месяцев назад +1

    Thank you so much

  • @MeerUzairWasHere
    @MeerUzairWasHere 8 месяцев назад +1

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

  • @talleyrand9530
    @talleyrand9530 3 месяца назад +1

    Bro is getting better and better

  • @vincentpena7017
    @vincentpena7017 8 месяцев назад +1

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

  • @alarafatsiddique9362
    @alarafatsiddique9362 5 месяцев назад +2

    amazing ...just loved it...could you please make another video adding Github Actions for CI/CD with the current video !....that would be amazing...thanks in advance

  • @farrukhfida212
    @farrukhfida212 8 месяцев назад +1

    Nice and simple and more than that to the point

  • @jsvrs
    @jsvrs 8 месяцев назад +1

    webdevcody needs this video.

  • @SundayOchuko
    @SundayOchuko 6 месяцев назад +1

    Thanks alot for this short and very helpful tutor

  • @RationalDissonances
    @RationalDissonances 8 месяцев назад +1

    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

  • @subhranshudas8862
    @subhranshudas8862 8 месяцев назад +1

    exactly what i was looking for!

  • @rasalas91
    @rasalas91 5 месяцев назад

    You're jumping over the "important" bits quite quickly, but it helped a lot - thanks!

  • @snbwcs
    @snbwcs 6 месяцев назад +1

    This is great content.
    I would suggest doing a video about automated workflow with Github Actions like you suggested in the video (and maybe using the Docker Hub this time ?), that would be amazing !

  • @darkcss1054
    @darkcss1054 8 месяцев назад +1

    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?

  • @shimju
    @shimju 6 месяцев назад +2

    Highly informative video. Can you please create another Part2 video regarding how to integrate GitHub Repo and using GitHub Actions create a new Docker image and automate the above Workflow. That would be very helpful. Thank you Sir.

  • @404-not-found-service
    @404-not-found-service 8 месяцев назад +1

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

  • @alecost2622
    @alecost2622 8 месяцев назад +1

    Thank you. Thats very useful information.

  • @RoublyGroup
    @RoublyGroup 7 месяцев назад +1

    thank you very much you saved my life

  • @vazy1902
    @vazy1902 8 месяцев назад +4

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

  • @martinharyanto4465
    @martinharyanto4465 8 месяцев назад +1

    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 8 месяцев назад +1

    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?

  • @mohdsahil226
    @mohdsahil226 8 месяцев назад +1

    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.

  • @abishekbaiju1705
    @abishekbaiju1705 8 месяцев назад +1

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

  • @phuoc29011206
    @phuoc29011206 2 месяца назад

    im using .env file to connect db. how to i pass through it to container with docker compose ?

  • @youhan96
    @youhan96 8 месяцев назад +1

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

  • @miguelangelcabrera2227
    @miguelangelcabrera2227 8 месяцев назад +2

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

  • @dirtysouth3291
    @dirtysouth3291 8 месяцев назад +2

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

  • @kale_bhai
    @kale_bhai 8 месяцев назад +2

    Now, do a kube cluster

  • @giannifed
    @giannifed 8 месяцев назад +1

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

  • @deaaaldeen1525
    @deaaaldeen1525 8 месяцев назад +1

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

  • @dodosaurus4875
    @dodosaurus4875 8 месяцев назад +1

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

  • @SugengWahyudi
    @SugengWahyudi 8 месяцев назад +1

    Great.., Please try dockerize Next js with Prisma

  • @abdullahiali-n2u
    @abdullahiali-n2u 8 месяцев назад +1

    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 8 месяцев назад

      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.

  • @lovrozagar3729
    @lovrozagar3729 8 месяцев назад

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

  • @alvaro-escalante-naves
    @alvaro-escalante-naves 7 месяцев назад

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

  • @binhexoct
    @binhexoct 8 месяцев назад

    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?

  • @danyacoding
    @danyacoding 8 месяцев назад

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

  • @sathish5722
    @sathish5722 Месяц назад

    pls explain how the docker image size was reduced from 1GB to 170MB? thanks.

  • @MarincaGheorghe
    @MarincaGheorghe 5 месяцев назад

    Now one needs to add the docker starting of the container automatically at startup. Also in case the container is started and the next server crashes because of an app bug how can you restart the next app ?

  • @yasseralsaidi
    @yasseralsaidi 8 месяцев назад +1

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

  • @dailynews7822
    @dailynews7822 3 месяца назад +1

    Nice content

  • @madhurchaturvedi5551
    @madhurchaturvedi5551 8 месяцев назад +1

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

  • @kennethlau8108
    @kennethlau8108 8 месяцев назад

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

  • @boyywnkobe
    @boyywnkobe 8 месяцев назад +1

    What mac do u use?

  • @metalhumans
    @metalhumans 2 месяца назад

    hi i have hosted on vps kvm2 Hostinger , but images are braking (next js , typescript, tailwind, mongodb - project)
    do we need any special settings for nginx or need any url changes
    i have purchased envato subscription and downloaded images stored them in public folder of next js project
    working well in localhost
    but breaking images after getting deployed

  • @mma-dost
    @mma-dost 8 месяцев назад +1

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

  • @Adrian_Galilea
    @Adrian_Galilea 8 месяцев назад

    What about caching, ISR SSR and so on

  • @luciusrex
    @luciusrex 15 дней назад

    a smple next.js app with 5 lines of output is 1gb???

  • @hm.till97
    @hm.till97 7 месяцев назад

    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

  • @sunilchannelvlog3743
    @sunilchannelvlog3743 8 месяцев назад

    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?

  • @NazarBrunarskyi
    @NazarBrunarskyi 7 месяцев назад

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

  • @asadsalehumar1011
    @asadsalehumar1011 8 месяцев назад +1

    solid!

  • @primostasis
    @primostasis 3 месяца назад

    hot reloading on dev not working

  • @invincibearofficial
    @invincibearofficial 8 месяцев назад +3

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

  • @виртуоз_ру
    @виртуоз_ру 8 месяцев назад

    Dockerize Nuxt.js & Deploy to VPS

  • @LOFIBOT-bp6hm
    @LOFIBOT-bp6hm 8 месяцев назад

    I prefer dockerize only the build

  • @deeperlayer
    @deeperlayer 8 месяцев назад

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