「마이크로서비스 & 파이어베이스 CI·CD」(4) github Action 연결
github Action은 웹팩(빌드 폴더)과 연결된다.
이를 위해 빌드를 위한 웹팩 프로덕션 설정이 필요하다.
1] /config/webpack.xxx.js 수정
웹팩 빌드를 위해 webpack.prod.js를 추가한다.
그런데 HtmlWebpackPlugin모듈은 개발팀 자체 테스트용(webpack.dev.js), 배포용(webpack.prod.js) 모두 필요하기 때문에 아래와 같이 webpack.common.js파일로 이동시킨다.
package.json에서 build 실행문을 추가한다.
여기까지 진행했다면, container를 웹팩으로 빌드해보자.
output폴더를 따로 지정하지 않았다면, 새로 생성된 'dist폴더'에서 통합된 개발코드를 확인할 수 있다.
2] marketing/config/webpack.xxx.js 수정
marketing폴더의 내용 역시 github Action에 등록할 예정이므로 webpack.prod.js파일을 다음과 같이 수정한다.
HtmlWebpackPlugin모듈을 webpack.common.js로 옮긴 후 package.json에서 웹팩 빌드 실행문을 추가한다.
이제 웹팩을 빌드(npm run build)하면 dist폴더가 생성된다.
3] github Action설정
github Action과 로컬저장소를 연결해보자.
현재, github의 Action탭을 클릭해보면 아래와 같은 상태일 것이다.
3-1] container.yml 생성
github Action은 말 그대로 '깃허브에서 수행하는 동작'이다. 위의 'set up your workflow'를 클릭해서 깃허브가 지정해준 메뉴얼을 사용할 수 있으며, 자체적으로 '.yml'(github Action 인식)을 생성할 수도 있다.
.github/workflow 폴더에 위치하는 '.yml'파일은 웹팩을 빌드했을 때, github이 실행하는 행동목록표이다. (위의 그림에서 ① ~ ⑤을 제외한 부분은 중요치 않음. 단, "branches:" 에서 자신의 github 브런치를 'homt-pc'대신 입력)
① github에서 읽는 폴더 경로
② git push이후, github이 실행하는 행동목록 순서
③ npm install, npm run build 순서대로 실행
④ 사용자가 github의 screts에 저장한 임의 변수(ex.클라우드 id, 암호키, 사이트명, 등.. 저장 & 사용)
⑤ firebase 연결 설정(firebase 메뉴얼대로 입력)
④의 secrets객체 설정은 github setting -> Secrets and Variables 에서 설정할 수 있다.
⑤의 파이어베이스 설정은 github action for firebase문서에서 확인할 수 있다.
https://github.com/marketplace/actions/deploy-to-firebase-hosting
Deploy to Firebase Hosting - GitHub Marketplace
A GitHub Action to deploy to Firebase Hosting
github.com
3-2] firebase github workflow 설정
(위의 문서에 따르면) github Action을 사용하기 위해서는 배포할 폴더에서 firebase 초기화를 해야 한다.
가령, container를 배포하려면 container폴더에서 firebase init hosting을 실행한 후 '.github > workflow' 아래에 'container.yml'파일을 생성하면 된다.(수동) 만일, 임의로 '.yml'파일을 생성하지 않는다면, 'firebase init hosting:github'을 사용할 수 있다. (firebase init hosting을 실행한 후, firebase init hosting:github을 실행해주면, 자동으로 '.github > workflow > xxx.yml' 파일이 생성된다)
'with'값의 repoToken에서 'secrets.GITHUB_TOKEN'값은 따로 설정하지 않고 그대로 사용해도 무방하다.(github에서 자동으로 설정함) 개발팀에서 따로 설정해줘야 하는 값은 'firebaseServiceAccount', 'projectId'값이다.
3-3] firebaseServiceAccount, projectId설정
firebaseServiceAccount 암호값을 얻으려면 (당연히) firebase 계정이 필요하다. (구글 계정이 있다는 가정하에) 파이어베이스에서 서비스 키를 생성한 후, github secrets객체값으로 등록해준다.
3-4] firebase.json 설정
container폴더에서 'firebase init hosting'을 실행했다면, container/폴더에서 '.firebase', '.frebaserc', 'firebase.json'파일을 확인할 수 있다. 이 중에에서 배포와 관련된 파일은 'firebase.json'이다.
'site'값은 배포하려는 파이어베이스 호스팅 웹사이트명이며, "public"은 파이어베이스에 업로드 하려는 배포 파일이 있는 폴더 경로를 의미한다. 'rewrites'부분은 굳이 넣지 않아도 된다.
3-5] .babelrc 생성
babel은 리액트를 일반 js파일로 변환하기 때문에 배포하는 과정에서 필수적이다. babel모듈이 없으면 호스팅 웹사이트에서 JSX문법 에러가 발생한다.
위의 설정을 마쳤다면 git push를 실행한 후에 github의 Action탭으로 가보자.
.yml파일에서 설정한대로 github Action은 npm install ~ run build 이후 파이어베이스에 호스팅하는 작업을 수행한다.
하지만 github Action이 끝나더라도 아직 파이어베이스 호스팅 사이트는 제대로 동작하지 않는다. container는 런타임으로 marketing개발 코드를 읽어오기 때문에 marketing이 빌드되기 전까지 container는 remoteEntry.js파일을 찾을 수 없다는 에러 메시지를 띄운다.
해당 내용은 다음 포스팅에서 알아보자.(container와 설정 비슷함)