[fix] update docker compose 😊 (#496)

* [fix] update docker compose 😊

* [doc] update README.md

---------

Co-authored-by: John Zhou <john@realchar.ai>

README.md

@@ -277,29 +277,13 @@ Note if you want to remotely connect to a RealChar server, SSL set up is require
 ## (Optional) 📀 Installation via Docker
 <details><summary>👇click me</summary>
 
-1. Docker images: you can use our docker image directly (if you are not using Apple M1/M2 CPUs)
+1. Use the `docker-compose.yaml` to run the app. Run the following command after configuring your `.env` file in the root directory:
     ```sh
-    docker pull shaunly/real_char:latest
-    docker tag shaunly/real_char:latest realtime-ai-character
-    ```
-    ```sh
-    docker pull shaunly/real_char_frontend_next:latest
-    docker tag shaunly/real_char_frontend_next:latest realchar-next-web
-    ```
-    (Or you want build yourself) Build docker images
-    ```sh
-    python cli.py docker-build
-    python cli.py docker-next-web-build
-    ```
+    docker-compose up
     ```
     If you have issues with docker (especially on a non-Linux machine), please refer to https://docs.docker.com/get-docker/ (installation) and https://docs.docker.com/desktop/troubleshoot/overview/ (troubleshooting).
-1. Run docker images with `.env` file
-    ```sh
-    python cli.py docker-run
-    python cli.py docker-next-web-run
-    ```
 
-1. Go to http://localhost:3000 to start talking or use terminal    client
+1. Go to http://localhost:3000 to start talking or use terminal client with
     ```sh
     python client/cli.py
     ```

client/next-web/Dockerfile.dev

@@ -0,0 +1,67 @@
+# We are using a Node.js base image
+FROM node:lts-alpine as build
+
+# Working directory be app
+WORKDIR /app
+
+ARG NEXT_PUBLIC_RC_BUILD_NUMBER
+ARG NEXT_PUBLIC_FIREBASE_API_KEY
+ARG NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
+ARG NEXT_PUBLIC_FIREBASE_PROJECT_ID
+ARG NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
+ARG NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
+ARG NEXT_PUBLIC_FIREBASE_APP_ID
+ARG NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
+ARG NEXT_PUBLIC_API_HOST
+ARG API_HOST
+ARG NEXT_PUBLIC_TURN_SERVER_API_ENDPOINT
+
+ENV NEXT_PUBLIC_RC_BUILD_NUMBER $NEXT_PUBLIC_RC_BUILD_NUMBER
+ENV NEXT_PUBLIC_FIREBASE_API_KEY $NEXT_PUBLIC_FIREBASE_API_KEY
+ENV NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN $NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
+ENV NEXT_PUBLIC_FIREBASE_PROJECT_ID $NEXT_PUBLIC_FIREBASE_PROJECT_ID
+ENV NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET $NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
+ENV NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID $NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
+ENV NEXT_PUBLIC_FIREBASE_APP_ID $NEXT_PUBLIC_FIREBASE_APP_ID
+ENV NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID $NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
+ENV NEXT_PUBLIC_API_HOST $NEXT_PUBLIC_API_HOST
+ENV API_HOST $API_HOST
+ENV NEXT_PUBLIC_TURN_SERVER_API_ENDPOINT $NEXT_PUBLIC_TURN_SERVER_API_ENDPOINT
+
+
+# Copy package.json and package-lock.json before other files
+# Utilise Docker cache to save re-installing dependencies if unchanged
+COPY package.json ./
+COPY package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy all files
+COPY ./ ./
+
+# Build app
+RUN env
+RUN npm run build
+
+# Run phase
+FROM node:lts-alpine
+
+# Install Nginx
+RUN apk add --no-cache curl nginx procps
+
+WORKDIR /app
+
+# Copy over the built app files
+COPY --from=build /app ./
+
+# Install production dependencies
+RUN npm ci --only=production
+
+# Expose port 3000 to the Docker host, so we can access it
+# from the outside
+EXPOSE 3000
+
+# Start command will start the Next.js app
+CMD ["sh", "-c", "npm start"]
+

client/next-web/src/util/apiSsr.js

@@ -1,16 +1,12 @@
 const host = process.env.API_HOST;
 
 export async function getCharacters() {
-  if (!host) {
-    // skip fetching during build
+  try {
+    const res = await fetch(`${host}/characters`, { next: { revalidate: 5 } });
+    return await res.json();
+  } catch (err) {
+    console.log(err);
     return [];
   }
 
-  const res = await fetch(`${host}/characters`, { next: { revalidate: 5 } });
-
-  if (!res.ok) {
-    // This will activate the closest `error.js` Error Boundary
-    throw new Error('Failed to fetch data');
-  }
-  return res.json();
 }

docker-compose.yaml

@@ -12,15 +12,17 @@ services:
   web:
     build:
       context: ./client/next-web/
+      dockerfile: Dockerfile.dev
       args:
         NEXT_PUBLIC_FIREBASE_API_KEY: AIzaSyAVqhwbdB8I56HAMVVlgJKZcfrBkKI2AhQ
         NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: assistly-kubernetes.firebaseapp.com
         NEXT_PUBLIC_FIREBASE_PROJECT_ID: assistly-kubernetes
         NEXT_PUBLIC_FIREBASE_APP_ID: 1:806733379891:web:48bf124c0d9b90298e6646
         REACT_APP_BUILD_NUMBER: 0.0.1
-        NEXT_PUBLIC_API_HOST: http://127.0.0.1:8000
+        NEXT_PUBLIC_API_HOST: http://localhost:8000
+        API_HOST: http://backend:8000
     ports:
-      - "80:80"
+      - "3000:3000"
     depends_on:
       - backend
     environment:
@@ -29,7 +31,7 @@ services:
       - NEXT_PUBLIC_FIREBASE_PROJECT_ID=assistly-kubernetes
       - NEXT_PUBLIC_FIREBASE_APP_ID=1:806733379891:web:48bf124c0d9b90298e6646
       - REACT_APP_BUILD_NUMBER=0.0.1
-      - NEXT_PUBLIC_API_HOST=http://backend:8000
+      - NEXT_PUBLIC_API_HOST=http://localhost:8000
       - API_HOST=http://backend:8000
 
 networks: