[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(2) 준비물: authorization을 담당할 서버

2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(1) 준비물:spotify dev 계정, application 에 이어서..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(1) 준비물:spotify dev 계정, application

 

이번에는 authorization을 담당할 코드를 살펴보고, vercel에 간단하게 배포해 보자

 

일단 vercel에서 express 코드를 배포하려면 에제 코드에서 살짝 변형을 해야 한다.

 

먼저 vercel에 express를 배포하기 위해서

 

1. 새로운 프로젝트 생성  

mkdir ${내 프로젝트 이름}
cd ${내 프로젝트 이름}
npm init -y

 

2. Express.js 설치 

npm install express

 

3. Express.js app 설정

•  {내 프로젝트 이름}에 api 폴더를 생성
•  {내 프로젝트 이름}/api 에 index.ts 파일 생성. 이 파일이 메인 서버 파일이다.

4. Express.js sever 초기화하기

const express = require("express");
const app = express();

app.get("/", (req, res) => res.send("Express on Vercel"));

app.listen(3000, () => console.log("Server ready on port 3000."));

module.exports = app;

• 기본 경로를 / 로 설정하고, 호출되면 vercel에 Express를 리턴한다.
• 시작하면 port3000에서 서버가 돌아간다.

5. Vercel config 해주기

{ "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }] }

 

최상단에 vercel.json 파일을 생성하고 위의 내용을 추가해 주자.

vercel한테 애플리케이션에 요청이 들어오면 /api 경로로 보내라고 설정한 것이다.

 

6. 로컬에서 애플리케이션 돌리기

npm i -g vercel

 

vercel CLI를 설치하면 편리하게 로컬 환경 변수를 복사해서 쓸 수 있다.

위와 같이 터미널에서 설치를 해주고, 

vercel login

 

위의 코멘드로 로그인해 주자. 로그인 후 아래의 코멘드로 로컬로 돌아가는 서버를 http://localhost:3000에서

확인할 수 있다. 

vercel dev

 

7. 배포는 아래의 코멘드로 가능하다.

vercel --prod

📝 References

https://vercel.com/guides/using-express-with-vercel

https://github.com/spotify/web-api-examples