Improve the construction method

.github/workflows/docker-image.yml

@@ -32,4 +32,4 @@ jobs:
       with:
         context: .
         push: true
-        tags: wongsaang/chatgpt-ui:latest,wongsaang/chatgpt-ui:${{ github.ref_name }}
+        tags: wongsaang/chatgpt-ui-client:latest,wongsaang/chatgpt-ui-client:${{ github.ref_name }}

Dockerfile

@@ -8,18 +8,15 @@ RUN yarn install
 
 COPY . .
 
-RUN yarn build
+RUN yarn generate
 
 
-FROM node:18-alpine3.16
-
-ENV NITRO_HOST=0.0.0.0
-ENV NITRO_PORT=80
+FROM nginx:alpine
 
 WORKDIR /app
 
-COPY --from=builder /app/.output .
+COPY --from=builder /app/.output/public .
 
-EXPOSE 80
+COPY nginx.conf /etc/nginx/templates/default.conf.template
 
-ENTRYPOINT ["node", "server/index.mjs"]
+EXPOSE 80

app2.vue

@@ -1,108 +0,0 @@
-<script setup>
-const { $i18n } = useNuxtApp()
-const runtimeConfig = useRuntimeConfig()
-const colorMode = useColorMode()
-const drawer = ref(null)
-const themes = ref([
-  { title: $i18n.t('lightMode'), value: 'light' },
-  { title: $i18n.t('darkMode'), value: 'dark' },
-  { title: $i18n.t('followSystem'), value: 'system'}
-])
-const setTheme = (theme) => {
-  colorMode.preference = theme
-}
-const feedback = () => {
-  window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
-}
-
-const { locale, locales, setLocale } = useI18n()
-const setLang = (lang) => {
-  setLocale(lang)
-}
-</script>
-
-<template>
-  <v-app
-      :theme="$colorMode.value"
-  >
-    <v-navigation-drawer
-        v-model="drawer"
-    >
-      <v-list>
-        <ModelDialog/>
-      </v-list>
-
-      <template v-slot:append>
-        <v-divider></v-divider>
-        <v-list>
-          <ApiKeyDialog/>
-
-          <v-menu
-          >
-            <template v-slot:activator="{ props }">
-              <v-list-item
-                  v-bind="props"
-                  rounded="xl"
-                  :prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
-                  :title="$t('themeMode')"
-              ></v-list-item>
-            </template>
-            <v-list
-                bg-color="white"
-            >
-              <v-list-item
-                  v-for="(theme, idx) in themes"
-                  :key="idx"
-                  @click="setTheme(theme.value)"
-              >
-                <v-list-item-title>{{ theme.title }}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-
-          <SettingsLanguages/>
-
-          <v-list-item
-              rounded="xl"
-              prepend-icon="help_outline"
-              :title="$t('feedback')"
-              @click="feedback"
-          ></v-list-item>
-        </v-list>
-      </template>
-    </v-navigation-drawer>
-
-    <v-app-bar
-        class="d-lg-none"
-    >
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-
-      <v-toolbar-title>{{ runtimeConfig.public.appName }}</v-toolbar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-menu
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn
-              v-bind="props"
-              icon="help_outline"
-              title="Feedback"
-          ></v-btn>
-        </template>
-        <v-list
-        >
-          <v-list-item
-              @click="feedback"
-          >
-            <v-list-item-title>{{ $t('feedback') }}</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </v-app-bar>
-
-    <v-main>
-      <NuxtPage/>
-    </v-main>
-  </v-app>
-</template>

docker-compose.yml

@@ -1,8 +1,31 @@
 version: '3'
 services:
-  app:
+  client:
     build:
       context: .
       dockerfile: ./Dockerfile
+    environment:
+      - SERVER_DOMAIN=http://backend:8000
+    depends_on:
+      - backend
+    volumes:
+      - backend_static:/app/static
     ports:
-      - '${APP_PORT:-80}:80'
+      - '80:80'
+    networks:
+        - chatgpt_ui_network
+  backend:
+    image: 'wongsaang/chatgpt-ui-server:latest'
+    volumes:
+      - backend_static:/app/static
+    ports:
+      - '8000:8000'
+    networks:
+      - chatgpt_ui_network
+
+networks:
+  chatgpt_ui_network:
+    driver: bridge
+
+volumes:
+  backend_static:

layouts/default.vue

@@ -63,7 +63,6 @@ onNuxtReady(async () => {
         <div class="px-1">
           <v-divider></v-divider>
           <v-list>
-            <ApiKeyDialog/>
 
             <v-menu
             >

nginx.conf

@@ -0,0 +1,23 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    location / {
+        root   /app;
+        index  index.html;
+    }
+
+    location /api/
+    {
+        proxy_pass ${SERVER_DOMAIN};
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    location /admin/ {
+        proxy_pass ${SERVER_DOMAIN};
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}