Скачать или смотреть How to Keep Compiled Files After Starting a Docker Container with a Volume Mounted

Discover how to retain compiled CSS files in a Docker container when using volume mounts. This guide outlines a step-by-step solution to keep your files intact after starting the container.
---
This video is based on the question https://stackoverflow.com/q/63507752/ asked by the user 'Coukaratcha' ( https://stackoverflow.com/u/3913361/ ) and on the answer https://stackoverflow.com/a/63513435/ provided by the user 'Coukaratcha' ( https://stackoverflow.com/u/3913361/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to keep compiled files after starting a docker container with volume mounted?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Keep Compiled Files After Starting a Docker Container with a Volume Mounted

When working with Docker, it's common to encounter issues related to file persistence, especially when using volume mounts. A frequent problem developers face is the loss of compiled files generated within a container once they run the container with a mounted volume. This guide will break down the issue and provide a comprehensive solution.

The Problem Explained

You have a multi-stage Docker build that compiles SCSS files into CSS using Node.js. In your setup, you're mounting a volume between the app’s directory on your host machine and inside the container. This configuration is great for development, but there's a catch: when the container starts, it replaces the container's directory content with the content from the host machine, leading to the disappearance of the compiled files.

Current Project Structure

To clarify, here's how your project is currently structured:

[[See Video to Reveal this Text or Code Snippet]]

Key Observations

Volumes Replace Content: Docker mounts the host directory and overwrites the container’s content in the specified path. If compiled files are generated inside the container, they won't exist on the host side, leading to their removal upon container start.

Need for Persistence: You want to compile SCSS files into CSS and retain them in the /app/<my_app>/static/css/ folder of your Docker container.

The Solution

To resolve this issue, you can modify your approach by not using multi-stage builds for the compilation process. Instead, create a dedicated Docker image specifically for SCSS compilation, which allows you to compile your files into the correct volume while keeping everything in sync.

Step-by-Step Instructions

Create a New Dockerfile for SCSS Compilation:
You’ll need a new Dockerfile that handles compilation:

[[See Video to Reveal this Text or Code Snippet]]

This Dockerfile does the following:

Sets the working directory.

Installs the necessary dependencies.

Prepares directories for SCSS and CSS.

Update Your docker-compose.yml:
Adjust the docker-compose.yml file to include the new SCSS service. Your updated configuration will look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Differences in Configuration:

The scss service runs separately, allowing it to compile SCSS into CSS before the main web application starts.

Volumes are specifically set so that compiled CSS files can be written back to the intended host directories.

Run the Configuration:
Finally, execute the following command to start your containers:

[[See Video to Reveal this Text or Code Snippet]]

Expected Outcome:

Upon running the command, the compiled CSS files should now appear in the static/css directory as expected. The SCSS container runs once to compile the files, and you can rerun it whenever you make changes to your SCSS files to regenerate the compiled CSS.

Conclusion

By separating the SCSS compilation from the multi-stage build process, you're able to maintain the integrity of your compiled files within the Docker environment. This method not only safeguards against losing important assets but also enhances your build and development workflow.

If you're facing similar challenges with Docker volumes and compiled files, using this solution can streamline your development process significantly.

Final Notes

Always remember that when using Docker volumes, understanding how they interact with your container's filesystem is crucial to avoid data loss or unexpected behavior.

Happy coding!