Frontend CICD #23
Frontend CICD #23
Conversation
📝 WalkthroughWalkthroughThis pull request introduces new GitHub Actions workflows and a Docker service configuration. A workflow named Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
owenowenisme
requested review from
AndresLie and
a team
and removed request for
AndresLie
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (3)
.github/workflows/dev-frontend.yml (2)
5-6: Consider restricting branch pattern and adding environment checksThe current branch pattern
dev/frontend@**might be too permissive. Consider:
- More specific pattern like
dev/frontend@v*- Adding environment validation step
Example:
on: push: branches: - 'dev/frontend@v*' workflow_dispatch: inputs: environment: description: 'Deployment environment' required: true default: 'development' type: choice options: - development - staging
13-13: Document migration plan from WatchtowerThe comment indicates this is a temporary solution. Consider:
- Creating a tracking issue for the migration plan
- Documenting potential alternatives
Would you like me to create a GitHub issue to track the migration plan from Watchtower to a more robust CD solution?
🧰 Tools
🪛 yamllint (1.35.1)
[error] 13-13: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/frontend-ci.yml (1)
9-10: Remove outdated commentThis comment refers to the
releasebranch but the workflow triggers onworkflow_dispatchandworkflow_call.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (3)
.github/workflows/dev-frontend.yml(1 hunks).github/workflows/frontend-ci.yml(1 hunks)watchtower/compose.yml(1 hunks)
🧰 Additional context used
🪛 yamllint (1.35.1)
watchtower/compose.yml
[error] 6-6: trailing spaces
(trailing-spaces)
.github/workflows/dev-frontend.yml
[error] 13-13: no new line character at the end of file
(new-line-at-end-of-file)
.github/workflows/frontend-ci.yml
[error] 1-1: trailing spaces
(trailing-spaces)
[warning] 8-8: too many blank lines
(3 > 2) (empty-lines)
[error] 26-26: trailing spaces
(trailing-spaces)
[error] 57-57: trailing spaces
(trailing-spaces)
[error] 58-58: trailing spaces
(trailing-spaces)
| volumes: | ||
| - /var/run/docker.sock:/var/run/docker.sock |
There was a problem hiding this comment.
Security concern: Docker socket mounting creates a potential security risk
Mounting the Docker socket gives the container root-equivalent access to the host. Consider:
- Using a non-root user within the container
- Implementing socket proxy (e.g., docker-socket-proxy) to restrict API access
Example socket proxy configuration:
services:
socket-proxy:
image: tecnativa/docker-socket-proxy
privileged: false
environment:
- CONTAINERS=1
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
watchtower:
image: containrrr/watchtower
environment:
- DOCKER_HOST=tcp://socket-proxy:2375
depends_on:
- socket-proxy| command: | ||
| --interval 10 --cleanup |
There was a problem hiding this comment.
Performance concern: 10-second update interval is too aggressive
Such a short interval could:
- Increase load on Docker registry
- Potentially hit rate limits
- Consume unnecessary resources
Consider increasing the interval to at least 5 minutes (300 seconds).
🧰 Tools
🪛 yamllint (1.35.1)
[error] 6-6: trailing spaces
(trailing-spaces)
| services: | ||
| watchtower: | ||
| image: containrrr/watchtower | ||
| volumes: | ||
| - /var/run/docker.sock:/var/run/docker.sock | ||
| command: | ||
| --interval 10 --cleanup | ||
| restart: always |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add container filters and authentication configuration
Current configuration will update all containers. Consider:
- Adding filters to target specific containers
- Configuring registry authentication
- Adding resource limits
Example enhanced configuration:
services:
watchtower:
image: containrrr/watchtower
volumes:
- /var/run/docker.sock:/var/run/docker.sock
environment:
- WATCHTOWER_POLL_INTERVAL=300
- WATCHTOWER_LABEL_ENABLE=true
- WATCHTOWER_CLEANUP=true
- REGISTRY_USERNAME=${GHCR_USERNAME}
- REGISTRY_PASSWORD=${GHCR_TOKEN}
command: --label-enable
deploy:
resources:
limits:
memory: 256M
reservations:
memory: 128M
restart: always🧰 Tools
🪛 yamllint (1.35.1)
[error] 6-6: trailing spaces
(trailing-spaces)
| uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1 | ||
| with: | ||
| registry: ${{ env.REGISTRY }} | ||
| username: ${{ github.actor }} | ||
| password: ${{ secrets.GITHUB_TOKEN }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use GITHUB_TOKEN with minimum required permissions
The workflow uses GITHUB_TOKEN with broad permissions. Consider:
- Using a fine-grained PAT for GHCR access
- Implementing OIDC authentication
[security]
Example configuration:
permissions:
packages: write
contents: read
steps:
- name: Log in to the Container registry
uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
with:
registry: ${{ env.REGISTRY }}
username: ${{ github.actor }}
password: ${{ secrets.GHCR_TOKEN }}| - name: Build and push Docker image | ||
| id: push | ||
| uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4 | ||
| with: | ||
| context: ./frontend | ||
| push: true | ||
| tags: ${{ steps.meta.outputs.tags }} | ||
| labels: ${{ steps.meta.outputs.labels }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add security scanning and build optimization
Consider adding:
- Container vulnerability scanning
- Docker layer caching
- Build context optimization
Example enhancement:
steps:
- name: Build and push Docker image
uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
with:
context: ./frontend
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
cache-from: type=gha
cache-to: type=gha,mode=max
- name: Run Trivy vulnerability scanner
uses: aquasecurity/trivy-action@master
with:
image-ref: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
format: 'table'
exit-code: '1'
ignore-unfixed: true
vuln-type: 'os,library'
severity: 'CRITICAL,HIGH'* testing ghcr pushing and tag * testing latest tag on image * testing frontend cd * add job to dev-frontend * modify ssh command * modify ssh command * modify ssh command * modify ssh command * update ssh * update ssh * update ssh * update ssh * update ssh * update ssh * test vpn connection * add wireguard config to secret * add resolve conf to apt install * change another wireguard connection method * use watchtower instead of ssh deployment * update workflow for watch tower
* added starter task template * init husky pre-commit * add navbar * Revert "add navbar" This reverts commit 1aaa490. * feat add file upload dropzone * update pnpm-lock.yaml and package.json, set size for image in FileIpload * File card initial commit * remove wrong file * Update ExamCard.tsx * refine the exam card file * refactor: simplify import paths * feat add navbar * Refactor: move repetitive code to separate file * Refactor: refactor with coderabbitai review * Refactor: refactor and remove some unnecessary tailwind css code * Refactor: fix using the wrong variable * Refactor: make css more prettier * Refactor: remove style.css for following tailwind design pattern: only use @apply for repetitive style * Refactor: change route names to lowercase and use prettier for unifying coding style * update husky prepare command * feat: add zustand state management for user data * feat: add Navbar Login Button * refactor: move state management logic in selectors.ts, UI logic in /hooks * fix: update package.json and pnpm-lock.yaml * Refactor: delete unuse selectors, fix syntax error. * feats: using promise for async * Frontend deploy adjust (#22) * adjust dockerfile, nextjs config for deployment * update compose.tml and dockerfile * change base image to alpine & remove sharp from pnpm dependencies * rename icon filename & adjust dockerfile * Frontend CICD (#23) * testing ghcr pushing and tag * testing latest tag on image * testing frontend cd * add job to dev-frontend * modify ssh command * modify ssh command * modify ssh command * modify ssh command * update ssh * update ssh * update ssh * update ssh * update ssh * update ssh * test vpn connection * add wireguard config to secret * add resolve conf to apt install * change another wireguard connection method * use watchtower instead of ssh deployment * update workflow for watch tower * Feature/tailwind config (#25) * feat: config tailwind typography * refactor: simplify tailwind typography classname * feat: config design system colors * fix: fix tailwind primary color wrong color code * Feature/upload icons (#26) * feat: upload svg icons * feature: finish reusable icon components * feat: uploads svg files: bookmark, bookmark-1, plus * chore: add new three svgs to iconsMap * Feature/basic components (#27) * feature: basic UI components * chore: fix some syntax and type problems. * Refactor basic components (#29) * refactor button Signed-off-by: owenowenisme <[email protected]> * remove React.FC from button component Signed-off-by: owenowenisme <[email protected]> * refactor Checkbox Signed-off-by: owenowenisme <[email protected]> * refactor MenuItem Signed-off-by: owenowenisme <[email protected]> * add Classname to Menuitem Signed-off-by: owenowenisme <[email protected]> * add onClick Event to MenuItem Signed-off-by: owenowenisme <[email protected]> * refactor textArea Signed-off-by: owenowenisme <[email protected]> * refactor icon Signed-off-by: owenowenisme <[email protected]> --------- Signed-off-by: owenowenisme <[email protected]> * Refactor navbar (#30) * refactor axios and finish usericon with login Signed-off-by: owenowenisme <[email protected]> * refactor api dir location, svg location, zustand location and usertype Signed-off-by: owenowenisme <[email protected]> * finish global Nav waiting for icon Signed-off-by: owenowenisme <[email protected]> * update baseurl, cn classValue Signed-off-by: owenowenisme <[email protected]> * fix logout loop Signed-off-by: owenowenisme <[email protected]> * update icon Signed-off-by: owenowenisme <[email protected]> --------- Signed-off-by: owenowenisme <[email protected]> * added user setting page, enable profile update (#31) Signed-off-by: owenowenisme <[email protected]> --------- Signed-off-by: owenowenisme <[email protected]> Co-authored-by: Max042004 <[email protected]> Co-authored-by: Eroffff <[email protected]> Co-authored-by: d-ben-b <[email protected]> Co-authored-by: Max042004 <[email protected]>
Summary
架設測試站cicd
原本要使用ssh 進去機器部署
但由於我們的機器是在private network之中
因此需要用wireguard來連接tunnel並進入
但經過測試之後
不知為何 wireguard在github action 上會卡住 無法解決
因此目前先使用watchtower 監聽image 變化 (interval : 10s)
待之後scale up後再考量其他做法
因此目前github action只有CI部分 CD 部分 由 watchtower 負責
How Has This Been Tested?
附上如何測試的以及測試結果
Task:
https://ncku.atlassian.net/browse/NCKU-79
Summary by CodeRabbit
New Features
Chores