I love this article. It is very detailed and interesting. As a guy who followed the steps given in this article patiently and with attention, I would like to mention a very important thing regarding the Dockerfiles you have created. When I first created a Docker container with the a simple repository it worked like a charm, with no errors. However, when I tried the same procedure with my own ReactJS app it did not seem to work. I spent 5.5 hours trying to figure out the problem. I even switched to a different cloud platform hoping that would fix the problem. Turns out the problem was my lack of understanding the Docker syntax or linux syntax to be correct.
So when I created a Dockerfile with the following line:
# Copy the contents of the dist directory over to the nginx web root
COPY /dist/* /var/www/html/to copy ReactJS build files, it worked for a simple project because all the files (index.html, bundle.js, vendor.js, …) were in one folder — inside dist/ directory.
But when I tried this on a different ReactJS app with slightly different dist/ director, like this:
dist/
|-assest/
|-index.html
|-js/It did not work because the “ COPY /dist/* “ was not the right way to copy the files into the nginx directory. It only copied the index.html file inside the dist/ folder and avoided those 2 folders. When I tried to open the app on the browser it was blank because there were errors similar to these:
Get someid.bundle.js ERR_FILE_NOT_FOUND 404
Get someid.vendor.js ERR_FILE_NOT_FOUND 404
Get assets/bootstrap.min.css ERR_FILE_NOT_FOUND 404So my solution was this:
# Copy the contents of the dist directory over to the nginx web root
COPY dist/ /var/www/html/
RUN ls -la /var/www/html/*Hope this helps other folks who encountered similar issues.
