1 DAY DEPLOY 😂

build - deploy 의 과정을 거쳐서 배포를 한다.

• build는 컴파일된 코드(컴퓨터가 이해할 수 있는 형태)를 실제 실행할 수 있게 만드는 작업.
• deploy는 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배치시키는 작업.

---

Front-end deploy

Netlify 를이용해 GitHub과 연동해서 배포할 수 있다.

• GitHub 계정과 연동해, 어떤 repo를 deploy할 지 선택가능하다.
• master branch로 push된 것들을 가져와서 build, deploy 해준다. push할 때마다 build, deploy 해줌.

기본 build 명령어인 yarn build가 실행되면 build 디렉토리가 생성된다.

...
7:29:32 PM: Post processing - HTML
7:29:32 PM: Post processing - header rules
7:29:32 PM: Post processing - redirect rules
7:29:32 PM: Post processing done
7:29:32 PM: Site is live

Deploy log에 Site is live 라는 문구가 뜨면 성공적으로 배포한 것이다.

끝! Front-end 는 쉽다!

---

Back-end deploy

할일 요약

• Heroku가 사용할 수 있게 코드들(src 디렉토리에 있음)을 babel을 이용해 컴파일 해서 build디렉토리에 넣기.
• babel은 src 폴더에 있는 graphql 파일을 신경쓰지 않기 때문에 따로 복사해주는 명령어 작성.
• .gitignore에 있는 generated 폴더와 prisma.yml 때문에 Heroku에서 배포할 때 나는 에러 처리

Heroku를 사용해서 배포한다.

이 때까지 쓴 코드들을 babel을 이용해 컴파일 해줘야 한다. pacakge.json의 scripts에 build라는 명령어를 추가하자.

"scripts": {
	...
	"build": "babel src -d build"
}

$ yarn add @babel/cli
...
$ yarn build

src에 있던 코드들을 build라는 폴더에 컴파일해서 넣어준다.

필요한 플러그인들을 설치하자.

$ yarn add @babel/plugin-transtorm-runtime -D
$ yarn add @babel/runtime

.babelrc

{
	...
	"plugins": ["@babel/plugin-transform-runtime"]
}

babel은 js파일만 다루기 때문에 graphql파일은 별도로 build폴더에 넣어줘야 한다.

그래서 copy 모듈을 사용했다.

$ yarn add copy

"scripts": {
	...
	"build": "babel src -d build",
	"postbuild": "cd src && npx copy \"api/**/*.graphql\" \"../build/api/\"",
}

서버를 시작하는 코드도 추가하자.

"scripts": {
	...
	"build": "babel src -d build",
	"postbuild": "cd src && npx copy \"api/**/*.graphql\" \"../build/api/\"",
	"start": "node build/server.js"
}

이제 Heroku를 이용해 배포해보자.

New - Create new app을 통해 새 애플리케이션을 만들어 주고, heroku CLI를 설치해서 사용할 것이다.

$ npm install -g heroku

설치확인은:

$ heroku --version

설치를 했다면 CLI에서 로그인을 해준다

$ heroku login

이미 프로젝트를 만들 때 Git repo를 만들어 놨기 때문에 git init은 안 해줘도 된다.

$ heroku git:remote -a pack-easy-backend
$ git push heroku master

push를 통해 refresh를 할 수 있다.(Netlify처럼)

app을 열어주면 오류가 발생한다. 이유는 generated를 repo에 업로드하지 않았기 때문이다. (.gitignore)

Heroku는 Git과 연동되기 때문에 Heroku에 뭔가 올리려면 push를 통해 올려야 하는데, .gitignore이 파일들을 무시해서 GitHub repo에 없으니까 오류가 뜨는 거다.

즉, generated 폴더를 업로드 하지 않았기 때문에, 서버에 prisma client를 따로 설치해줘야 한다.

"scripts": {
	...
	"prebuild": "yarn run deploy && yarn run generate" // prisma client를 따로 설치해주는 과정
	"build": "babel src -d build",
	"postbuild": "cd src && npx copy \"api/**/*.graphql\" \"../build/api/\"",
	"start": "node build/server.js"
}

나의 코드의 경우에는 prisma.yml 파일도 .gitignore파일에 있다. 즉 git에 업로드되지 않기 때문에 Heroku에서도 인식할 수 없다.

그래서 prisma.yml에 있는 민감한 정보(endpoint url)를 환경변수로 두고, 그 환경변수를 참조하는 식으로 코드로 바꾸고, .gitignore에서 지워줬다. 환경변수는 Heroku 설정에서 할 수 있다.

"scripts": {
	...
	"prebuild": "yarn run deploy && yarn run generate",
	"build": "babel src -d build",
	"postbuild": "cd src && npx copy \"api/**/*.graphql\" \"../build/api/\"",
	"start": "node build/server.js"
}

내가 바꾼 코드를 Heroku에 반영하려면 git push heroku master을 해줘야 한다.

push하기 전에 매번 commit 메시지를 남기기 싫다면 git commit --amend --no-edit을 하면 된다.

마지막으로 git push heroku master을 해주면

remote: -----> Compressing...
remote:        Done: 64.5M
remote: -----> Launching...
remote:        Released v11
remote:        https://🤐.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/🤐.git
   9f1b4cb..c029b42  master -> master

deploy된 주소를 알 수 있다.

graphql playground가 있고 docs를 보면 내가 짜놨던 API들이 잘 적용됐다!

---

Prisma server deploy

이제 개발단계에서 사용했던 prisma demo 서버 말고, 제대로 된 서버를 사용해야 한다.

app.prisma.io로 가서 새 Workspace를 만들고, 서버를 추가하고, 서비스를 추가하면 된다.

서버를 새로 만들 때 DB를 원래 있던 걸 사용할지, 새로 만들지 선택하는데 새로 만들게 되면 DB를 호스팅해줄 provider가 Heroku다. 그래서 back-end deploy도 Heroku를 이용해서 한거다.

서버를 만들었으면 이제 서비스를 추가해줘야 한다. 서비스를 추가하려면 Prisma CLI에 로그인 해야 한다.

$ prisma login -k <발급된 키>

서비스를 추가해주고

https://<server-endpoint>/<service-name>/<stage>

를 prisma.yml의 endpoint에 넣어주고

$ prisma deploy

를 해주면 변경사항이 반영되어 서비스가 업데이트된다.

---

Final Setting

deploy는 끝났다. 이전에 개발 단계에서 설정해놨던 설정들 중에 바꿔줘야 할 것만 바꿔보자.

Frontend

ApolloClient 관련한 설정:

export default new ApolloClient({
  uri: process.env.NODE_ENV === "development" ? 'http://localhost:4000' : "https://🤐.herokuapp.com/",
  clientState: {
    defaults,
    resolvers
  }
});

DEV 일 때는 백엔드 주소를 localhost:4000으로 하고 아닐 때는 deploy했던 주소로 지정해준다.

Backend

prisma.yml의 endpoint 주소는 아까 Heroku에 환경변수로 추가해줬기 때문에 환경변수를 참조하게 바꾼다.

endpoint: ${env:PRISMA_ENDPOINT}

처음에는 내 설정파일 .env에 환경변수값을 넣어놨는데 Heroku가 찾지를 못했다. 이 것도 GitHub repo에 안 올라갔기 때문이다.

마지막으로 generated 폴더에 index.js의 prisma client의 endpoint 주소가 원래 쓰던 demo 서버의 주소로 되어 있다. 이 것도 이 파일을 바꾼다고 해서 GitHub repo에 올라가는 게 아니기 때문에 Heroku에서 반영하지 못한다. 그래서 아예 rebuild를 해서 업데이트하게끔 해야 한다.

$ git commit --allow-empty -m "Nothing" // empty commit
$ git push heroku master

해주면 rebuild를 하면서 prisma generate를 하기 때문에 아까 로그인 했던 서버의 서비스를 대상으로 prisma client를 새로 만들어주고, endpoint도 업데이트된다.

---

Test

Netlify에서 배포한 사이트로 가보면 잘 작동하고, 쿼리를 보내보면 서버도 잘 작동하고 prisma가 DB와도 요청을 주고 받는 것을 확인할 수 있다!!

---

Summary

총 Deploy할 것이 Front-end, Back-end, Prisma server 총 세 개였다.

• Front-end는 Netlify로 GitHub의 repo를 선택해 배포했고
• Back-end는 Heroku로 GitHub과 연동해서 배포했다. Netlify와 다른 점은 Netlify는 내 GitHub 계정의 repo와 연동하지만, Heroku는 git.heroku.com의 repo가 만들어져 거기와 연동된다는 것이다.
• 그래서 업데이트될 때마다 git push heroku master를 통해 위의 repo로 보내줘야 한다.
• 마지막으로 Prisma server는 app.primsa.io로 가보면 새로운 서버를 만들 때, Heroku를 DB provider로 사용한다. Back-end를 배포할 때 Heroku를 사용한 이유도 이 때문이다. 서버를 호스팅하고, 그 위에 서비스를 새로 만든 뒤, 우리가 만들어놨던 디렉토리에서 새로 prisma client를 생성해주면 서버측에서 DB와 prisma client에서 제공하는 API를 이용해 요청 / 응답한다.

꼬박 하루를 써서 배포에 성공했다.. Back-end를 배포할 때 어려움을 겪었지만 나머지는 워낙 잘 되어있어서 나름 괜찮았다. 그래도 한번 해놓고 나니까 다음에는 걍 할 수 있을 것 같다.

🐶🐶 will help you : )

🚀 Prisma DOCS

https://v1.prisma.io/docs/1.34/get-started/01-setting-up-prisma-demo-server-JAVASCRIPT-a001/

🚀 Heroku DOCS

https://devcenter.heroku.com/articles/git

🚀 Netlify DOCS

https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git