Dockerize Three.js

Dockerizing a Three.js application
or website.

  • by clickonrefresh
  • Threejs
  • react-three-fiber

Dockerizing a threejs app or website is alot easier than may seem. First, ensure you have met the pre-requisites:

  • Install Docker & Docker Compose

  • Have an existing three.js project



Install Docker


sudo apt-get install apt-transport-https ca-certificates curl software-properties-common -y
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"
sudo apt-get update
sudo apt install docker-ce -y
sudo usermod -aG docker $USER
newgrp docker



Install Docker-Compose


sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
sudo apt-get update




Dockerize Threejs Instructions


Now that you have docker & docker-compose installed,
and a three.js project, you can serve your project a couple different ways with docker.


Run a 'dev' container:


To create a docker image that is mapped to your 'src/index' path, run

npm run dev

Then run

docker run -p 8822:80 -v ~/my-project/src/index:/usr/share/nginx/html -d nginx

the -v flag mounts volumes using the full path of the development server folder, mapped to the users shared www html folder inside the nginx container.
The -p flag sets the ports binding, in this case port 80 of the nginx container is being forwarded to port 8822 on the host.


Run a 'production' container:


To create a docker image that is mapped to your 'build or public' path, run

npm run start

Then run

docker run -p 8822:80 -v ~/my-project/build:/usr/share/nginx/html -d nginx

the -v flag mounts volumes using the full path of the production server folder, mapped to the users shared www html folder inside the nginx container.
The -p flag sets the ports binding, in this case port 80 of the nginx container is being forwarded to port 8822 on the host.


Tagging images and pushing to gitlab container registry



Ensure you have a gitlab repository for your project as that repo contains access to the container registry which you will use to push your docker images to.
Login to your gitlab account using a PAT generated in 'settings'

docker login registry.gitlab.com/your-username/your-repo-name

To tag a docker image, run

docker -t registry.gitlab.com/your-username/your-repo-name:yourtagname

Then push the image to gitlab container registry

docker push registry.gitlab.com/your-username/your-repo-name:yourtagname


More coming soon

Next ❤️ Chakra ❤️ Three ❤️ Docker