feat(deploy): Add Docker configuration for containerization#183
feat(deploy): Add Docker configuration for containerization#183arjav007 wants to merge 1 commit intoAnmol-TheDev:mainfrom
Conversation
This adds Dockerfile, docker-compose.yml, and an Nginx configuration to allow the application to be built and run in a container. Closes Anmol-TheDev#177.
|
Warning
|
| Cohort / File(s) | Summary of Changes |
|---|---|
Docker orchestrationDocker-compose.yml |
Adds Compose v3.8 config with service music-app-frontend: builds from current directory, names container music_app_container, maps 8080:80, sets restart: unless-stopped, with inline comments. |
Image build pipelineDockerfile |
Adds multi-stage build: Node 20-alpine builder installs pnpm, installs deps, builds Vite app to dist; final stage nginx:stable-alpine serves dist, copies custom nginx.conf, exposes 80. |
Web server confignginx.conf |
Adds Nginx server block on 80 serving /usr/share/nginx/html with SPA fallback via try_files ... /index.html. |
Sequence Diagram(s)
sequenceDiagram
autonumber
actor Dev as Developer
participant DC as Docker Compose
participant DF as Dockerfile (Node builder)
participant NX as Nginx Container
participant Br as Browser
Dev->>DC: docker compose up --build
DC->>DF: Build image (pnpm install, pnpm build)
DF-->>DC: Produce image with /usr/share/nginx/html (dist)
DC->>NX: Run container (port 80 exposed)
NX-->>DC: Service ready on 80
DC-->>Br: Host port 8080 forwards to container 80
Br->>NX: GET /route
NX->>NX: try_files $uri /index.html
NX-->>Br: Serve index.html or static asset
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
I built a burrow, neat and light,
With Docker drums and Nginx bright.
Vite winds whisk bits to dist,
Ports align—no fuss, no twist.
I thump my paw: “Compose, ignite!”
Now snacks and SPA serve through the night. 🥕🐇
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title Check | ✅ Passed | The title succinctly describes the primary change of adding Docker configuration for containerization and follows conventional commit style, accurately reflecting the addition of Dockerfile, docker-compose, and related deployment settings without extraneous detail. |
| Docstring Coverage | ✅ Passed | No functions found in the changes. Docstring coverage check skipped. |
✨ Finishing touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
Comment @coderabbitai help to get the list of available commands and usage tips.
|
@arjav007 can you tell me a reason to Dockerize this project |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
nginx.conf (1)
3-20: Add security headers and performance optimizations.The basic SPA routing configuration is correct, but consider adding:
Security headers to protect against common vulnerabilities:
X-Frame-Optionsto prevent clickjackingX-Content-Type-Optionsto prevent MIME sniffingContent-Security-Policyfor XSS protectionReferrer-Policyto control referrer informationGzip compression to reduce bandwidth and improve load times
Caching headers for static assets (JS, CSS, images) to improve performance
Apply this diff to enhance security and performance:
server { # Listen on port 80, the standard HTTP port listen 80; + # Security headers + add_header X-Frame-Options "SAMEORIGIN" always; + add_header X-Content-Type-Options "nosniff" always; + add_header X-XSS-Protection "1; mode=block" always; + add_header Referrer-Policy "strict-origin-when-cross-origin" always; + + # Enable gzip compression + gzip on; + gzip_vary on; + gzip_min_length 1024; + gzip_types text/plain text/css text/xml text/javascript application/javascript application/json; + # The root directory where our static files are located root /usr/share/nginx/html; # The default file to serve index index.html; # This block is key for SPA routing (like with React Router) location / { # Try to serve the requested file ($uri), then a directory ($uri/), # and if neither is found, fall back to serving index.html. # This allows the client-side router to handle the URL. try_files $uri $uri/ /index.html; } + + # Cache static assets + location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { + expires 1y; + add_header Cache-Control "public, immutable"; + } }Dockerfile (4)
8-8: Pin the pnpm version for reproducibility.Installing the latest version of pnpm may lead to inconsistent builds if breaking changes are introduced in future versions.
Apply this diff to pin the pnpm version:
-RUN npm install -g pnpm +RUN npm install -g pnpm@9.15.0Note: Check your local pnpm version with
pnpm --versionand use that version here for consistency.
11-21: Optimize Docker layer caching.Copying the entire source code (line 17) before the build invalidates the cache whenever any source file changes, even if dependencies haven't changed. This works but could be more efficient.
Consider moving non-essential files to a later COPY step if you want to maximize cache hits, though for most projects the current approach is acceptable:
# Copy package and lock files COPY package.json pnpm-lock.yaml ./ # Install dependencies using pnpm RUN pnpm install -# Copy the rest of the application source code -COPY . . +# Copy only necessary source files for the build +COPY src ./src +COPY public ./public +COPY index.html vite.config.js tsconfig.json ./ # Build the application for production # This creates a 'dist' folder with the static files RUN pnpm run buildAlternatively, create a
.dockerignorefile to exclude unnecessary files from the build context (recommended approach).
1-38: Add health check for container monitoring.A health check allows Docker to verify that the Nginx server is responding correctly, which is useful for orchestration and monitoring.
Add this to the final stage:
# Expose port 80 to the outside world EXPOSE 80 +# Health check to ensure nginx is serving correctly +HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ + CMD wget --quiet --tries=1 --spider http://localhost/ || exit 1 + # The default command for the nginx image is to start the server, # so we don't need to specify a CMD.
1-21: Consider adding a .dockerignore file.Without a
.dockerignorefile, all files in the build context are sent to the Docker daemon, includingnode_modules,.git, build artifacts, etc., which can slow down the build and increase the image size.Do you want me to generate a recommended
.dockerignorefile for this project?Docker-compose.yml (3)
4-8: Inconsistent naming convention.The service name uses hyphens (
music-app-frontend) while the container name uses underscores (music_app_container). For consistency and better readability, use the same naming pattern.Apply this diff to align naming:
music-app-frontend: # Build the Docker image from the Dockerfile in the current directory (.) build: . # A friendly name for the container - container_name: music_app_container + container_name: music-app-frontend
3-13: Add health check to Docker Compose configuration.While health checks can be defined in the Dockerfile, specifying them in
docker-compose.ymlallows for environment-specific configuration and better monitoring in development.Apply this diff to add a health check:
music-app-frontend: # Build the Docker image from the Dockerfile in the current directory (.) build: . # A friendly name for the container container_name: music_app_container ports: # Map port 8080 on the host machine to port 80 in the container - "8080:80" # Restart the container automatically unless it is manually stopped restart: unless-stopped + healthcheck: + test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost/"] + interval: 30s + timeout: 3s + retries: 3 + start_period: 5s
3-13: Consider adding resource limits for production readiness.Adding resource limits prevents the container from consuming excessive host resources and helps with capacity planning.
Apply this diff to add resource limits:
music-app-frontend: # Build the Docker image from the Dockerfile in the current directory (.) build: . # A friendly name for the container container_name: music_app_container ports: # Map port 8080 on the host machine to port 80 in the container - "8080:80" # Restart the container automatically unless it is manually stopped restart: unless-stopped + deploy: + resources: + limits: + cpus: '0.5' + memory: 512M + reservations: + cpus: '0.25' + memory: 256MNote: Adjust these values based on your application's actual resource needs.
|
Hey @Anmol-TheDev my main motivation was to lower the barrier to entry for new and future contributors. By containerizing the app, anyone can get a fully working development environment with a single command. This avoids the frustration of manual setup and ensures that everyone is building and testing in the exact same environment, which should make future contributions much smoother. |
2 participants
This pull request resolves issue #177 by adding Docker support to the application.
Changes Made:
Added a multi-stage Dockerfile to build the Vite application and serve it with Nginx.
Added a docker-compose.yml for easy local development and startup.
Added a nginx.conf to correctly handle SPA routing.
How to Test:
Ensure Docker Desktop is running.
Run the command docker compose up --build -d.
Navigate to http://localhost:8080 in your browser.
Summary by CodeRabbit
New Features
Chores