Skip to content

Conversation

@hamo-o
Copy link
Contributor

@hamo-o hamo-o commented Jun 20, 2025

#️⃣ 연관된 이슈>

📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

프론트엔드 client를 빌드해서 server에서 실행하기 위한 이미지를 만드는 스크립트를 작성했습니다.

  • server가 하나밖에 없지만, 확장성을 고려하는 게 좋을 것 같아 package.json도 복사하고 start 명령어 추가해줬습니다.
  • 폴더구조는 동권님이 주신 스크립트에서 변형하여 최종적으로 client server package.json 요렇게 나오게 조정했습니다.

🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

  • 테스트가 실패해서 옵션 조정했습니다. (참고: https://github.com/orgs/pnpm/discussions/3938)
  • 도커 레지스트리 세팅해서 cd 스크립트도 수정해야 할 것 같은데 우선 올려봅니다... 수정해야 할 부분 있으시면 직접 커밋하셔두 돼요

Summary by CodeRabbit

  • Chores

    • Updated continuous deployment and CI workflows to use the latest version of the pnpm package manager.
    • Increased the minimum required pnpm version to 10.0.0 for the frontend project.
    • Enhanced workspace configuration for improved package management and dependency synchronization.
    • Introduced a Dockerfile to streamline frontend builds and deployments.
  • New Features

    • Added a unified start script for the frontend project.
  • Refactor

    • Updated server and client development scripts for improved workflow and clarity.

@coderabbitai
Copy link

coderabbitai bot commented Jun 20, 2025

"""

Walkthrough

This update revises frontend development and deployment workflows, including upgrading pnpm to version 10 in CI/CD pipelines, introducing a new multi-stage Dockerfile, adjusting npm scripts for client and server apps, updating workspace configuration, and raising the minimum required pnpm version in the project configuration.

Changes

Files/Group Change Summary
.github/workflows/fe-cd.yml, .github/workflows/fe-ci.yml Updated GitHub Actions to use pnpm setup action version 10 instead of version 9.
frontend/Dockerfile Added a new multi-stage Dockerfile for frontend build and deployment using Node.js 20 and pnpm.
frontend/apps/client/package.json Modified "dev" script to run pnpm --filter server dev instead of pnpm --filter server start.
frontend/apps/server/package.json Split "start" script into "dev" (watch mode) and "start" (run built server).
frontend/package.json Added "start" script (pnpm -r start) and updated pnpm engine requirement to >=10.0.0.
frontend/pnpm-workspace.yaml Added syncInjectedDepsAfterScripts: ["build"] key to workspace configuration.

Sequence Diagram(s)

sequenceDiagram
    participant Developer
    participant GitHub Actions
    participant Docker
    participant pnpm
    participant Server

    Developer->>GitHub Actions: Push code / PR
    GitHub Actions->>pnpm: Setup pnpm@10
    GitHub Actions->>Docker: Build Docker image (multi-stage)
    Docker->>pnpm: Install dependencies, build, deploy
    Docker->>Server: Start server with built artifacts
Loading

Possibly related PRs

Suggested labels

🔮 ALL

Poem

In the meadow of code, a rabbit hops with glee,
pnpm ten now leads the spree!
Docker builds with nimble might,
Scripts split for day and night.
Workspace syncs with gentle cheer—
Hooray for changes, summer’s here!
🐇✨
"""


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4ff3b54 and 072258c.

📒 Files selected for processing (2)
  • frontend/Dockerfile (1 hunks)
  • frontend/pnpm-workspace.yaml (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • frontend/pnpm-workspace.yaml
  • frontend/Dockerfile

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (3)
frontend/Dockerfile (3)

1-3: Pinning pnpm for reproducible builds.

Using pnpm@latest-10 may pull in different patch versions over time. Consider locking to a specific version (e.g., [email protected]) to ensure deterministic Docker layers.


6-9: Optimize cache: include package.json before pnpm fetch.

For better layer caching, copy package.json with your lockfiles:

COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./

This ensures pnpm fetch -r invalidates only when dependencies change.


11-14: Leverage offline install after fetching modules.

Since you prefetch with pnpm fetch -r, run the install in offline mode:

RUN pnpm install -r --offline

This will use the prefetched cache and speed up CI builds.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ac77e68 and 4ff3b54.

⛔ Files ignored due to path filters (1)
  • frontend/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • .github/workflows/fe-cd.yml (1 hunks)
  • .github/workflows/fe-ci.yml (1 hunks)
  • frontend/Dockerfile (1 hunks)
  • frontend/apps/client/package.json (1 hunks)
  • frontend/apps/server/package.json (1 hunks)
  • frontend/package.json (1 hunks)
  • frontend/pnpm-workspace.yaml (1 hunks)
🧰 Additional context used
🧠 Learnings (1)
frontend/apps/client/package.json (1)
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#411
File: frontend/apps/client/package.json:7-7
Timestamp: 2025-05-27T17:33:56.448Z
Learning: In the Team4-enDolphin project, the server uses Vite as middleware in development mode, so the `dev` script in frontend/apps/client/package.json only needs to start the server (`pnpm --filter server start`) rather than running separate Vite dev server and server processes.
🔇 Additional comments (8)
frontend/pnpm-workspace.yaml (3)

4-4: Add config directory to workspace packages.
Including configs/* ensures shared configurations are included in the workspace.


5-5: Enable workspace package injection.
Setting injectWorkspacePackages: true allows local packages to be symlinked automatically.


6-7: Synchronize injected deps after the build.
The syncInjectedDepsAfterScripts key will re-link dependencies post-build, matching PNPM workspace enhancements.

.github/workflows/fe-ci.yml (1)

35-38: Upgrade pnpm setup action to v10.
This aligns with the raised PNPM engine requirement in frontend/package.json.

.github/workflows/fe-cd.yml (1)

27-30: Upgrade pnpm setup action to v10.
Consistent with CI and workspace engine bump for PNPM.

frontend/apps/client/package.json (1)

7-7: Verify dev script in server package.
Ensure frontend/apps/server/package.json defines a dev script to match this filter invocation.

frontend/package.json (2)

7-9: Validate recursive start script.
Confirm that all workspace packages expose a start script so pnpm -r start boots correctly.


15-16: Bump PNPM engine requirement to >=10.0.0.
Matches CI/CD workflows and aligns local development with action versions.

Comment on lines +9 to +10
"dev": "cross-env NODE_ENV=start tsup --watch",
"start": "node index.js"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Missing cross-env dependency and non-standard NODE_ENV values.

You reference cross-env in both scripts but haven’t installed it—CI/build will break. Also, setting NODE_ENV=start is unconventional; use development for dev and production for start.

Apply this diff:

 "scripts": {
-  "dev": "cross-env NODE_ENV=start tsup --watch",
+  "dev": "cross-env NODE_ENV=development tsup --watch",
-  "start": "node index.js"
+  "start": "cross-env NODE_ENV=production node index.js"
 },
 "devDependencies": {
+  "cross-env": "^7.0.3",
   "@types/express": "^5.0.2",
   "typescript": "^5.6.2",
   "@endolphin/tsup-config": "workspace:^",
   "@endolphin/vitest-config": "workspace:^"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"dev": "cross-env NODE_ENV=start tsup --watch",
"start": "node index.js"
"scripts": {
- "dev": "cross-env NODE_ENV=start tsup --watch",
+ "dev": "cross-env NODE_ENV=development tsup --watch",
- "start": "node index.js"
+ "start": "cross-env NODE_ENV=production node index.js"
},
"devDependencies": {
+ "cross-env": "^7.0.3",
"@types/express": "^5.0.2",
"typescript": "^5.6.2",
"@endolphin/tsup-config": "workspace:^",
"@endolphin/vitest-config": "workspace:^"
}
🤖 Prompt for AI Agents
In frontend/apps/server/package.json around lines 9 to 10, the scripts use
cross-env without it being listed as a dependency, which will cause build
failures. Add cross-env to the devDependencies in package.json. Also, change the
NODE_ENV value in the "dev" script from "start" to "development" and in the
"start" script from the default to "production" to follow standard environment
naming conventions.

Comment on lines 16 to 17
RUN pnpm --filter @endolphin/server --prod deploy ./build/server
COPY ./apps/client/dist ./build/client
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Invalid deploy target for @endolphin/server.

There’s no deploy script in frontend/apps/server/package.json, so this command will fail. Did you mean:

pnpm --filter @endolphin/server run build

or another custom script?

🤖 Prompt for AI Agents
In frontend/Dockerfile at lines 16-17, the RUN command uses an invalid `deploy`
script for @endolphin/server, which does not exist in its package.json. Replace
`pnpm --filter @endolphin/server --prod deploy ./build/server` with a valid
script such as `pnpm --filter @endolphin/server run build` or another existing
custom script defined in the package.json to ensure the command succeeds.

Comment on lines +20 to +28
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/build/client ./client
COPY --from=builder /app/build/server/dist ./server
COPY --from=builder /app/build/server/package.json ./server/package.json
COPY --from=builder /app/build/server/node_modules ./server/node_modules

EXPOSE 5173
ENV NODE_ENV=production
CMD ["pnpm", "start"] No newline at end of file
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Final stage missing runtime dependencies and incorrect entrypoint.

You only copy server’s node_modules and the root package.json, but don’t install production dependencies for the root or client. Moreover, CMD ["pnpm","start"] relies on workspace scripts that aren’t available here. Either:

  • Copy and install all production deps in this stage, or
  • Change CMD to directly run your server (e.g., node server/index.js) and serve static assets.

Without this, the container will error on startup.

🤖 Prompt for AI Agents
In frontend/Dockerfile lines 20 to 28, the final stage only copies server
node_modules and package.json but does not install production dependencies for
the root or client, and the CMD uses "pnpm start" which depends on workspace
scripts not present in the container. To fix this, either copy and install all
necessary production dependencies in this stage or change the CMD to directly
run the server entry point (e.g., "node server/index.js") and serve static
assets, ensuring the container has all runtime dependencies and a valid startup
command.

Copy link
Contributor

@kwon204 kwon204 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다! 수정할 건 없어보이는데 cd 코드는 레지스트리 같은 게 정해지면 수정할 계획인가요??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants