URL 단축기 만들기 - 10. 프론트엔드 세팅하기

URL 단축기 2022년 12월 17일

이번에는 프론트엔드 세팅을 해볼거에요! 그럼 바로 시작해볼게요..?

create-vite로 프로젝트 생성하기

이제 packages 폴더에서 명령어를 실행해 줄거에요.

yarn create vite frontend
# Select a framework -> React
# Select a variant -> TypeScript + SWC

Scaffolding project in (...)/url-shortener/packages/frontend...

Done. Now run:

  cd frontend
  yarn
  yarn dev

위 설명대로 frontend 폴더에서 yarn dev 를 실행해 볼게요.

콘솔에 나온 링크로 들어갔을 때 이렇게 뜨면 정상이에요!

프록시 설정하기

저는 이 프론트엔드를 백엔드와 같은 도메인에서 사용할 거에요. 그걸 위해서 프론트엔드 개발 서버에서 백엔드에 접근할 수 있도록 만들어 줄게요.

vite.config.ts 를 수정해 주세요.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api/': 'http://localhost:3000',
    },
  },
})

이렇게 한 후 /api/urls 에 들어가면 404가 뜰거에요. POST 요청만 받기때문에 정상이에요!

백엔드 주소로 프론트엔드 사용하기

위의 경우는 개발중일 때 사용하는 방법이고요, 이제는 빌드 후 백엔드 주소에서 프론트엔드 사용이 가능하게 만들어 볼게요. 먼저 프론트엔드를 빌드해 주세요.

paringparing :: url-shortener/packages/frontend ‹master*› » yarn build
vite v4.0.1 building for production...
✓ 33 modules transformed.
dist/index.html                   0.46 kB
dist/assets/react-35ef61ed.svg    4.13 kB
dist/assets/index-3fce1f81.css    1.41 kB │ gzip:  0.73 kB
dist/assets/index-53dc0bef.js   142.62 kB │ gzip: 45.95 kB

이제 백엔드에서 이걸 보내주기만 하면 되네요. nestjs에 serve static이라는게 있더라고요. 이걸 사용해 볼게요.

yarn add @nestjs/serve-static @fastify/static

확인해보니 / 라우트가 이미 존재해서 적용이 제대로 안되더라고요. app controller을 제거해주세요. 그 다음 app.module.ts 에서 imports 부분에 ServeStaticModule 을 추가해 줄게요.

import { Module } from '@nestjs/common'
import { AppService } from './app.service'
import { UsersModule } from './users/users.module'
import { DatabaseModule } from './database/database.module'
import { UrlsModule } from './urls/urls.module'
import { ApiModule } from './api/api.module'
import { ServeStaticModule } from '@nestjs/serve-static'
import * as path from 'path'

@Module({
  imports: [
    UsersModule,
    DatabaseModule,
    UrlsModule,
    ApiModule,
    ServeStaticModule.forRoot({
      rootPath: path.join(__dirname, '..', '..', 'frontend', 'dist'),
    }),
  ],
  providers: [AppService],
})
export class AppModule {}

이렇게 되면 끝이네요!

그럼 이번 글은 여기까지인걸로...