이번에는 express로 구축한 서버를 로컬에서 실행하는 것 대신 실제로 Heroku에 배포해보는 연습을 먼저 해보았습니다.
Heroku에서는 무료로 db를 연동하여 사용할 수 있게끔 해주기 때문에, 저와 같이 간단한 프로젝트를 배포해보시려는 분들에게는 좋은 서비스라고 생각됩니다.
그런데 로컬 서버에서 db를 연결하는 것은 여러번 해봐서 어렵지 않았는데, 실 서버에 db를 연결하는 것은 처음이기에 그 과정을 적어보려고 합니다.
Heroku Add-ons
무료로 db를 연동하려면 Heroku에서 제공하는 Add-ons 를 이용해야 합니다.
저는 MYSQL를 쉽게 다룰 수 있도록 해주는 sequelize 라이브러리를 사용했기 때문에, 많은 Add-ons 중에서 무료 서비스를 제공하는 JawsDB MySQL를 사용했습니다.
1. My App - Resources - JawsDB MYSQL 검색
Heroku에서 새로운 앱을 하나 생성했다면, 그 앱을 클릭하셔서 Resources 탭에 들어가셔서, Add-ons 검색창에 jawsDB MYSQL 을 입력하시고 나오는 것을 마우스로 클릭하시면 됩니다.
2. Free Plan 선택
클릭하면 위와 같이 팝업창이 뜨는데, 초록색으로 표시한 부분은 db 용량에 따라 가격이 표시되어 있습니다. 저희는 무료로 사용할 것이니깐, Free 로 표시되어 있는 것을 기본값을 그대로 이용하면 됩니다.
여기서 Submit 버튼을 누르면 에러가 또 한번 발생합니다. 카드 결제 정보가 입력이 되어있지 않기 때문인데요. db를 이용하려면 카드 등록은 필수이니, 등록 후 버튼을 다시 눌러주시면 됩니다.
(카드 정보 확인 차원에서 1달러 정도 과금 후, 바로 다시 환불됩니다.)
처리가 완료되면, JawsDB MYSQL add-on이 설치됐다는 메세지와 함께 Add-ons 리스트에 추가됩니다.
3. db 정보 확인하기
Add-ons 리스트에서 이를 클릭하시면 Heroku 앱에서 이용할 db에 관한 정보를 확인할 수 있습니다. 임시로 만들었지만, 중요하다는 표시로 가려놨습니다.
이제 이 db 모델을 제 컴퓨터에서 관리하고 확인할 수 있도록 해야 하는데요.
저는 MYSQL 사용이 익숙하지 않아, MYSQL Workbench를 사용했습니다.
위에서 봤던 Host, Username, Password, Port 정보를 각 칸에 맞춰 입력하시면 됩니다.
Connection Name 은 자유롭게 작성하시면 됩니다.
이전과 달리, 새로운 커넥션이 하나 더 생성된 것을 확인할 수 있습니다. 아직은 어떤 것도 입력하지 않았기 때문에 아무 정보도 들어있지 않습니다.
sequelize와 db 연결하기
sequelize를 사용하면, 이 db 정보에 접근할 수 있도록 코드를 추가해줘야 합니다.
저는 sequelize 관련 코드를 작성할 때, sequelize-cli 를 함께 사용합니다.
npx sequelize init 을 터미널에서 실행하면, sequelize를 실행하는데 기본적으로 필요한 파일이 생성됩니다.
config
└──config.json
models
└──index.js
migrations
seeders-
config.json: db를 구성하는데 필요한 정보를 설정합니다.
username, password, database, host, dialect 등... -
models\index.js: 하나의db객체를 만듭니다. 이 db 객체에는 다음과 같은 것들이 포함됩니다.
- models 폴더에 들어있는 각각의 model
- config 에서 가져온 정보를 토대로 생성한 sequelize 인스턴스
- sequelize 모듈에서 가져온 Sequelize
config 설정
보통 config 옵션에 username, password, database, host 등을 별도로 지정해주는데요.
const dotenv = require('dotenv');
dotenv.config();
module.exports = {
development: {
username: process.env.DB_USERNAME,
password: process.env.DB_PASSWORD,
database: process.env.DB_DATABASE,
host: process.env.DB_HOST,
dialect: 'mysql',
},
};
위의 이미지에서 초록색으로 표시한 부분 보이시나요?
dialect://Username:Password@Host:Port/Database
db 정보를 하나로 묶어 url로 표현된 것인데요. 이 정보가 Heroku 앱의 환경변수에 등록되어 있습니다.
따라서, 별도로 config 파일에 이를 전달할 필요없이 sequelize 인스턴스를 만들 때 이 환경변수만 잘 전달하면 됩니다.
sequelize 인스턴스는 models\index.js 에서 생성합니다. 보통 기본으로 만들어지는 파일에서는 이렇게 작성되어 있어서, config 파일에 production 코드를 다음과 같이 작성해야 합니다.
- models/index.js
const Sequelize = require('sequelize');
let sequelize;
if (config.use_env_variable) {
sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
sequelize = new Sequelize(config.database, config.username, config.password, config);
}- config/config.js
module.exports = {
production: {
use_env_variable: 'JAWSDB_URL',
},
};이미 Heroku 앱에 해당 변수가 등록되어 있기 때문에, 굳이 변수를 하드코딩할 필요가 없습니다. 저는 이 방법보다는 .env 값을 그대로 가져와 사용했습니다.
- models/index.js
const Sequelize = require('sequelize');
let sequelize;
if (process.env.JAWSDB_URL) {
sequelize = new Sequelize(process.env.JAWSDB_URL, config);
} else {
sequelize = new Sequelize(config.database, config.username, config.password, config);
}- config/config.js
module.exports = {
production: {},
};이렇게 작성하면, 굳이 config 파일에 db 정보에 관한 별도의 값을 전달하지 않아도 되고, 타입스크립트 코드로 작성하려고 할 때도 더 편리합니다.
그 외 config 옵션은 필요에 따라 추가하시면 됩니다.
여기까지 하시면, db 연동은 모두 끝입니다.
마치며
처음에는 배포라는 것의 의미를 조금 어렵게 생각하여, db를 실서버와 어떻게 연동해야 하는지도 지레 겁을 먹고 시작했습니다. 공식문서도 참고해보고, 구글링을 해가며 시행착오를 거친 끝에야 겨우 성공했는데, 그 과정을 포스팅하기에는 너무 지저분하고 별 도움이 되지 않는 내용이어서 연동하는 방법에 대해서만 정리를 하게 됐습니다.
내용은 생략했지만, github action을 연동하여 배포를 자동화하는 과정도 있었는데요.
heroku에서 제공하는 자동 배포 서비스가 있었지만, 이전에 vercel에서 자동 배포를 해주는 것을 경험해보고 같은 작업을 해보고 싶어서 도전해봤습니다.
그 과정에서 몇가지 문제도 있었지만, 그 문제를 해결하는 과정에서 얻게 되는 개념에 대해 정확히 이해하지 못했다고 느껴서 설명을 생략했습니다.
제 스스로 정리가 되어 설명할 수 있을 정도가 되면, 다시 포스팅하도록 하겠습니다.
