Merge pull request #1 from n-y-kim/main

Update frontend & workflow & manifest after dev test

.github/workflows/app.yaml

@@ -10,26 +10,26 @@ jobs:
     steps:
       - name: Checkout source code 
         uses: actions/checkout@v3
-
-      - name: ACR build
-        id: build-push-acr
-        uses: azure/acr-build@v1
         with:
-          service_principal: ${{ secrets.SERVICE_PRINCIPAL }}
-          service_principal_password: ${{ secrets.SERVICE_PRINCIPAL_PASSWORD }}
-          tenant: ${{ secrets.TENANT }}
-          registry: ${{ secrets.REGISTRY }}
-          repository: ${{ secrets.REPOSITORY }}
-          image:  chatbot-app
-          folder: app
-          branch: main
-          tag: ${{ github.sha }}
+          path: repo
+
+      - name: Move app directory
+        run: mv repo/app . && mv repo/manifest . && rm -rf repo
+
+      - name: Set up .env
+        run: echo "${{ secrets.ENV_SECRET }}" > app/.env
 
       - name: Azure login
         id: login
         uses: azure/[email protected]
         with:
           creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+      - name: Build and push Docker image to ACR
+        run: |
+          docker build -t ${{ secrets.REGISTRY }}.azurecr.io/${{ secrets.REPOSITORY }}/chatbot-app:${{ github.sha }} app
+          docker login ${{ secrets.REGISTRY }}.azurecr.io -u ${{ secrets.SERVICE_PRINCIPAL }} -p ${{ secrets.SERVICE_PRINCIPAL_PASSWORD }}
+          docker push ${{ secrets.REGISTRY }}.azurecr.io/${{ secrets.REPOSITORY }}/chatbot-app:${{ github.sha }}
 
       - name: Set up kubelogin
         uses: azure/use-kubelogin@v1

README.md

@@ -33,11 +33,16 @@
 ### 로컬에서 앱 실행하기
 
 1. `.env` 파일 만들기
-2. `app/start-dev.sh` 실행
+2. 가상환경 `venv` 만들기
+3. `app/start-dev.sh` 실행
 
   ```bash
+  virtualenv venv # python3.10 으로!
+
   cd app
-  source start.sh
+
+  source venv/bin/activate
+  source start-dev.sh
   ```
 
 3. `http://localhost:50505` 로 접속

app/Dockerfile

@@ -1,11 +1,14 @@
-FROM --platform=linux/amd64 nikolaik/python-nodejs:python3.10-nodejs21
+FROM nikolaik/python-nodejs:python3.10-nodejs21
 
 # Set the working directory
 WORKDIR /app
 
 # Copy your application code to the container
 COPY . .
+COPY .env .
 
+RUN ls -a /app
+RUN ls -a .
 # Install bash
 RUN apt-get update && apt-get install -y bash
 
@@ -16,4 +19,4 @@ RUN cd frontend && npm install && cd ..
 RUN cd backend && python3 -m pip install -r requirements.txt && cd ..
 
 # Start your application
-CMD ["/bin/bash", "-c", "source start-dev.sh"]
+CMD ["/bin/bash", "-c", "source start-prod.sh"]

app/frontend/src/components/Example/ExampleList.tsx

@@ -3,9 +3,9 @@ import { Example } from "./Example";
 import styles from "./Example.module.css";
 
 const DEFAULT_EXAMPLES: string[] = [
-    "What is included in my Northwind Health Plus plan that is not in standard?",
-    "What happens in a performance review?",
-    "What does a Product Manager do?"
+    "NCP 크레딧은 어떻게 받나요?",
+    "클라우드 클럽에 대해 소개해줘.",
+    "수료 기준이 어떻게 되나요?"
 ];
 
 const GPT4V_EXAMPLES: string[] = [

app/frontend/src/pages/chat/Chat.tsx

@@ -280,8 +280,8 @@ const Chat = () => {
                     {!lastQuestionRef.current ? (
                         <div className={styles.chatEmptyState}>
                             <SparkleFilled fontSize={"120px"} primaryFill={"rgba(115, 118, 225, 1)"} aria-hidden="true" aria-label="Chat logo" />
-                            <h1 className={styles.chatEmptyStateTitle}>Chat with your data</h1>
-                            <h2 className={styles.chatEmptyStateSubtitle}>Ask anything or try an example</h2>
+                            <h1 className={styles.chatEmptyStateTitle}>클클 GPT를 시작해보세요</h1>
+                            <h2 className={styles.chatEmptyStateSubtitle}>클클 5기에 대해 질문해보세요</h2>
                             <ExampleList onExampleClicked={onExampleClicked} useGPT4V={useGPT4V} />
                         </div>
                     ) : (
@@ -347,7 +347,7 @@ const Chat = () => {
                     <div className={styles.chatInput}>
                         <QuestionInput
                             clearOnSend
-                            placeholder="Type a new question (e.g. does my plan cover annual eye exams?)"
+                            placeholder="클라우드 클럽 5기에 대한 질문을 입력해보세요. (예시: 클라우드 클럽 5기 NCP 크레딧 지원에 대해 알려줘.)"
                             disabled={isLoading}
                             onSend={question => makeApiRequest(question)}
                         />

app/frontend/src/pages/layout/Layout.tsx

@@ -14,7 +14,7 @@ const Layout = () => {
             <header className={styles.header} role={"banner"}>
                 <div className={styles.headerContainer}>
                     <Link to="/" className={styles.headerTitleContainer}>
-                        <h3 className={styles.headerTitle}>GPT + Enterprise data | Sample</h3>
+                        <h3 className={styles.headerTitle}>Cloud Club GPT</h3>
                     </Link>
                     <nav>
                         <ul className={styles.headerNavList}>

app/start-prod.sh

@@ -1,6 +1,5 @@
 # Set environment variables
 source .env
-
 # Activate virtual environment
 # source venv/bin/activate
 

docs/gh-action-setting.md

@@ -20,7 +20,7 @@
 > Service Principal이란? (Azure의 다양한 identity 옵션)
 
 ```bash
-az ad sp create-for-rbac --name "<본인이름>-ghActionCopilot" --scope /subscriptions/<SUBSCRIPTION_ID>/resourceGroups/<RESOURCE_GROUP> --role Contributor --json-auth
+az ad sp create-for-rbac --name "<본인이름>-ghActionSP" --scope /subscriptions/<SUBSCRIPTION_ID>/resourceGroups/<RESOURCE_GROUP> --role Contributor --json-auth
 ```
 
 ouput 값으로 이런 값들이 나옵니다.

manifest/ingress.yaml

@@ -3,8 +3,9 @@ kind: Ingress
 metadata:
   name: chatbot-app-ingress
   annotations:
-    appgw.ingress.kubernetes.io/use-private-ip: "true"
+    kubernetes.io/ingress.class: azure/application-gateway
 spec:
+  ingressClassName: azure-application-gateway
   rules:
   - http:
       paths: