Nuxt.js로 openai api 연동하여 slack GPT채팅 만들기(1) - nuxt 서버설정

Nuxt.js로 서버를 구성하고 openai api를 연동하여 브라우저에서 GPT와 채팅을 하는 기능을 만들어보자

추가적으로 slack과 연동하여 슬랙 내부에서도 채팅을 가능하도록 만들어보자

이번 포스팅에서는 기본적인 환경구성을 하도록한다

 

 

 

KEY

api를 호출하려면 apiKey 가 필요한데

 

secret key를 이곳에서 발급받을 수 있다

chat으로만 구현할 것이기 때문에 organization은 필요없다

OPENAI_SECRET_KEY=sk-...

.env에 위와같이 저장해둔다

---

 

 

Nuxt💡

 

이후 Nuxt 환경을 구성하자 프로젝트명은 nuxt-gpt로 만든다

이 포스팅에서는 Nuxt3를 사용한다

🤔npm 까지는 설명하지 않겠습니다...

npx nuxi@latest init nuxt-gpt
cd nuxt-gpt
yarn install
yarn dev

그러면 서버가 구동되고 다음과같은 화면이 뜬다

 

 

 

Nuxt3는 Minimal Starter이기 때문에 초기에 정말 아무것도 없다

 

 

필요한 모듈들을 설치해야하는데 Nuxt 홈페이지에 Modules에서 다양한 모듈을 확인할 수 있다

https://nuxt.com/modules

Modules · Nuxt

 

 

본인이 필요하다 생각하는 모듈을 추가적으로 설치하면 된다

이 포스팅에서는 다음과 같은 패키지와 모듈을 설치해서 사용하도록 한다

• eslint
• tailwindcss

각각 모듈페이지의 가이드대로 설치해준다

 

 

eslint👓

https://nuxt.com/modules/eslint

yarn add -D eslint @nuxtjs/eslint-module

eslint를 nuxt용 eslint-module을 설치해주고

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/eslint-module'
  ]
})

nuxt.config.ts에 모듈을 입력해준다

 

 

---

 

yarn add -D eslint-plugin-nuxt eslint-plugin-vue

 

그리고 Nuxt와 vue에도 lint를 적용하기 위해 플러그인을 설치한다

그리고 .eslintrc.js 파일을 생성하여 다음과같이 입력해준다

// .eslintrc.js
module.exports = {
  extends: [
    "plugin:nuxt/recommended",
    "plugin:vue/vue3-recommended",
  ],
}

 

---

 

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript

또한 타입스크립트에도 적용하기위해 플러그인을 설치해준다

.eslintrc.js 파일에 env와 parserOptions도 같이 설정해준다
https://eslint.org/docs/latest/use/configure/language-options#specifying-environments

https://eslint.org/docs/latest/use/configure/parser

 

그리고 eslint를 사용하면 pages에 파일 생성시 multi-word 에러가 뜰 수 있다

rules를 추가하여 삭제해주자

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:nuxt/recommended",
    "plugin:vue/vue3-recommended",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  rules: {
    'vue/multi-word-component-names': 0,
  },
}

 

 

---

tailwindcss🌀

https://nuxt.com/modules/tailwindcss

yarn add --dev @nuxtjs/tailwindcss

nuxt용 tailwindcss 모듈을 설치해준다

 

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/tailwindcss', // 추가해준다
  ],
  css: [ // 추가해준다
    '@/assets/css/app.css',
  ],
})

 nuxt.config.ts에 모듈을 입력해준뒤 css경로를 추가해준다

 

그리고 tailwind.config.ts 파일을 생성해준다

// tailwind.config.ts
import { Config } from 'tailwindcss'

export default <Config> {
  content: [
    'app.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

그리고 assets/css/app.css, assets/css/custom.css, assets/css/perflight.css 파일을 생성해준다

tailwind를 사용하면서 @tailwind 구문을 사용하는데 이는 import문 이전에 선언될 수 없다

추후에 커스텀을 추가하였을때 구성을 변경해야 하므로 미리 아래와같이 구성을 해준다

/* assets\css\app.css */
@import './preflight.css';
@import './custom.css';

/* assets\css\preflight.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* assets\css\custom.css */
@layer components {
}

tailwind를 사용할 수 있게 위와같이 입력해준다

 

---

 

 

Directory📂

nuxt3에서는 기본으로 구성된게 거의 없기 때문에 프론트를 구현할 pages와 서버를 구현할 server 디렉토리를 만들어준다

 

 

 

Pages📃

https://nuxt.com/docs/examples/routing/pages#pages

우선 app.vue파일의 NuxtWelcom 컴포넌트를 삭제하고 다음과같이 바꾼다

<!-- app.vue -->
<template>
  <div class="mx-auto">
    <NuxtPage />
  </div>
</template>

 

그리고 pages 디렉토리를 생성하고 index.vue파일을 생성한다

이후 테스트용 코드를 삽입하여 라우트가 동작하고 페이지가 활성화되는지 확인한다

// pages/index.vue
<script setup lang="ts">
const count = ref(0)

function countUp () {
  count.value++
}
</script>

<template>
  <div class="mt-20 text-center">
    <p>{{ count }}</p>
    <button
      type="button"
      @click="countUp()"
    >
      UP!
    </button>
  </div>
</template>

 

pages/index.vue

---

server💻

https://nuxt.com/docs/migration/server#server

 

server디렉토리를 생성하고 그 안에 api디렉토리도 생성한 후 test.ts파일을 생성해준다

// server/api/test.ts
export default defineEventHandler(() => {
  console.log('hi?')
  return {
    data: 'hi!'
  }
})

그리고 위의 코드를 입력해준다

 

Http 클라이언트는 Nuxt에 내장되어있는 $fecth를 사용할건데 useFetch, axios등 다른것을 사용해도 무방하다

pages/index.vue 파일을 수정해준다

// pages/index.vue
<script setup lang="ts">
const count = ref(0)

async function countUp () {
  count.value++
  // 이부분을 추가한다
  const result = await $fetch('/api/test')
  console.log(result)
}
</script>

<template>
  <div class="mt-20 text-center">
    <p>{{ count }}</p>
    <button
      type="button"
      @click="countUp()"
    >
      UP!
    </button>
  </div>
</template>

그리고 서버를 재시작하면

터미널과 크롬 개발툴에 올바르게 출력되는걸 확인할 수 있다

 

 

이제 기본적인 환경구성은 끝났다!🎉