\n# \/snippet_repo\/frontend\/entry.sh\n\n nginx -g "daemon off;"\n<\/pre><\/div>\n\n\nthen nginx -g “daemon off”<\/strong>, what’s the difference between nginx daemon on and daemon off?<\/p>\n\n\n\nAccording to stack-overflow:<\/p>\n\n\n\n
\nFor normal production (on a server), use the default daemon on; directive so the Nginx server will start in the background. In this way Nginx and other services are running and talking to each other. One server runs many services.
\nFor Docker containers (or for debugging), the daemon off; directive tells Nginx to stay in the foreground. For containers this is useful as best practice is for one container = one process. One server (container) has only one service.<\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n\n\n\n
Aha! Makes sense to me. \ud83d\ude42<\/p>\n\n\n\n
Create Nginx config file<\/h3>\n\n\n\n
Last piece of the puzzle for the frontend is the configuration Nginx to serve the Gatsby build files.<\/p>\n\n\n
\ntouch nginx.conf\n<\/pre><\/div>\n\n\nAdd the following to nginx.conf.<\/p>\n\n\n
\n# \/snippet_repo\/frontend\/nginx.conf\n\nserver {\n root \/www\/public;\n\n location \/ {\n index index.html;\n }\n}\n<\/pre><\/div>\n\n\nWe are telling Nginx that root where our frontend build files live resides at \/www\/public.<\/p>\n\n\n\n
\/www\/public<\/strong>? Where in the cyber ether does that exist?<\/p>\n\n\n\nRemember those empty docker-compose files we created earlier? Those docker-compose files will be our next step in the Dockerization of Gatsby. Onward!<\/p>\n\n\n\n
Setup Docker Compose<\/h3>\n\n\n\n- docker-compose.yml<\/strong> for all the services and telling Nginx to serve the Gatsby build files<\/li>
- docker-compose-dev.yml<\/strong> for the development environment using the Gatsby development server<\/li><\/ol>\n\n\n\n
Let’s start with the docker-compose.yml<\/strong> file first.<\/p>\n\n\n\n- Define your app\u2019s environment with a Dockerfile. Done that!<\/strong><\/li>
- Define the services that make up your app in docker-compose.yml so they can be run together in an isolated environment.<\/li><\/ol>\n\n\n
\n# \/snippet_repo\/docker-compose.yml\n\nversion: '3'\n\nservices:\n frontend:\n<\/pre><\/div>\n\n\nIn the above we define our frontend service.<\/p>\n\n\n\n
Next we need to tell Docker where the frontend Dockerfile lives which will commence the building of the frontend isolated environment.<\/p>\n\n\n
\n# \/snippet_repo\/docker-compose.yml\n\nversion: '3'\n\nservices:\n frontend:\n build: .\/frontend\n<\/pre><\/div>\n\n\nSince our frontend service is running in a isolated environment we need to tell Docker to expose an external port that maps to the internal port that our frontend service is serving from. In this case that would be exposing port 8000 mapping to the internal port 80<\/strong>. The exposed port can be any port you like as long as the port number you choose doesn’t conflict with any of the other services that we will be running in the app.<\/p>\n\n\n\n# \/snippet_repo\/docker-compose.yml\n\nversion: '3'\n\nservices:\n frontend:\n build: .\/frontend\n ports:\n - 8000:80\n<\/pre><\/div>\n\n\nSpecify a custom container name, rather than a generated default name and we’re done.<\/p>\n\n\n\n
Here’s the finished docker-compose.yml<\/strong> file.<\/p>\n\n\n\n# \/snippet_repo\/docker-compose.yml\n\nversion: '3'\n\nservices:\n frontend:\n build: .\/frontend\n ports:\n - 8000:80\n container_name: frontend\n\n<\/pre><\/div>\n\n\nNow we’re done with the docker-compose.yml<\/strong> file which is the production compose file used to fire up the built server-side-rendered Gatsby site.<\/p>\n\n\n\nNext we build docker-compose-dev.yml<\/strong>, the compose file to fire up the Gatsby development server.<\/p>\n\n\n\nIn the docker-compose-dev.yml<\/strong> we need to override the docker-compose.yml<\/strong> file with additional service options:<\/p>\n\n\n\n- command<\/li>
- volumes<\/li><\/ul>\n\n\n\n
Using command<\/strong> we can override the default command in the Dockerfile:<\/p>\n\n\n\n# \/snippet_repo\/frontend\/Dockerfile\n.\n.\n.\nCMD [ "serve-nginx" ]\n<\/pre><\/div>\n\n\nCMD [ “serve-nginx” ] # is the default command which tells the entry.sh<\/strong> file serve the Gatsby built files from Nginx. But when we are in our development environment we want to serve from the Gatsby development server.<\/p>\n\n\n\nNote the conditional in the entry.sh<\/strong> file, if $1 == “serve-nginx”. We are going to use the docker-compose.yml<\/strong> command service option to set a new default command develop –host 0.0.0.0 –port 80<\/strong> which tells Gatsby to listen to requests from outside the docker container on port 80.<\/p>\n\n\n\n# \/snippet_repo\/frontend\/entry.sh\n.\n.\n.\n# When the starting docker from the\n# docker-compose-dev.yml file\n# the $1 variable == develop --host 0.0.0.0 --port 80\nif [ "$1" == "serve-nginx" ]; then\n nginx -g "daemon off;"\nelse\n # the $@ concatenates the docker-compose-dev command\n # develop --host 0.0.0.0 --port 80 with gatsby\n # which echos gatsby develop --host 0.0.0.0 --port 80\n gatsby $@\nfi\n<\/pre><\/div>\n\n\nSo, back to the docker-compose-dev.yml<\/strong> file, we add our command override.<\/p>\n\n\n\n# \/snippet_repo\/docker-compose-dev.yml\n\nversion: '3'\n\nservices:\n frontend:\n command: develop --host 0.0.0.0 --port 80\n<\/pre><\/div>\n\n\nNext we use the volumes option to copy the frontend files over to the docker container.<\/p>\n\n\n\n
Below is our completed docker-compose-dev.yml<\/strong> file.<\/p>\n\n\n\n# \/snippet_repo\/docker-compose-dev.yml\n\nversion: '3'\n\nservices:\n frontend:\n command: develop --host 0.0.0.0 --port 80\n volumes:\n - .\/frontend:\/www\n<\/pre><\/div>\n\n\nLaunch Our Dockerized Gatsby Site<\/h3>\n\n\n\n
To launch our Gatsby site in development mode, make sure that you are at the projects root then use the following docker-compose command<\/p>\n\n\n
\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n<\/pre><\/div>\n\n\nNote that we are invoking the production docker-compose.yml file and then overriding the docker production service options with our addition options from our docker-compose-dev.yml file.<\/p>\n\n\n\n
To build and launch the production enviroment use the following command.<\/p>\n\n\n
\ndocker-compose up -d\n<\/pre><\/div>\n\n\nAfter launching either enviroments you can use the following docker logs command to monitor the launch process which will give access to any errors if they should pop up.<\/p>\n\n\n
\ndocker-compose logs frontend\n<\/pre><\/div>\n\n\nBuild the Makefile<\/h3>\n\n\n\n
If you haven’t created a Makefile file in your project root, do so now.<\/p>\n\n\n
\ntouch Makefile\n<\/pre><\/div>\n\n\nAdd the following to your Makefile.<\/p>\n\n\n
\n# \/my-dockerized-gatsby\/Makefile\n\nbuild:\n docker-compose build\n\nprod:\n docker-compose up -d\n\ndev:\n docker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n\nup-non-daemon:\n docker-compose up\n\nstart:\n docker-compose start\n\nstop:\n docker-compose stop\n\ndown:\n docker-compose down\n\nrestart:\n docker-compose stop && docker-compose start\n\nrestart-dev:\n docker-compose down && docker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n\nrestart-frontend:\n docker-compose stop frontend && docker-compose start frontend\n<\/pre><\/div>\n\n\nNow if you want to launch Gatsby from the development enviroment you can use the command make dev instead of the versbose docker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d<\/strong>.<\/p>\n\n\n\nmake dev\n<\/pre><\/div>\n\n\nOr to launch in the production environment make prod instead of docker-compose up -d<\/strong>.<\/p>\n\n\n\nmake prod\n<\/pre><\/div>\n\n\nVoila! We are ready to develop with our new dockerized Gatsby environment.<\/p>\n","protected":false},"excerpt":{"rendered":"
Set up a Docker development and production environments for Gatsby with docker-compose.<\/p>\n","protected":false},"author":1,"featured_media":42,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,13,12],"tags":[3,21,10],"class_list":["post-40","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-boiler-plates","category-docker","category-gatsby","tag-docker","tag-docker-compose","tag-gatsby"],"_links":{"self":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":70,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":2412,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/40\/revisions\/2412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/media\/42"}],"wp:attachment":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}