본문 바로가기
ETC

무료 백엔드 서버 Qoddi 시작하기 - Node(Express)서버 올리기

by Wilkyway 2023. 5. 17.
반응형

무료로 구동할 수 있는 백엔드용 서버 서비스를 찾아 찾고 찾았는데, 저도 마찬가지로 Heroku를 사용하고 있었죠. 이젠 그게 유료화되면서 어쩔수 없이 유료로 가야하나 고민하고 있던 차에 Qoddi라는 서비스를 알게되었습니다.

 

https://app.qoddi.com

 

Login to Qoddi - PaaS Premium cloud hosting solution

Login to Qoddi and start building! From code to live in 30 seconds

app.qoddi.com

 

이번엔 Qoddi 서비스를 이용하여 Node서버를 구동하기까지 진행해보려고 합니다.

 

1. Node(Express) 서버 구축

간단하게 Express를 설치하고 구동하는 앱을 만들어줍니다. 

import express from 'express';
import dotenv from 'dotenv';
import path from 'path';

dotenv.config();

const __dirname = path.resolve();
const app = express();

const { PORT, MONGO_URI, SECRET } = process.env;
app.set('port', PORT || 3000);

app.get('/', (req, res) => {
  res.send('hello world');
})
app.listen(app.get('port'), ()=> {
  console.log(`http://localhost:${app.get('port')} 번 포트에서 서버 실행 중..`);
});

 

2. package.json파일 수정

  "scripts": {
    "start":"node ./src/index.js",  // 이부분 추가
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon ./src ./src/index.js"
  },

 

3. Procfile 생성

자동 배포 및 실행을 위해서는 Procfile 이라는 확장자없는 파일을 만들어야 합니다. (Qoddi사이트에서 필요함)

web: npm start

 

4. github (or gitlab)에 push

깃헙 저장소로 올려줍니다.

 

5. 가입

qoddi 사이트에서 가입을 진행해줍니다.

 

6. 앱 만들기 (신용카드 정보 입력)

로그인하면 아래와 같은 화면이 나오는데, 우측의 빨간색 New 버튼을 클릭하여 새 앱 만들기를 시작합니다.

 

그러면 최초 앱 생성 전 신용카드 등록이 필요하다고 아래와 같이 나옵니다. 등록을 진행해줍니다. 단, 등록하면서 확인한답시고 1$가 결재됩니다. ㅠㅠ

그러면 아까의 빨간색 New버튼을 다시 클릭하여 앱 생성화면으로 이동 가능합니다.

 

7. 앱 설정 1단계

앱 네임과 프로젝트네임, 데이터스토어(없으면 No Datastore)를 선택해줍니다. App Type은 웹서버를 만들 예정이므로 Web Server를 선택해주고, App Location은 어차피 아시아나 서울이 없으므로 적당히 아무거나 선택해줍니다. 앱 사이즈는 Dev로 선택합니다. 

8. 앱 설정 2단계

Github이나 다른 Repository를 선택합니다. 

본인의 브랜치가 main인지 master인지 확인해서 잘 넣어줍니다.

 

9. 설정 3단계

확인해주고 Launch My App 을 클릭해줍니다.

 

10. SSH 설정

github과 연동을 위해 ssh-rsa 인증키가 발급됩니다. 해당 키를 만들어서 github에 붙여줍니다.

 

11. github SSH Key 입력(Gitlap으로 진행)

저는 주로 gitlap을 써서 여기서 인증키를 입력하겠습니다. 사용자 정보 > Edit profile로 접근하여

 

SSH Keys 메뉴로 들어가서 Key를 입력하고, Add key 버튼을 눌러주면 키 입력이 완성됩니다.

 

12. 완료

자동 생성된 링크와 함께 Running이라고 보입니다. 이제 github에 update를 푸쉬할 때마다 자동으로 반영이 됩니다.

잘 안될때도 있다고 하는데, 가끔 Reload Data(우측 상단) 버튼으로 진행해주시면 됩니다.

 

링크를 클릭하면...

 

잘 나오네요~~

 

끝~~

 

헉.....근데 이건 뭐지? 무료라매...

반응형

댓글