Dockerize Full Stack React and Golang Project:The Ultimate Guide | Grow Your Skill

Hello friends I am n welcome to the concluding episode of Full stack web development using re and goof fiber in this session we will deploy our application in a Docker container in order to do so so there are couple of ways uh one way is that we can copy our source code into into Docker container and we will and we can compile over there and second where second approach is that uh we can create our uh binary files and compile our files into our development machine and uh we can copy the binary file into the dogger container and we can run from there okay and uh that is a since our application is a very lightweight and very small project so I think that I would be going the other way that uh I will compile all the my files on my local machine on my development machine and I will copy the compiled binary into the docker container okay and inside the docker container so we will need uh enginex web server to serve the static uh our uh client uh client files FS application and uh for the myql so I am going to use my MySQL running on my host machine and instead of having a separate container for the my SQL but we can go that way no problem at uh with that for a larger application so ideally it's better to uh have uh separate services for each and every uh every every applications like MySQL running in a separate container anex running in a separate container like that so but that way so we can use doer compose as well but uh for this uh tutorial for this session so I'm going to use one single Docker file and uh I have noted down the steps what we will need so so we will need engine server and my SQL would be running on my host machine so first of all so like we will need to compile our uh go application so this is the command which we will run and uh this is this flag is be required CU by default that uh with the enginex image so that is Alpine image and with a with the Alpine image so we will need to uh disable to have this flag this cgu enable flag to zero so that our compil binary would be statically linked okay and uh secondly so we will uh compile our uh react application and by the way this is the command so we will do that so first of all so let's proceed so first of all so we will need to create a Docker file at the very root level top level so here we will start with the PR and uh I am going to use Engen X Alpine one Alpine is a very lightweight uh one so that's why so I'm going to with that way and uh by the way so I have all created uh this enginex configuration file so which we will copy from our source engine X sorry not this current directory and the name is default do conf and uh this file we will need to copy at this location inside the container Etc engx cons do D default Doon okay so this way so what I am going I am doing that that I am simply copying this file this default configuration file into the uh into the inside the container at this location and by the way so this is this is simply a pretty straightforward the uh running uh I mean serving the static files so there is nothing nothing important with it nothing such nothing complex Bri is straightfor okay then uh I will start the work Di and uh our workd would be blog second I'll copy from client and it every contained in the build directory and the from the build directory to this location for www HTML so this way what I am go what I am doing that we are copying all the client build direct the content from the build directory into the dislocation next we will copy we also better to use the capitalize so next uh we will also copy from our server directory there is a env. broad file so uh that way so I am going to use a different produ different environment file for the production and copy to the current working directory next I'll copy from server build bu build and the name of the compiled file would be server I'm going to copy it here and uh next we will need to expose a few Port so so first Port so we will need Port 18 uh where our enginex would listen and uh we will also need to expose Port 8,000 remember our API server is running on Port 8,000 so that's why we will need to do that next we will create an entry point and uh this is uh here actually I I will uh I am going to create a exec aable file so then as such and uh I'll need to I'm going to create a custom startup file so that I can specify the uh commands over there okay so next uh we will need to create a new file startup Dosh and in this file so first of all so we will need need to have the bar Shang line it's bin s and uh first of all so I will need to Pro I just need to rename this file and once renamed so I will delete the this broad file second I we will need to make the file executable server and uh now so we will need to start our enginex as well as our uh by our compiled binary so we will say engine x hyph g demon on so that it would run in a it would run in uh in a background as a background process and we will also need to run the server so that's it so our startup is also complete and uh now it's time to land into the terminal and uh first of all so we will need to compile so build our client application so npm run build so it may take some time so and uh once this is done then uh we will are we missing some other steps so yes so by the time so it is doing so we will compile our Fiber app as well so we will CD server and uh we will paste it and it will hit enter so it uh has created it should create it should create a yes the buildt fold directory is there and the name of the file is the server so I think like we have completed our stuffs now it's time to finally build the image okay so let me clear the screen so we will say Docker build and the tag would be let's say I am going to name it blog app from the current directory oh not this from this one because our actually we will need to come to the place where our Docker file is there so Docker build hyph T blog app from the current directory so let's wait it may take some time so uh it will pull all the pull the base image from the docker hub and once this is done so we can start and we can run our application in the coner looks like uh this is done so now it's time to run our container and we can also cross check here so when this image has been created and uh now let's uh try to run this image so we will say Docker run we want to name the our container as let's say blog count so we will need to map the ports so I want the port uh from the host machine from 880 to Port 80 inside container and uh we will also need to map another Port 8,000 from the host machine to inside the container 8,000 as well and we want it to run in a interactive mode and uh we can also RM is to delete the any previous instances of this continer this image okay so blog app so looks okay so hit enter so looks like there is some problem okay b s looks like okay okay okay okay so this was the C so now it short so we will need to create the another uh I'm just building it again I forgot a slash here so let's wait okay on to open a startup.sh file so have had we copied it okay no oh sorry sorry sorry so we will also although we created this file so but we will also need to copy this startup Dosh file otherwise uh uh it won't understand isn't it so okay so let's do it one more time so okay so image got built and now it's time to run the container so yes so our engine X is also started and our Fiber app is has also running so now now it's time to test it so we will say Local Host port 8080 and uh looks everything is running fine so we can uh open a Blog title I mean full blog or and we can okay we can update it updated updated and let's say call it Docker we will save it so yes it is updated so perfect we can also just try to delete one one stuff so let's let uh so let us try to delete it so proceed so it's got It's got deleted so we can also cross check here so this is in use and uh we can come here and check the containers so this is running one it started 1 minute ago and we can also check the details so here we can also check like the blog is here and uh this is the environment file which we created from the startup do uh sh file this is our server and uh if we come back to try to uh see the content of our word ww HTML so it is so we have uh only only only copied the minified compiled JavaScript JavaScript files okay so that is one way so and uh however we can uh as I explained earlier that uh we can also go other way as well that uh we can have a separate uh container for the server separate one for the engine and separate one for the client and fourth one where for the myql running and a uh separate entirely new container but since this is this our application was a very small application and and it was mostly for a learning purpose so that is why uh I prefer to go with a simple single doger doger file inste of a do compose okay and uh there is one more benefit however this is my personal view I not opposing anything but uh I think like on my server wherever my all the applications are installed so I prefer to have a global MySQL installation so that I can manage it very easily so in one MySQL installation so I am having I am uh having multiple applications sharing the same uh database or or or multiple multiple DBS so that way so however I mean this is as I said this is my personal view so we can go other way as well using a separate my SQL running in a uh entirely new separate container as a service okay so that's all for this session and uh I'll uh if you have anything to say so please do let me know in the comment section and I'll try to answer them as soon as possible so till then take care and happy coding

Channel: Grow Your Skill

Views: 587

Keywords: Grow Your Skill, Go tutorial, Golang programming, Go project, web development, full stack project, full stack project with react and golang, golang, reactjs golang project, go project, golang and reactjs, golang full stack, golang fiber, golang with react, golang for beginners, react js project, Docker, Dockerize Go Application, Go project Deployment, DevOps, Dockerization Guide, Docker Best Practices, Docker Deployment, Docker Images, Microservices

Id: oGch_c2lR2M

Length: 16min 5sec (965 seconds)

Published: Mon Oct 02 2023