PaaS(Platform-as-a-service) 클라우드 서비스
무료로 호스팅 할 수 있도록 해주는 서비스
- 기본적인 가입 (이메일 인증 등)
- Create new App 클릭
- 원하는 App name을 적고 진행
- 해당 App에 들어가서
Heroku CLI
설치- Heroku 저장소 만들기
heroku login
명령어를 이용하여 로그인을 진행한다.
mkdir 폴더이름
+ cd 폴더이름
git init
명령어 실행
heroku git:remote -a App이름
(현재의 경우 heroku git:remote -a coronaproject
)
npm init
명령어 실행 및 Enter 진행
npm install express
명령어 실행
코드의 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"
}
}
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}!`))
git add .
=> git commit -m "message내용"
=> git push heroku master
아래에서 4번째줄에 해당 https로 결과가 간 것을 알 수 있다.
해당 같은 url에서 fetch 서버 요청하기
정상적으로 동작하는 것을 확인 할 수 있다.
이와같이 에러가 나타난다.
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이름
)등이 있다.