하데스에서 온 배포
I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have it, I’ll translate it into Korean while preserving the original formatting and markdown.
소개
나는 모두가 Stack Overflow를 사용하던 시절 사람이다 😆. 이것은 내 포트폴리오 버전 2를 만들고, 처음으로 Google Cloud에 배포하려고 했을 때 뒤따른 혼란, 그리고 결국 라이브로 만든 이야기를 담고 있다.
첫 번째 배포 실패
Dockerfile을 Google Cloud 프로젝트에 만들고 나서 다음 오류가 발생했습니다:
ERROR:
(gcloud.run.services.update)The user‑provided container failed to start and listen on the port defined by thePORT=8080environment variable within the allocated timeout. This can happen when the container port is misconfigured or if the timeout is too short. The health‑check timeout can be extended. Logs for this revision might contain more information.
그 오류는 내 인생의 5 시간을 앗아갔고, 간단한 로깅의 중요성을 깨닫게 해주었습니다.
Why I Started This Challenge
My significant other keeps nudging me to do dev challenges, and I’ve been wanting to rebuild my website in React with a three.js background. Since this is a Google AI challenge, I decided to dive deep into the stack.
Tools I Used
- Antigravity – a glorified VS Code with Google AI Studio built‑in.
- Google Gemini – for troubleshooting and code generation.
First Attempt with Antigravity
I gave Antigravity the following prompt:
“Download my website from https://www.madrigal.design, and redesign the website into a react.js stack. Clean up the website and modernize the code.”
The result was… 끔찍했습니다. I didn’t even have screenshots because it was that bad.
두 번째 시도 – 더 나은 시작점
I ran the prompt again, this time inside the folder that already contained my original code. Antigravity generated something almost usable right off the bat:
- It first built the project in vanilla JavaScript and CSS – looked nice, but I wanted React.
- I reprompted it to convert the project to React, and the output was impressive, though a bit bloated. I later trimmed the excess.
Three.js 배경 추가
three.js를 제대로 배울 시간이 없었지만, 최소한으로 유지하면서 물결치는 색상의 파티클‑웨이브 배경을 원했습니다. 사이트에 맞게 색상을 조정하기 위해 몇 차례 프롬프트를 입력한 결과, AI가 놀라울 정도로 간결한 구현을 만들어냈습니다.
또한 AI를 활용해 “Creations & Projects” 섹션을 캐러셀로 변환했으며, 이를 통해 three.js가 어떻게 통합되는지 빠르게 배울 수 있었습니다.
약간의 혼돈 (선택 기능)
경고!
시간이 되면 “Stop Chaos!” 버튼을 누르세요.
재미로 숨겨진 “chaos” 버튼을 추가했습니다.
두 번째 배포 실패
Google Cloud를 설정한 뒤, GitHub 지속적 배포를 활성화하여 새로운 커밋마다 자동으로 새 배포가 트리거되도록 했습니다.
다시 한 번 이전과 같은 오류가 발생했습니다:
ERROR:
(gcloud.run.services.update)사용자가 제공한 컨테이너가 시작되지 않았으며PORT=8080로 정의된 포트를 수신하지 못했습니다 …
AI에 대한 (오)신뢰
Google 제품이라면 Google Cloud 문제를 빠르게 해결할 수 있을 것이라 기대하며 Google Gemini에 도움을 요청했습니다. 여러 차례 프롬프트를 시도하고 13번의 배포가 실패한 뒤, 결국 48시간 동안 쉬었습니다.
로그를 사용한 디버깅
제가 돌아왔을 때, 파트너와 함께 Cloud Run 로그를 검토했습니다. Vite가 잘못 빌드되는 문제가 있다는 것을 발견했는데, 이는 AI가 놓친 부분이었습니다.
- Vite 빌드 오류가 수정되었습니다.
- Dockerfile에서
serve가 호출되는 방식도 잘못되었습니다.
이러한 문제들을 수정한 후, 배포가 최종적으로 성공했습니다.
최종 성공
- 서비스가
PORT=8080에서 수신을 시작했습니다. - Google Cloud의 도메인 매핑을 통해 Cloud Run 서비스에 서브‑도메인을 매핑했습니다.
DNS가 전파된 후, 새로운 사이트가 라이브되었습니다.
주요 내용
- 로그를 먼저 확인하세요. 로그는 종종 근본 원인을 직접 가리킵니다.
- AI는 도움이 되는 조수, 디버깅 기본을 대체하지는 않습니다.
- 반복 프롬프트를 사용하면 훌륭한 코드를 만들 수 있지만, 정리해야 할 불필요한 부분이 생길 수 있습니다.
- 컨테이너 포트 설정은 Cloud Run 실패의 일반적인 원인입니다 – 항상
PORT환경 변수로 제공된 포트에서 애플리케이션이 수신 대기하는지 확인하세요.
마무리 생각
이 도전은 AI를 책임감 있게 사용할 때 학습과 코딩을 가속화할 수 있다는 것을 일깨워 주었습니다. 또한 신뢰하되 검증하라는 영원한 조언을 다시 한 번 강조했는데, 특히 로그가 주의를 외칠 때 더욱 그렇습니다.
행복한 코딩 되세요, 다음 배포가 순조롭길 바랍니다!
I needed this update for myself, and it was enjoyable to play with new tools, new stacks, and do something different. Antigravity was a fun, juiced‑up version of VS Code to play with, and being able to produce a website with Three.js inside my editor in the stack I wanted was nice to try, see, and learn. I think the Three.js background is what really stood out to me in this rebuild. Thanks to the DEV community and their competitions for this.