[Web] 배포 - #2. PaaS 사용법(Netlify, Heroku)

바로 드루가보도록 하겠다!

이번 포스팅에선, 2차 프로젝트와 포트폴리오 배포에 사용한 Netlify(클라이언트) 와 Heroku(서버) 사용법을 간단히 설명하려고 한다.

---

💻 Netlify : www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time

정적 웹사이트(HTML, CSS, JS)로 서비스 제공이 필요할 때, 가장 편하게 구축하는 방법으로 Netlify를 추천한다.

빌드, 배포, 호스팅까지 프론트앤드로만 이루어진 Web 어플리케이션 관련 서비스들을 쉽고 편하게 제공한다.

특히, Github Repository 와 연동이 되고, https를 기본적으로 지원한다는 강력한 장점이 있다. 

 

1. 가입하기

Netlify 공식 사이트에 접속하면, 우측 상단에 Sign up 버튼을 통해 회원가입을 할 수 있다. 나는 가입방식을 GitHub으로 했다.

 

2. 배포하기

가입 후 로그인된 상태에서 아래와 같이 작업소에 위치해있다. New Site from Git 버튼을 클릭한다.

 

1) Connect to Git provider

Git 리소스를 선택한다. 나는 GitHub Repository를 사용하기 위해 GitHub를 선택했다.

 

2) Pick a repository

Repository를 선택한다. 내 경우엔 기존에 불러온 Repository 목록이 존재한다.

새로 추가하고자 한다면, 맨 하단의 Configure the Netlify app on GitHub로 들어간다.

 

하단으로 내려가면 이처럼 Repository 전체를 선택하거나 고를 수 있는 메뉴가 있다.

 

3) Site settings, and deploy!

Repository를 선택하면, 마지막으로 branch 선택과 build 과정이 남아있다.

배포할 branch를 선택하고, build 커맨드(npm or yarn)와 빌드된 파일을 저장할 디렉토리를 설정한다.

* build(빌드) : 소스압축 및 React 소스 -> JS 소스로 변환과정. Node.js / React.js 이외 환경에서도 웹사이트가 작동하게끔 해준다.

 

 

build가 완료되면, 위처럼 build 폴더 안에 새로운 index.html 및 파일들이 생성된다. (실제로 구동될 SPA HTML 파일)

 

이처럼, 현재 사이트가 배포되고 있음을 알 수 있으며, Github Repository에 코드를 push하면 자동적으로 재검사 및 배포를 진행한다.

제일 상단의 사이트 그림과 함께, 제목(도메인명)과 URL 링크를 확인할 수 있다. 이는, Site settings 로 가서 변경할 수 있다.

 

 

3. 이슈 : CORS 이슈

마찬가지로, 배포한 클라이언트의 URL과 서버 URL 간의 CORS(교차 출처 리소스 공유) 이슈가 발생했다.

이를 해결하기 위해 본래는 서버에서 cors 미들웨어를 적용하면 되었으나, 배포 과정에서는 여전히 해결되지 않았다.

그렇기 떄문에 이를 클라이언트 사이드에서 해결할 수 있는 방법을 적용했다.

 

* 해결방법 : package.json 에 proxy 항목 추가

이처럼, package.json에 proxy 필드를 추가해주면 된다. 할당값은 우리가 활용할 서버 URL을 넣어주면 CORS 이슈에 걸리지 않는다!

---

💻 Heroku : https://www.heroku.com/ 

Cloud Application Platform | Heroku

우선, Github Pages, Netlify 에서 제공하지 않는 Node.js 배포를 지원한다는 점에서 서버 배포는 Heroku로 진행을 하였다.

Heroku는 프론트앤드에 집중되었던 Netlify에 비해 좀 더 다양한 개발 플랫폼을 제공한다.

특히, 다양한 언어(Java, Node,js, Scala, Clojure, Python, PHP, Go)를 지원하기 때문에 특히 백엔드 배포에서 애용되는 플랫폼이다.

 

1. 가입하기

마찬가지로 Sign up 버튼을 누르면, 하단의 Form 양식에 맞춰 가입을 진행하면 된다.

 

2. Heroku CLI 설치

CLI(Command Line Interface)를 설치해줘야 한다. 후에, 개인 터미널에서 작업할 때 용이하다.

* 설치 링크 : devcenter.heroku.com/articles/heroku-cli

The Heroku CLI | Heroku Dev Center

 

설치가 완료되면 이처럼 heroku 명령어를 사용할 수 있게 된다. 

 

3. Heroku App 생성하기

나의 경우엔 이전에 만든 App이 존재한다. Create New App 목록을 눌러 새 App을 생성한다.

App을 클릭하면, 안에 많은 정보의 메뉴들이 존재한다. 특히, Deploy 메뉴의 CLI 순서만 준수하면 손쉽게 배포가 가능하다!

4. 파일세팅

1) 먼저, Server 디렉토리 내에 Procfile 파일을 생성한다. 안에는, web:npm start 를 작성한다. 

Heroku가 Procfile을 읽고 npm start 커맨드를 실행하게 되며, 이는 package.json을 참고할 수 있게 된다. (nodemon은 빌드 시 오류)

 

2) 파일 포트는 const PORT = process.env.PORT (|| 5000) 로 설정한다.

나는 Express-generator를 활용했으므로, bin의 www를 확인했다.

 

 

5. Heroku CLI 접속 및 push

1) Heroku 로그인

 

터미널에 heroku login 커맨드를 입력한다. 아래와 같은 경과와 Heroku 로그인 페이지가 열린다.

페이지에서 Log In 버튼을 클릭하면 접속이 완료된다.

 

2) Create a new Git repository

cd my-project/
git init
heroku git:remote -a heroku-app-name

먼저, 프로젝트 디렉토리로 이동한다. 우리가 제작한 프로젝트가 될 수도 있고, 해당 디렉토리에 Github Repository를 클론해도 된다.

git init 초기화, 그리고 heroku git:remote -a 커맨드를 통해 heroku app 과 연결해준다.

 

3) heroku 서버 push

git add .
git commit -m "message"
git push heroku master

git과 마찬가지로 add, commit 을 각각 진행한다. 마지막으로, git push heroku master 커맨드를 통해 서버에 push 할 수 있다.

 

4) 완료 및 도메인 확인

정상적으로 push 됬다면, 최초에 만든 Create New App 에 변화가 있으리라.

다시 들어가서, Setting 메뉴로 이동하면 위와 같은 Domain 카테고리의 URL이 우리가 사용할 서버 API 주소가 되는 것이다!

 

6. 이슈 : Procfile 파일 커맨드 입력주의

이처럼, 우리가 코드를 Heroku에 push하면, 자동으로 빌드까지 해주는 것을 확인할 수 있다.

나는 빌드 오류가 수차례 발생했는데, Procfile 파일에서 web:(v)npm start 저 (v) 부분에 띄어쓰기를 하면 오류가 발생한다! 주의!!

---

막상 사이트를 배포할 땐 정신이 없었지만, 지금 생각하면 그 때 실시간으로 기록을 남겼으면 좋았을걸 하는 아쉬움도 있다.

하지만, 다시금 다른 블로그를 참고하면서 배포과정을 곱씹어보는 기회이자, 당시 있었던 이슈를 리마인드해서 공유하는 취지를 달성했다.

 

다음에는, 대망의 인프라! 바로 AWS EC2에 대해 얘기해보겠다. (정말 긴 여정이 될듯..)

 

 

[출처]

- 공통 : velog.io/@ksh4820/react-express-%EB%B0%B0%ED%8F%ACNetlify-heroku

- Netlify : yoonbumtae.com/?p=3519  

- Heroku : velog.io/@ksh4820/react-express-%EB%B0%B0%ED%8F%ACNetlify-herokuhyodol-development-note.tistory.com/8

 

[배포(클라우드 컴퓨팅) 시리즈]

- #1. Cloud Service : abangpa1ace.tistory.com/136

[Web] 배포 - #1. Cloud Service

- #3. IaaS 사용법(AWS EC2) : abangpa1ace.tistory.com/141

[Web] 배포 - #3. IaaS 사용법(AWS EC2)