Heroku 사용법 및 Node.js 설치 및 Express와 CORS 대처하기

출처

Heroku

PaaS(Platform-as-a-service) 클라우드 서비스
무료로 호스팅 할 수 있도록 해주는 서비스

---

Heroku 사용법

1. 기본적인 가입 (이메일 인증 등)
2. Create new App 클릭
3. 원하는 App name을 적고 진행
4. 해당 App에 들어가서 Heroku CLI 설치
5. Heroku 저장소 만들기

---

Heroku 저장소 만들기

1) Heroku 로그인하기

heroku login 명령어를 이용하여 로그인을 진행한다.

---

2) 진행할 폴더 생성 및 진행

mkdir 폴더이름 + cd 폴더이름

---

3) 전송이 가능하게 .git 파일 생성하기

git init 명령어 실행

---

4) 기존에 생성한 App과 연결하기

heroku git:remote -a App이름 (현재의 경우 heroku git:remote -a coronaproject)

---

5) package.json()파일 설치

npm init 명령어 실행 및 Enter 진행

---

6) 웹 프레임워크 express 설치

npm install express 명령어 실행

---

7) package.json 코드 수정

코드의 scripts 부분을 수정하는데 "start" : "node app.js"를 추가한다.

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1"
  }
}

---

8) app.js 코드작성

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.get('/', (req,res)=>res.send({'Hello' :'World'}));

app.listen(port,()=>console.log(`Example app listeneing on port ${port}!`))

---

9) git 관련 명령어 실행

git add . => git commit -m "message내용" => git push heroku master

• 실행 결과
  

아래에서 4번째줄에 해당 https로 결과가 간 것을 알 수 있다.

• 원하던 내용을 확인 할 수 있다.

---

fetch 사용하기

해당 같은 url에서 fetch 서버 요청하기

정상적으로 동작하는 것을 확인 할 수 있다.

---

다른 url에서 fetch 서버 요청하기

이와같이 에러가 나타난다.

---

문제 해결하기 => CORS

npm install cors 명령어 진행 후 app.js 코드를 수정한다.

const express = require('express');
const app = express();
const cors = require('cors');
const port = process.env.PORT || 3000;

app.use(cors());
app.get('/', (req,res)=>res.send({'Hello' :'World'}));

app.listen(port,()=>console.log(`Example app listeneing on port ${port}!`))

기존과 다르게 cors가 추가된 것을 알 수 있다. 해당 코드를 추가하여 cors와 관련된 서버 문제를 해결한다.

---

다시 실행해보기

이와같이 다른 url에서도 fetch를 통해 결과를 받아올 수 있게 되었다.

---

정리

• heroku를 이용해 서버를 처리할 수 있고 이때 주의 할 점들은
  cors 문제 , package.json부분의 scripts의 코드 수정, heroku에서 만든 app과 사용할 폴더와의 연결 (heroku git:remote -a App이름)등이 있다.