chore: rebuild docker image and github workflow

johndeniel · Jun 11, 2024 · 8448f27 · 8448f27
1 parent ed1f2c2
commit 8448f27
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 16 deletions.
diff --git a/.github/workflows/build-deploy.yaml b/.github/workflows/build-deploy.yaml
@@ -28,3 +28,7 @@ jobs:
           context: .
           push: true
           tags: ${{ secrets.DOCKER_HUB_USERNAME }}/spotify:build-v1.001
+          secrets: |
+            SPOTIFY_CLIENT_ID=${{ secrets.SPOTIFY_CLIENT_ID }}
+            SPOTIFY_CLIENT_SECRET=${{ secrets.SPOTIFY_CLIENT_SECRET }}
+            SPOTIFY_PLAYLIST_ID=${{ secrets.SPOTIFY_PLAYLIST_ID }}
diff --git a/Dockerfile b/Dockerfile
@@ -1,27 +1,58 @@
-# Use the official Rust image as the base image
-FROM rust:latest AS builder
+# Start with the official Rust image
+FROM rust:1.71-slim-buster AS builder
+
+# Install required dependencies
+RUN apt-get update && apt-get install -y \
+    pkg-config \
+    libssl-dev \
+    && rm -rf /var/lib/apt/lists/*
 
 # Create a new empty shell project
 RUN USER=root cargo new --bin spotify
 WORKDIR /spotify
 
-# Copy the Cargo.toml and Cargo.lock files
-COPY Cargo.toml Cargo.lock ./
+# Copy the Cargo.toml and Cargo.lock if it exists
+COPY Cargo.toml Cargo.toml
+COPY Cargo.lock Cargo.lock
 
 # Copy the source code
-COPY src ./src
+COPY src src
+
+# Build the dependencies only
+RUN cargo build --release
+
+# Copy the source code again to ensure it's up to date
+COPY . .
 
-# Build the application in release mode
+# Build the application
 RUN cargo build --release
 
-# Use the official Debian image as the base image for the runtime
+# Use a minimal base image for the final stage
 FROM debian:buster-slim
 
-# Copy the compiled binary from the builder stage
+# Install required runtime dependencies
+RUN apt-get update && apt-get install -y \
+    libssl1.1 \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the built binary from the builder stage
 COPY --from=builder /spotify/target/release/spotify /usr/local/bin/spotify
 
-# Expose port 7860
+# Copy the static files to the final image
+COPY src/static /usr/local/bin/static
+
+# Copy environment variables from build arguments to the runtime environment
+ARG SPOTIFY_CLIENT_ID
+ARG SPOTIFY_CLIENT_SECRET
+ARG SPOTIFY_PLAYLIST_ID
+
+ENV SPOTIFY_CLIENT_ID=$SPOTIFY_CLIENT_ID
+ENV SPOTIFY_CLIENT_SECRET=$SPOTIFY_CLIENT_SECRET
+ENV SPOTIFY_PLAYLIST_ID=$SPOTIFY_PLAYLIST_ID
+
+# Expose the port the app runs on
 EXPOSE 7860
 
-# Run the application
+# Set the default command to run the application
 CMD ["spotify"]
diff --git a/src/router/routes.rs b/src/router/routes.rs
@@ -10,6 +10,6 @@ pub fn app() -> Router {
 }
 
 async fn serve_html() -> impl IntoResponse {
-    let html_content = fs::read_to_string("src/static/index.html").unwrap();
+    let html_content = fs::read_to_string("/usr/local/bin/static/index.html").unwrap();
     Html(html_content)
 }
diff --git a/src/static/index.html b/src/static/index.html
@@ -5,13 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Spotify Playlist</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+        }
+    </style>
 </head>
 <body class="bg-gray-900 text-white">
-    <header class="bg-black p-6">
-        <h1 class="text-3xl font-bold">Spotify API Demo</h1>
+    <header class="bg-black p-6 shadow-md">
+        <h1 class="text-3xl font-bold text-green-500">Spotify API Demo</h1>
     </header>
     <main class="p-6">
-        <ul id="playlist" class="space-y-6"></ul>
+        <ul id="playlist" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"></ul>
     </main>
 
     <script>
@@ -23,10 +28,10 @@ <h1 class="text-3xl font-bold">Spotify API Demo</h1>
 
                 items.forEach(({ track }) => {
                     const listItem = document.createElement('li');
-                    listItem.className = 'flex items-start space-x-4 p-4 bg-gray-800 rounded-lg hover:bg-gray-700 transition';
+                    listItem.className = 'flex flex-col md:flex-row items-start space-y-4 md:space-y-0 md:space-x-4 p-4 bg-gray-800 rounded-lg hover:bg-gray-700 transition shadow-lg';
 
                     listItem.innerHTML = `
-                        <img src="${track.album.images[0].url}" alt="${track.name} cover" class="w-48 h-48 object-cover rounded-md">
+                        <img src="${track.album.images[0].url}" alt="${track.name} cover" class="w-full md:w-48 h-48 object-cover rounded-md shadow-md">
                         <div class="flex flex-col space-y-2">
                             <h2 class="text-xl font-semibold">${track.name}</h2>
                             <p class="text-gray-400">Artists: ${track.artists.map(artist => artist.name).join(', ')}</p>