diff --git a/src/ko/posts/info/monorepo&ci-cd.md b/src/ko/posts/info/monorepo&ci-cd.md index adf4e347..cfbfee5e 100644 --- a/src/ko/posts/info/monorepo&ci-cd.md +++ b/src/ko/posts/info/monorepo&ci-cd.md @@ -6,6 +6,12 @@ 멀티레포는 브랜치가 꼬이거나 하는 일이 적지만, 모노레포에서는 브랜치끼리 꼬이거나 ci/cd의 과정에서 몇 가지 문제가 발생할 수가 있습니다. (조심하지않으면..) +브랜치는 main, stage, dev 세개가 있고 프로젝트는 다음처럼 세개가 있다고 가정하겠습니다. + +예제에서는 quasar와 yarn을 사용하기에 quasar를 사용하지 않으면 관련 내용은 모두 없애셔도 됩니다. + +다음과 같은 프로젝트가 3개 있는 모노레포의 예시입니다. + Root ╚ project1 ╚ project2 @@ -13,6 +19,80 @@ Root ## 자동 Github CI/CD +자동 CI/CD를 위해 .github/workflows 에 .yml 파일을 만들고 다음과 같이 작성해주세요. + +project1, 2, 3에 쓰일 yml파일을 하나씩 만들었지만, 하나에 모두 다 작성하셔도 됩니다. + +```yml +name: Build & Deploy +on: + push: + branches: + - main + - stage + - dev + paths: + - project1/** + +jobs: + build: + runs-on: ubuntu-latest + + defaults: + run: + shell: bash + + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Install Node.js + uses: actions/setup-node@v3 + with: + node-version: 20 + + - name: Install dependencies + run: yarn global add @quasar/cli && yarn install + + - name: Set env + run: | + if [[ ${{ github.ref }} == 'refs/heads/dev' ]]; then + echo "VUE_APP_ENV=${{ secrets.DEV_PUBLISH_ENV }}" >> project1/.env + echo "VUE_APP_API=${{ secrets.DEV_API }}" >> project1/.env + echo "VUE_APP_CHAT_API"=${{ secrets.DEV_CHAT_API }} >> project1/.env + cat project1/.env + elif [[ ${{ github.ref }} == 'refs/heads/stage' ]]; then + echo "VUE_APP_ENV=${{ secrets.STAGE_PUBLISH_ENV }}" >> project1/.env + echo "VUE_APP_API=${{ secrets.STAGE_API }}" >> project1/.env + echo "VUE_APP_CHAT_API"=${{ secrets.STAGE_CHAT_API }} >> project1/.env + cat project1/.env + elif [[ ${{ github.ref }} == 'refs/heads/main' ]]; then + echo "VUE_APP_ENV=${{ secrets.PROD_PUBLISH_ENV }}" >> project1/.env + echo "VUE_APP_API=${{ secrets.PROD_API }}" >> project1/.env + echo "VUE_APP_CHAT_API"=${{ secrets.PROD_CHAT_API }} >> project1/.env + cat project1/.env + fi + - name: Build and Deploy + run: | + if [[ ${{ github.ref }} == 'refs/heads/dev' ]]; then + # build_process - ex) yarn build + aws s3 sync --acl public-read --delete + aws cloudfront create-invalidation --distribution-id ${{ secrets.DEV_DISTRIBUTION }} --paths "/*" + elif [[ ${{ github.ref }} == 'refs/heads/stage' ]]; then + # build_process + aws s3 sync --acl public-read --delete + aws cloudfront create-invalidation --distribution-id ${{ secrets.STAGE_DISTRIBUTION }} --paths "/*" + elif [[ ${{ github.ref }} == 'refs/heads/main' ]]; then + # build_process + aws s3 sync --acl public-read --delete + aws cloudfront create-invalidation --distribution-id ${{ secrets.PROD_DISTRIBUTION }} --paths "/*" + fi + env: + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + AWS_DEFAULT_REGION: ${{ secrets.AWS_DEFAULT_REGION }} +``` + ## 수동 Github CI/CD ### Window @@ -21,7 +101,15 @@ Root https://cli.github.com -다음으로 깃허브 로그인을 해주세요. +### Mac + +다음 명령어로 github cli를 설치해주세요. + +```bash +$ brew install gh +``` + +github cli 설치가 완료되었다면, 다음으로 깃허브 로그인을 해주세요. ```shell $ gh auth login @@ -76,14 +164,14 @@ jobs: cat ${{github.event.inputs.target}}/.env if [[ ${{ github.event.inputs.target }} == 'project1' ]]; then - # build_process + # build_process - ex) yarn build elif [[ ${{ github.event.inputs.target }} == 'project2' ]]; then # build_process elif [[ ${{ github.event.inputs.target }} == 'project3' ]]; then # build_process fi - aws s3 sync ${{github.event.inputs.target}}/dist/pwa s3://${{github.event.inputs.bucketName}} --acl public-read --delete + aws s3 sync ${{github.event.inputs.target}}/ s3://${{github.event.inputs.bucketName}} --acl public-read --delete if [[ ${{ github.event.inputs.branch }} == 'dev' ]]; then @@ -123,7 +211,7 @@ jobs: AWS_DEFAULT_REGION: ap-northeast-2 ``` -저는 branch와 배포할 프로젝트인 target을 값으로 받겠습니다. +저는 branch와 배포할 프로젝트인 target을 값으로 받겠습니다. 그리고 branch에 따라 bucketName을 보내주겠습니다. `inquirer` 라이브러리를 통하여 값을 받아주겠습니다. 프로젝트 루트에서 `inquirer` 라이브러리를 설치해주세요. @@ -230,8 +318,8 @@ const inquirerTarget = async () => { "deploy": "node ./deploy" ``` -그리고 터미널에서 `npm run deploy` 혹은 `yarn deploy` 등등을 입력해주시면 됩니다! +그리고 터미널에서 `npm run deploy` 혹은 `yarn deploy` 등등을 입력해주시면 됩니다. -``` -노드버전 18이하는 에러가 발생합니다. 18버전 이상이나 최신버전의 node.js를 설치해주세요! +```info +노드버전 18이하는 에러가 발생합니다. 18버전 이상이나 최신버전의 node.js를 설치해주세요. ```