Skip to content

Commit 3ff9547

Browse files
Copilotuanid
Copilot
and
uanid
authored
Add CI/CD for npm publishing and GitHub Pages deployment (#3)
* Initial plan * Add npm publish and GitHub Pages deployment workflows Co-authored-by: uanid <35264628+uanid@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: uanid <35264628+uanid@users.noreply.github.com>
1 parent 78ae0bb commit 3ff9547

7 files changed

Lines changed: 1250 additions & 1295 deletions

File tree

‎.github/workflows/deploy-pages.yml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
name: Deploy Demo to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: "pages"
15+
cancel-in-progress: false
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v4
22+
23+
- name: Setup pnpm
24+
uses: pnpm/action-setup@v2
25+
with:
26+
version: 8
27+
28+
- name: Setup Node.js
29+
uses: actions/setup-node@v4
30+
with:
31+
node-version: '20'
32+
cache: 'pnpm'
33+
34+
- name: Install dependencies
35+
run: pnpm install --frozen-lockfile
36+
37+
- name: Build packages
38+
run: pnpm build
39+
env:
40+
GITHUB_PAGES: 'true'
41+
42+
- name: Setup Pages
43+
uses: actions/configure-pages@v4
44+
45+
- name: Upload artifact
46+
uses: actions/upload-pages-artifact@v3
47+
with:
48+
path: './packages/demo/dist'
49+
50+
deploy:
51+
environment:
52+
name: github-pages
53+
url: ${{ steps.deployment.outputs.page_url }}
54+
runs-on: ubuntu-latest
55+
needs: build
56+
steps:
57+
- name: Deploy to GitHub Pages
58+
id: deployment
59+
uses: actions/deploy-pages@v4

‎.github/workflows/publish-npm.yml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
name: Publish to npm
2+
3+
on:
4+
release:
5+
types: [created]
6+
workflow_dispatch:
7+
8+
jobs:
9+
publish:
10+
runs-on: ubuntu-latest
11+
permissions:
12+
contents: read
13+
id-token: write
14+
steps:
15+
- uses: actions/checkout@v4
16+
17+
- name: Setup pnpm
18+
uses: pnpm/action-setup@v2
19+
with:
20+
version: 8
21+
22+
- name: Setup Node.js
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: '20'
26+
registry-url: 'https://registry.npmjs.org'
27+
cache: 'pnpm'
28+
29+
- name: Install dependencies
30+
run: pnpm install --frozen-lockfile
31+
32+
- name: Build packages
33+
run: pnpm build
34+
35+
- name: Publish to npm
36+
run: |
37+
cd packages/minesweeper
38+
pnpm publish --access public --no-git-checks
39+
env:
40+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎DEPLOYMENT.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# GitHub Actions Setup Instructions
2+
3+
이 저장소에는 npm 패키지 배포와 GitHub Pages 데모 사이트 배포를 위한 GitHub Actions 워크플로우가 설정되어 있습니다.
4+
5+
## 필요한 설정
6+
7+
### 1. NPM 토큰 설정 (npm publish용)
8+
9+
1. [npm 웹사이트](https://www.npmjs.com/)에 로그인합니다
10+
2. 프로필 > Access Tokens > Generate New Token으로 이동합니다
11+
3. "Classic Token" 선택 후 "Automation" 타입으로 토큰을 생성합니다
12+
4. 생성된 토큰을 복사합니다
13+
5. GitHub 저장소의 Settings > Secrets and variables > Actions로 이동합니다
14+
6. "New repository secret" 클릭
15+
7. Name: `NPM_TOKEN`, Value: (복사한 토큰)으로 설정합니다
16+
17+
### 2. GitHub Pages 설정 (데모 사이트용)
18+
19+
1. GitHub 저장소의 Settings > Pages로 이동합니다
20+
2. "Source"를 **"GitHub Actions"**로 선택합니다
21+
- "Deploy from a branch"가 아닌 "GitHub Actions"를 선택해야 합니다
22+
3. 저장하면 완료입니다
23+
24+
## 워크플로우 사용 방법
25+
26+
### npm 패키지 배포
27+
28+
**방법 1: Release 생성 (권장)**
29+
1. GitHub에서 새로운 Release를 생성합니다
30+
2. 태그는 버전 번호를 따라 지정합니다 (예: v0.1.0, v0.2.0)
31+
3. Release를 생성하면 자동으로 npm에 배포됩니다
32+
33+
**방법 2: 수동 실행**
34+
1. Actions 탭 > "Publish to npm" 워크플로우 선택
35+
2. "Run workflow" 버튼 클릭
36+
3. 원하는 브랜치 선택 후 실행
37+
38+
### 데모 사이트 배포
39+
40+
- `main` 브랜치에 푸시할 때마다 자동으로 배포됩니다
41+
- 또는 Actions 탭에서 "Deploy Demo to GitHub Pages" 워크플로우를 수동으로 실행할 수 있습니다
42+
43+
## 배포된 사이트 확인
44+
45+
- npm 패키지: https://www.npmjs.com/package/@minigames-react/minesweeper
46+
- 데모 사이트: https://pubg.github.io/minigames-react/
47+
48+
## 주의사항
49+
50+
- npm 패키지를 배포하기 전에 `packages/minesweeper/package.json`의 `version` 필드를 업데이트해야 합니다
51+
- 이미 배포된 버전과 동일한 버전으로는 재배포할 수 없습니다
52+
- GitHub Pages 배포는 약 1-2분 정도 소요될 수 있습니다
53+
54+
## 문제 해결
55+
56+
### npm 배포 실패 시
57+
- NPM_TOKEN이 올바르게 설정되었는지 확인
58+
- npm에 로그인한 계정이 @minigames-react organization에 접근 권한이 있는지 확인
59+
60+
### GitHub Pages 배포 실패 시
61+
- Settings > Pages에서 Source가 "GitHub Actions"로 설정되어 있는지 확인
62+
- 워크플로우에 pages: write 권한이 있는지 확인 (이미 설정됨)

‎packages/demo/public/.nojekyll‎

Whitespace-only changes.

‎packages/demo/vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react';
33

44
export default defineConfig({
55
plugins: [react()],
6-
base: './',
6+
base: process.env.GITHUB_PAGES ? '/minigames-react/' : './',
77
});

‎packages/minesweeper/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@
1111
"clean": "rm -rf dist"
1212
},
1313
"keywords": ["react", "minesweeper", "game"],
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/pubg/minigames-react.git",
17+
"directory": "packages/minesweeper"
18+
},
19+
"license": "MIT",
1420
"peerDependencies": {
1521
"react": "^18.0.0",
1622
"react-dom": "^18.0.0"

0 commit comments

Comments
 (0)