「마이크로서비스 & 파이어베이스 CI·CD」(4) github Action 연결

github Action은 웹팩(빌드 폴더)과 연결된다.

이를 위해 빌드를 위한 웹팩 프로덕션 설정이 필요하다.

 

 

 

---

1] /config/webpack.xxx.js 수정

웹팩 빌드를 위해 webpack.prod.js를 추가한다.

 

container/config/webpack.prod.js

 

 

그런데 HtmlWebpackPlugin모듈은 개발팀 자체 테스트용(webpack.dev.js), 배포용(webpack.prod.js) 모두 필요하기 때문에 아래와 같이 webpack.common.js파일로 이동시킨다.

 

01

webpack.dev.js, webpack.common.js 수정

 

 

package.json에서 build 실행문을 추가한다.

 

container/package.json

 

 

여기까지 진행했다면, container를 웹팩으로 빌드해보자.

 

 

output폴더를 따로 지정하지 않았다면, 새로 생성된 'dist폴더'에서 통합된 개발코드를 확인할 수 있다.

 

 

 

 

 

 

 

---

2] marketing/config/webpack.xxx.js 수정

marketing폴더의 내용 역시 github Action에 등록할 예정이므로 webpack.prod.js파일을 다음과 같이 수정한다.

 

marketing/config/webpack.prod.js

 

 

HtmlWebpackPlugin모듈을 webpack.common.js로 옮긴 후 package.json에서 웹팩 빌드 실행문을 추가한다.

 

marketing/package.json

 

이제 웹팩을 빌드(npm run build)하면 dist폴더가 생성된다.

 

< npm run build >실행

 

 

 

 

 

 

 

---

3] github Action설정

github Action과 로컬저장소를 연결해보자. 

현재, github의 Action탭을 클릭해보면 아래와 같은 상태일 것이다.

 

github Action

 

 

 

3-1] container.yml 생성

github Action은 말 그대로 '깃허브에서 수행하는 동작'이다. 위의 'set up your workflow'를 클릭해서 깃허브가 지정해준 메뉴얼을 사용할 수 있으며, 자체적으로 '.yml'(github Action 인식)을 생성할 수도 있다.

 

최상위폴더/.github/workflow/container.yml

 

 

.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 screts 객체 생성

 

 

⑤의 파이어베이스 설정은 github action for firebase문서에서 확인할 수 있다.

 

https://github.com/marketplace/actions/deploy-to-firebase-hosting

Deploy to Firebase Hosting - GitHub Marketplace

 

 

 

 

3-2] firebase github workflow 설정

(위의 문서에 따르면) github Action을 사용하기 위해서는 배포할 폴더에서 firebase 초기화를 해야 한다.

 

container/에서 firebase init hosting & firebase init hosting:github 실행

 

 

가령, 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' 파일이 생성된다)

 

01

파이어베이스 설정관련 github Action .yml "PR & Deploy"

 

'with'값의 repoToken에서 'secrets.GITHUB_TOKEN'값은 따로 설정하지 않고 그대로 사용해도 무방하다.(github에서 자동으로 설정함) 개발팀에서 따로 설정해줘야 하는 값은 'firebaseServiceAccount', 'projectId'값이다. 

 

 

 

3-3] firebaseServiceAccount, projectId설정

firebaseServiceAccount 암호값을 얻으려면 (당연히) firebase 계정이 필요하다. (구글 계정이 있다는 가정하에) 파이어베이스에서 서비스 키를 생성한 후, github secrets객체값으로 등록해준다.

 

0123

firebase 서비스키 생성 & 깃허브 등록

 

 

 

 

3-4] firebase.json 설정

container폴더에서 'firebase init hosting'을 실행했다면, container/폴더에서 '.firebase', '.frebaserc', 'firebase.json'파일을 확인할 수 있다. 이 중에에서 배포와 관련된 파일은 'firebase.json'이다.

 

container/ firebase.json

 

'site'값은 배포하려는 파이어베이스 호스팅 웹사이트명이며, "public"은 파이어베이스에 업로드 하려는 배포 파일이 있는 폴더 경로를 의미한다. 'rewrites'부분은 굳이 넣지 않아도 된다. 

 

 

 

 

3-5] .babelrc 생성

babel은 리액트를 일반 js파일로 변환하기 때문에 배포하는 과정에서 필수적이다. babel모듈이 없으면 호스팅 웹사이트에서 JSX문법 에러가 발생한다.

 

container/.babelrc

 

 

위의 설정을 마쳤다면 git push를 실행한 후에 github의 Action탭으로 가보자. 

 

012

github Action

 

.yml파일에서 설정한대로 github Action은 npm install ~ run build 이후 파이어베이스에 호스팅하는 작업을 수행한다. 

 

 

하지만 github Action이 끝나더라도 아직 파이어베이스 호스팅 사이트는 제대로 동작하지 않는다. container는 런타임으로 marketing개발 코드를 읽어오기 때문에 marketing이 빌드되기 전까지 container는 remoteEntry.js파일을 찾을 수 없다는 에러 메시지를 띄운다.

 

해당 내용은 다음 포스팅에서 알아보자.(container와 설정 비슷함)