[Fix] Monorepo

O-h-y-o · Mar 14, 2024 · e10e9c5 · e10e9c5
1 parent 6c39098
commit e10e9c5
Showing 1 changed file with 95 additions and 7 deletions.
diff --git a/src/ko/posts/info/monorepo&ci-cd.md b/src/ko/posts/info/monorepo&ci-cd.md
@@ -6,13 +6,93 @@
 
 멀티레포는 브랜치가 꼬이거나 하는 일이 적지만, 모노레포에서는 브랜치끼리 꼬이거나 ci/cd의 과정에서 몇 가지 문제가 발생할 수가 있습니다. (조심하지않으면..)
 
+브랜치는 main, stage, dev 세개가 있고 프로젝트는 다음처럼 세개가 있다고 가정하겠습니다.
+
+예제에서는 quasar와 yarn을 사용하기에 quasar를 사용하지 않으면 관련 내용은 모두 없애셔도 됩니다.
+
+다음과 같은 프로젝트가 3개 있는 모노레포의 예시입니다.
+
 Root
 ╚ project1
 ╚ project2
 ╚ project3
 
 ## 자동 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 <BUILD_FOLDER> <BUCKET_NAME> --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 <BUILD_FOLDER> <BUCKET_NAME> --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 <BUILD_FOLDER> <BUCKET_NAME> --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
 
 <a href="https://cli.github.com" target="_blank">https://cli.github.com</a>
 
-다음으로 깃허브 로그인을 해주세요.
+### 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}}/<BUILD_FOLDER> 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를 설치해주세요.
 ```