[TIL] 서버리스함수 & 환경변수 설정

1. 서버리스함수와 환경변수를 통해서 api key 감추기!!

 

netlify/functions/workspace.ts

넷리파이 서버리스 함수에서 돌리는 코드!! 

import { Handler } from '@netlify/functions'
import axios from 'axios'

// process.env.APIKEY
// process.env.USERNAME
const {APIKEY, USERNAME} = process.env

const handler: Handler = async event => { //handler는 넷리파이에서 요구하는 이름임!
  const {id, method, data} = JSON.parse(event.body as string)
  const { data: returnValue } = await axios({
    url: `https://asia-northeast3-heropy-api.cloudfunctions.net/api/notion/workspaces/${id}`,
    method,
    headers: {
      'content-type': 'application/json',
      'apikey': APIKEY as string,
      'username': USERNAME as string
    },
    data
  })
  return {
    statusCode: 200,
    body: JSON.stringify(returnValue)
  }
}
export { handler }

 

src/store/workspace.ts

async function request(options: RequestOptions) {
  const { id = '', method, body } = options
  const res = await fetch('/.netlify/functions/workspace', {
    method: 'POST', // 서버로 날릴때는 post로 날려야함!!!
    body: JSON.stringify({
      id,
      method,
      data: body
    })
  })
  return res.json()
}

원래의 파일에서 이렇게 변경해 주었다!! 

`npm i dotenv`를 설치하고 .env 파일을 만들고 난 다음에 .gitignore 추가해준다!!

APIKEY=키를넣어준다
USERNAME=이름을넣어준다

 

 

2. 밑에서부터는 그냥 수업시간에 한 내용.. 끄적끄적..

 SEO, Heroku

SEO: 검색엔진최적화!!! 

 

SPA에서 진입점은 루트경로여야함!!! 자식페이지로 들어가면 낫파운드 뜸!! 

서버에서 찾는 라우터 주소... 

 

serverless Function (서버리스 함수)

server Function (서버함수 )

결국은 실제 웹서버에서 동작하는 코드랑 똑같은 것이다!! 

 

서버측에서 api를 만드는 코드 말고 일단 페이지를 만드는? 코드를 만들 예정임.?!! 

특정 하위 주소를 처리하려면 서버측 코드에서 처리해 줘야함!! 

 

seo: 검색엔진에 메타데이터를 제공할 수 있고, open graph 가 표준은 아니지만 표준처럼 쓰임!! 

 

해쉬모드에서는 필요 없는데, 히스토리 모드에서는 필요하다!! 

 

.env 

 

 

CSR  vs SSR

CSR: 브라우저 대표 spa 

SSR: Server side rendering                    

 

봇인지 사용자인지 체크하는 패키지 : isbot