Strapi 설치 및 Heroku 배포
Post

Strapi 설치 및 Heroku 배포

20/05/2022
Da-Bin Jeong
4

들어가기

  • 지난 주에 CTO님께서 Strapi라는 걸로 백엔드 개발 없이 API를 사용할 수 있다고 말씀하셨다.
  • 다른 부분에 대해서 열심히 진행하다가 API를 슬슬 가져다가 붙여야 하는데 난감했다.
  • 일단 백엔드 구현되기 전까지 프론트만으로도 개발을 진행해야 되서 Strapi를 사용하기로 했다.

설치에서 실행까지

  • strapi 공식 블로그에서 설명한 방법으로 진행했기 때문에 오른쪽 링크를 참조해서 보면 따라하기 좋을 것이다. -> [링크]

  • 아니다 공식문서를 따라하는 게 더 좋을 것 같다. -> [링크]

  • 설치

    1

    $npx create-strapi-app my-project --quickstart

  • 설치가 끝나면 http://localhost:1337/admin 페이지에서 API를 세팅할 수 있다. (기본으로 User는 잡혀 있다.)

  • Setting - Roles - Public에 들어가서 필요한 API에 체크해주면 API 사용 방법이 같이 뜬다. (이 부분 블로그를 검색하는데 UI가 현재버전과 조금 달라서 조금 헤맸다.)

Heroku 배포

  • Heroku CLI을 설치하면 조금 더 가이드에 맞게 쉽게 따라할 수 있다.

  • 맥에서 설치는 아래와 같다. (brew가 깔려 있어야 한다.)

    1

    brew tap heroku/brew && brew install heroku

  • 로그인

    1

    heroku login

  • 프로젝트 폴더에서 .gitignore 파일에 아래와 같이 추가

    1

    package-lock.json

  • Git 준비하기

    1
2
3
4

    cd my-project
git init
git add .
git commit -m "Initial Commit"

  • Heroku Project 만들기

    1

    heroku create

  • Heroku Postgres addon 설치

    1

    heroku addons:create heroku-postgresql:hobby-dev

  • Retrieve database credentials

    1

    heroku config

  • Set Database variables automatically

    1

    npm install pg-connection-string --save

  • ./config/env/production/database.js 파일 만들기

    내용은 아래처럼

    const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
connection: {
    client: 'postgres',
    connection: {
    host: config.host,
    port: config.port,
    database: config.database,
    user: config.user,
    password: config.password,
    ssl: {
        rejectUnauthorized: false
    },
    },
    debug: false,
},
});

  • env 설정

    1

    heroku config:set NODE_ENV=production

  • Strapi server config for production 만들기 ./config/env/production/server.js파일 만들기 아래와 같이 따라 쓰면 됨

    module.exports = ({ env }) => ({
proxy: true,
url: env('MY_HEROKU_URL'),
app: {
  keys: env.array('APP_KEYS')
},
})

  • 콘솔 창에 아래와 같이 따라 쓰기

1
2
3
4
5

heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)
heroku config:set APP_KEYS=$(cat .env | grep APP_KEYS | cut -d= -f2-)
heroku config:set API_TOKEN_SALT=$(cat .env | grep API_TOKEN_SALT | cut -d= -f2)
heroku config:set ADMIN_JWT_SECRET=$(cat .env | grep ADMIN_JWT_SECRET | cut -d= -f2)
heroku config:set JWT_SECRET=$(cat .env | grep -w JWT_SECRET | cut -d= -f2)
  • 맥 리눅스의 경우는 아래도 따라 쓰기
1
2
3
4

heroku config:set APP_KEYS=$(openssl rand -base64 32)
heroku config:set API_TOKEN_SALT=$(openssl rand -base64 32)
heroku config:set ADMIN_JWT_SECRET=$(openssl rand -base64 32)
heroku config:set JWT_SECRET=$(openssl rand -base64 32)
  • pg노드 모듈 설치
1

npm install pg --save
  • 지금까지 상황 Git 커밋
1
2

git add .
git commit -m "Update database config"
  • yarn.lock 파일 업데이트
1

yarn install
  • yarn.lock 파일 git commit
1
2

git add yarn.lock
git commit -m "Updated Yarn lockfile"
  • 배포
1

git push heroku HEAD:main
  • 배포 페이지 열고 싶으면
1

heroku open

마치며

  • 참고로 배포 이후에는 로그인해서 직접 데이터 추가하는 것이 불가능하다.
  • 기본 데이터 설계한 거는 로컬에서 끝내놓은 다음에 배포하면 될 것.

Reference

TIL, Library, JavaScript