!!!잘못된 부분이 있을경우 피드백 환영입니다
시작하기
vercel 에서는 항상 친절하게 example 을 제공해줍니다.
npx degit vercel/turborepo/examples/design-system design-system
cd design-system
yarn install구조
monorepo/
├─ apps/ - 각각의 repo
│ ├─ docs/
├─ packages/ - 공통 라이브러리
│ ├─ qqww08-utils/
│ ├─ qqww08-core/
│ ├─ tsconfig/
│ ├─ config/
├─ │개발셋팅
github 에서 npx degit 을 사용해서 repo 를 다운로드 받았다면 셋팅은 이미 끝난것입니다.
실제 service 배포시 추가 적인 CI 작업, Dockerfile 작성 등이 필요하겠지만 초기 셋팅이 없는 것만으로도 디자인시스템 구축 시 시간을 아주 어마어마하게 단축시켜줄 겁니다.
바로 배포 준비를 하면 되겠습니다.
Github npm registry에 배포 하기전에 준비
1. /packages/* 폴더 rename
monorepo/
├─ apps/
│ ├─ docs/
├─ packages/
+ qqww08-utils/
+ qqww08-core/
+ qqww08-tsconfig/
+ eslint-config-qqww08/
├─ │- 위와 같이 폴더 이름을 수정해줍니다.
2. 각각의 packages에 package.json 수정
// root/packages/your_package/package.json
{
"name": "@qqww08/core",
"version": "0.0.1",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"repository": "https://github.com/qqww08/monorepo-design-system-example",
"sideEffects": false,
....
"publishConfig": {
"access": "public"
},
}- package 설치시 해당 이름으로 설치를 하게 되므로
package.json 의 name 을 @scope/lib 으로 바꿔주셔야 하고 @scope 는 github name 이여야 합니다.
ex) @scope/your-package - 사용하지 않는 코드를 제거하기 위해 sideEffects: false 를 추가 해주도록 합니다.
- private publish 일 경우 아래의 코드를 package.json 에서 제거 해주셔야 합니다.
"publishConfig": {
"access": "public"
},3. CI/CD
Github Actions 을 통해 배포 하도록 합니다.
// .github/workflows/release.yml
name: Release
on:
push:
branches:
- master
concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
release:
...
- name: Install Dependencies
run: yarn install
# - name: Creating .npmrc
# run: |
# cat << EOF > "$HOME/.npmrc"
# @scope:registry=https://npm.pkg.github.com
# //npm.pkg.github.com/:_authToken=$GH_REGISTRY_TOKEN
# EOF
# env:
# GH_REGISTRY_TOKEN: ${{ secrets.GH_REGISTRY_TOKEN }}
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
# This expects you to have a script called release which does a build for your packages and calls changeset publish
publish: yarn release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- #NPM_TOKEN: ${{ secrets.NPM_TOKEN }}- yaml/yml 파일 같은 경우는 들여쓰기가 맞지 않으면 작동하지 않기 때문에 주의 해주셔야 합니다.
- github registry 에 배포 하는것이기 때문에 NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 을 제거 합니다.
- 위의 주석된 부분 같은 경우는 아래에서 설명하겠습니다
Github registry에 publish 하기 위해선 권한이 필요합니다,
Github Actions가 작동할때 권한을 주어야 하기 때문에 아래 코드를 추가하여줍니다.
Github -> settings -> Developer settings -> Personal access tokens -> Generate new token
-
아래와 같이 체크후 토큰을 발급받습니다.
-
발급된 키를 가지고 해당 repository -> Settings -> Secrets -> Actions-> New repository secret 해당 경로로 가서 발급된 시크릿 키를 붙여넣기 하시고 Name 에는 GH_REGISTRY_TOKEN 으로 시크릿키를 추가해주시면 되겠습니다
-
@scope 부분에 본인의 github name 으로 바꿔줍니다.
- name: Creating .npmrc
run: |
cat << EOF > "$HOME/.npmrc"
@scope:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=$GH_REGISTRY_TOKEN
EOF
env:
GH_REGISTRY_TOKEN: ${{ secrets.GH_REGISTRY_TOKEN }}4. Versioning
해당 프로젝트에서는 changesets 라는 라이브러리를 사용하여 버전 관리를 하고 있고 changeset 은 semVer 를 따르고 있습니다.
코드를 수정하여 publish 할 경우 package.json 에 있는 version 을 up을 시키고 publish 를 해야 배포가 되기 때문에 같은 버전으로 올려서 배포가 안되는일이 없길 바랍니다.
4-1.changeset script 실행 후 적용시킬 package 를 선택합니다
npm run changeset
4-2. 아래와 같이 [major, minor, patch] 어떤 버전을 업 시킬지 선택후 change log 를 작성합니다.
4-3. CHANGELOG를 생성 하고 버전 업을 시킵니다.
changeset을 하셨다면 .changeset/~.md md 확장자명으로 파일이 하나 생성 되어있을겁니다 안에 내용을 보시면 아래 이미지 처럼 어떤 패키지가 버전업이 되고 어떤 내용이 수정되었는지 확인이 가능합니다.
확인이 되셨다면 아래의 스크립트를 실행 시킵니다.
npm run version-packages4-4. publish 준비 끝
- /packages/your_package/CHANGELOG.md 를 가보시면 CHANGELOG.md가 바뀐것이 확인이 가능하고
- /packages/your_package/package.json 의 version up 이 되어있는것이 확인 가능합니다
git add .
git commit -m "Version Changes"
git push origin master 해당 브랜치를 푸쉬만 해주신다면 3번에서 셋팅한 Github Actions 가 작동하면서 github registry 에 package가 정상적으로 배포가 된것을 확인이 가능합니다.
Using
1. Package Install
Github에 있는 registry에 접근 하는것이기 때문에 설치를 받을때도 권한이 필요합니다.
이제 install 해서 사용하는일만 남았습니다. package 설치할 프로젝트로 가서 아래의 파일 생성 후 install 을 받습니다.
👉 Using npm
/root/.npmrc
@YOUR_USERNAME:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=$GH_REGISTRY_TOKEN
or
👉 Using yarn berry
/root/.yarnrc.yml
npmScopes:
"YOUR_USERNAME":
npmAlwaysAuth: true
npmRegistryServer: "https://npm.pkg.github.com"
npmAuthToken: "$GH_REGISTRY_TOKEN"
npm i @qqww08/core @qqww08/utils
or
yarn add @qqww08/core @qqww08/utils2. Using
next.js 에서 사용할려면 next-transpile-modules 을 설치하주셔야 합니다.
// next.config.js
const withTM = require('next-transpile-modules')(['@qqww08/core', '@qqww08/utils']);
module.exports = withTM({});// main.tsx
import { Button } from "@qqww08/core";
import { isBrowser } from "@qqww08/utils";
const MainPage = () => {
return (
<>
{isBrowser()}
<Button>나는 다른 세상에서온 버튼이야</Button>
</>
);
};// .eslintrc.js
module.exports = {
extends: ["@qqww08/eslint-config-qqww08"],
};
참고
참고
https://semver.org/lang/ko/
https://turborepo.org/
https://github.com/changesets/changesets/tree/main/packages/cli
