Fix deploying process.

.env.dev

@@ -5,7 +5,7 @@
 BACKEND_PORT=8080
 FRONTEND_PORT=3000
 BASE_URL=http://localhost:3000
-NEXT_PUBLIC_BACKEND_URL=http://localhost:8080/service
+BACKEND_URL=http://localhost:8080/service
 
 # Logto Authentication Configuration
 LOGTO_ENDPOINT=https://auth.muchen.fan

docker-compose.yml

@@ -7,7 +7,13 @@ services:
     ports:
       - "${BACKEND_PORT}:8080"
     environment:
-      - GIN_MODE=release
+      - LOGTO_ENDPOINT=${LOGTO_ENDPOINT}
+      - LOGTO_APP_ID=${LOGTO_APP_ID}
+      - LOGTO_APP_SECRET=${LOGTO_APP_SECRET}
+      - LOGTO_REDIRECT_URI=${LOGTO_REDIRECT_URI}
+      - LOGTO_POST_SIGN_OUT_REDIRECT_URI=${LOGTO_POST_SIGN_OUT_REDIRECT_URI}
+      - COOKIE_SECRET=${COOKIE_SECRET}
+      - BASE_URL=${BASE_URL}
     networks:
       - starter_network
 
@@ -15,14 +21,15 @@ services:
     build:
       context: ./frontend
       dockerfile: Dockerfile
+      args:
+        - BACKEND_URL=${BACKEND_URL}
     restart: unless-stopped
     ports:
       - "${FRONTEND_PORT}:3000"
     environment:
-      - NODE_ENV=production
+      - BACKEND_URL=${BACKEND_URL}
-      - NEXT_PUBLIC_BACKEND_URL=${NEXT_PUBLIC_BACKEND_URL}
+    depends_on:
-    # depends_on:
+      - backend
-    # - backend
     networks:
       - starter_network
 

frontend/Dockerfile

@@ -11,6 +11,10 @@ RUN npm ci --prefer-offline --no-audit
 # Copy the rest of the application code
 COPY . .
 
+# Pass build-time environment variables
+ARG BACKEND_URL
+ENV BACKEND_URL=${BACKEND_URL}
+
 # Build the Next.js app
 RUN npm run build
 
@@ -26,6 +30,9 @@ COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/node_modules ./node_modules
 
+# Runtime environment variables
+ENV BACKEND_URL=${BACKEND_URL}
+
 EXPOSE 3000
 
-CMD ["npm", "start"] 
+CMD ["npm", "start"]

frontend/next.config.ts

@@ -2,6 +2,9 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  env: {
+    BACKEND_URL: process.env.BACKEND_URL,
+  },
 };
 
 export default nextConfig;

frontend/src/app/components/HealthStatus.tsx

@@ -10,9 +10,7 @@ export default function HealthStatus() {
     const checkHealth = async () => {
       try {
         setLoading(true);
-        const response = await fetch(
+        const response = await fetch(`${process.env.BACKEND_URL}/health`);
-          `${process.env.NEXT_PUBLIC_BACKEND_URL}/health`
-        );
 
         if (!response.ok) {
           throw new Error(`Server responded with status: ${response.status}`);

frontend/src/app/contexts/AuthContext.tsx

@@ -36,7 +36,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const checkAuthStatus = async () => {
     try {
       const response = await fetch(
-        `${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/user-id-token-claims`,
+        `${process.env.BACKEND_URL}/auth/user-id-token-claims`,
         {
           credentials: "include",
         }
@@ -60,11 +60,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   };
 
   const login = () => {
-    window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/sign-in`;
+    window.location.href = `${process.env.BACKEND_URL}/auth/sign-in`;
   };
 
   const logout = () => {
-    window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/sign-out`;
+    window.location.href = `${process.env.BACKEND_URL}/auth/sign-out`;
   };
 
   return (