[TS]React,Express 풀스택 웹 앱 배포하기(Netlify, Heroku)
서론
요즘 웹 어플리케이션의 배포는 거의 클라우드, 서버리스의 형태로 이루어지고 있습니다. 그 중에서도 기업용으로 아마존의 AWS가 가장 많이 사용되며 이 외에도 마이크로소프트의 Azure, 구글의 클라우드 플랫폼 등이 있습니다. 하지만 위 서비스들은 정말 많은 트래픽을 컨트롤 할 수 있도록 굉장히 복잡한 설정을 가지고 있습니다. 따라서 연습용으로 작게 만든 프로그램이라면 꼭 AWS와 같은 유료 서비스를 사용하지 않아도 배포를 쉽게 할 수 있습니다. 지금부터 Netlify와 Heroku라는 간단한 서비스들을 통해 직접 만든 웹 어플리케이션을 배포해보도록 하겠습니다.
준비 사항
먼저 프로젝트 폴더를 생성하고 안에 server,client라는 이름으로 각각 폴더를 만들어줍니다.
mkdir server client여기서 저희는 타입스크립트를 사용할 것이고 백엔드는 Express, 프론트엔드는 React를 사용하도록 하겠습니다.
백엔드 세팅
먼저 서버폴더에 들어가서 필요 라이브러리를 다운받습니다.
cd server
yarn add express cors
yarn add -D @types/express @types/cors ts-node typescriptts-node는 타입스크립트를 컴파일해서 실행해주는 라이브러리입니다. f
yarn init
npx tsc --init을 통해 tsconfig ,package.json 파일을 만들어주고
touch server.ts를 통해 서버 파일을 만들고 아래와 같이 작성합니다.
import express, { Request, Response } from 'express'
import cors from "cors";const PORT = process.env.PORT || 5000class App {
public application: express.Application;
constructor() {
this.application = express();
}
}const app = new App().application;app.use(cors());app.get("/", (req: Request, res: Response) => {
res.send("server testing ok");
})app.get('/data/1', (req: Request, res: Response) => {
res.json({
id: 1,
name: 'pepper',
age: 26,
job: 'developer'
})
})app.get('/data/2', (req: Request, res: Response) => {
res.json({
id: 2,
name: 'kelly',
age: 21,
job: 'student'
})
})app.listen(PORT, () => console.log("server running..."));
data 1과 2에 따라 다른 데이터를 보여주는 서버입니다.
package.json에 sciprts를 추가해줍니다.
"scripts": {
"start": "ts-node server.ts"
}이제
yarn start커맨드를 입력하면 서버가 실행됩니다.
프론트 세팅
이제 client 폴더로 이동해서 CRA를 통해 리액트 앱을 생성해줍니다.
npx create-react-app . --typescript그 후에 App.tsx에 아래와 같이 작성해줍니다.
import React, { useState } from 'react';
import './App.css';const ENDPOINT = "http://localhost:5000/data";interface dataProps {
id: number
name: string
age: number
job: string
}function App() {
const [data, setData] = useState<dataProps>({
id: 0,
name: "",
age: 0,
job: ""
});const getData = async (id: string) => {
try {
const res = await fetch(ENDPOINT + "/" + id)
const json = await res.json()
setData(json)
} catch (err) {
console.log(err)
}
}return (
<div className="App">
<ul>
<li>id : {data.id}</li>
<li>name : {data.name}</li>
<li>age : {data.age}</li>
<li>job : {data.job}</li>
</ul>
<button onClick={() => { getData("1") }}>Data 1</button>
<button onClick={() => { getData("2") }}>Data 2</button>
</div>
);
}export default App;
버튼을 클릭함에 따라 pepper와 kelly의 데이터를 각각 돌아가며 보여주도록 코드를 작성합니다.
이제 server 폴더와 client 폴더 각각에서 yarn start를 입력하여 서버를 실행시키고 버튼을 눌러 보면서 서버가 제대로 작동하는지 확인합니다.
배포 준비
각각 사이트 접속해서 가입합니다. heroku는 백엔드 서버를 배포할 곳이고 netlify는 리액트 앱을 배포할 곳입니다. 그리고 Heroku와 netlify의 CLI를 모두 다운받도록 합니다. 다운받는 도중 PATH등록에는 모두 체크를 해주셔야 합니다. 체크하시고 VSCode 또는 사용하는 터미널을 종료했다가 다시 실행하고 터미널에
heroku
netlify명령어를 각각 실행하여 설치가 잘 되었는지 확인해봅니다.
헤로쿠 배포
헤로쿠 대시보드에 들어갑니다.
우측 상단에 NEW 버튼을 누르고 Create new app을 선택합니다.
앱네임을 원하는 곳으로 선택하고 region은 US를 선택하고 Create App을 선택 합니다.
이제 위와 같은 커맨드 라인들을 볼 수 있습니다. 일단 실행하기 전에 우리의 앱을 헤로쿠에 배포 할 수 있도록 설정을 추가해주어야 합니다.
server 폴더내에 Procfile이라는 이름으로 파일을 만들고(파일 이름이 꼭 Procfile이어야 합니다.) 그 안에
web: yarn start라는 내용을 적어줍니다. 이렇게하면 Procfile을 읽은 헤로쿠가 yarn start를 실행하고 yarn start는 우리가 package.json에 적은 대로 ts-node server.ts를 실행하게 됩니다.
그리고 서버 폴더 내에 .gitignore라는 이름으로 파일을 만들고
node_modules라고 적어줍니다. 이를 통해서 깃 리포지토리에 무거운 npm 파일들이 들어가는 것을 막습니다.
그리고 server 파일 내에 포트가
const PORT = process.env.PORT || 5000이렇게 env 포트 번호를 사용하도록 되어있는지 확인합니다.
그리고 위 커맨드들을 실행해주면 됩니다. 먼저 실행중이던 서버를 멈추고(ctrl + c)
heroku login을 하면 웹 페이지에서 헤로쿠 CLI로 로그인을 합니다. 그 후
$ git init
$ heroku git:remote -a pepper-blog-post이렇게 깃 리포지토리를 생성해줍니다.
$ git add .
$ git commit -am "make it better"
$ git push heroku master헤로쿠 서버로 푸시합니다. 푸시하면 접속 가능한 url을 주는데 접속하여 서버가 잘 동작하는지 확인합니다.
Netlify 배포
먼저 client 폴더로 이동합니다.
const ENDPOINT = "<YOUR_HEROKU_URL>/data";그리고 헤로쿠를 배포한 URL로 App.tsx의 ENDPOINT를 바꿔줍니다.
yarn run build그 후 build 커맨드를 통해 리액트 앱을 빌드해줍니다. 빌드 커맨드는 CRA로 앱을 생성하면 디폴트로 설정이 되어 있습니다. 빌드 커맨드를 실행하면 build라는 디렉토리 이름으로 리액트를 빌드한 파일이 생성 됩니다.
그 후
netlify login
netlify deploynetlify에 로그인후 deploy 명령어를 통해 배포를 시작합니다.
>Create & configure a new site옵션을 선택하고 팀명과 사이트이름은 아무렇게나 정해도 상관 없습니다.
그 다음 Publish directory를 선택하라고 나오는데 여기서
./build우리가 build 커맨드를 통해 생성한 빌드 폴더를 지정해주면 됩니다.
그렇게 하면 netlify도 URL을 생성하여 줍니다. 접속하면 로컬에서 실행하던 것과 똑같이 되는것을 확인 할 수 있습니다.
전체적인 흐름 및 결론
원래 로컬에서는 3000번 포트의 리액트앱이 5000번 포트로 지정된(ENDPOINT) express 서버에서 데이터를 가져왔습니다. 하지만 여기서 우리는 먼저 express 서버를 헤로쿠에 배포하여 배포된 express 서버를 생성했습니다. 그 후 리액트에서 ENDPOINT를 5000번 포트가 아닌 배포된 헤로쿠 express 서버로 설정 후 앱을 빌드하여 netlify에 배포하여 netlify에 배포된 리액트 앱에서 헤로쿠 express 서버의 데이터를 가져와서 보여주게 한 것입니다. heroku는 간단하지만 제가 여기서 작성한 설정 외에 애드온을 통해 데이터베이스도 붙일 수 있고 git을 이용한 방법이 아닌 docker를 사용한 배포도 가능합니다. heroku와 netlify 모두 기능상으로도 나쁘지 않고 무료 플랜이 아주 적절하기 때문에 연습용 및 간단한 어플리케이션 제작용으로는 괜찮은 사용성을 가지고 있습니다.
