DEV Community

Cover image for ⚡ From Raw Sockets to Serverless: Reimagining the Architect's Portfolio
donghun lee (David Lee)
donghun lee (David Lee)

Posted on

⚡ From Raw Sockets to Serverless: Reimagining the Architect's Portfolio

#devchallenge #googleaichallenge #portfolio #webdev

Hello DEV Community! 👋

I am a Senior .NET & C++ Architect with a deep interest in IoT networks and AI technologies. For the "New Year, New You Portfolio Challenge", I decided to refresh my online presence using a modern web stack and deploy it on Google Cloud Run to leverage its serverless container capabilities.

Here is the story of my journey from bare-metal memory management to mastering the container lifecycle.

🎯 The Motivation: Making the Invisible, Visible

As a backend architect, my career has been defined by things that are often invisible. I’ve spent years optimizing raw sockets, architecting IoT networks, and tuning low-level system performance. While this work is critical, it lacks a "visual" interface.

"I wanted to build a portfolio that wasn't just a static CV, but a living proof of concept that combines my core engineering values—speed, control, and efficiency—with modern web technologies."

🌐 The Result: Minimalist & Fast

Before diving into the code, here is the live result running on a serverless container.

(If the preview doesn't load, check it out here: Live Demo Link)

🛠️ The Stack: A C++ Developer’s Approach

When a system architect chooses a frontend stack, "hype" is irrelevant. Performance is everything. I chose a stack that mirrors the efficiency I strive for in C++.

  • ⚛️ Frontend: React 19 & TypeScript
    • Chosen for type safety and modern UI patterns.
  • ⚡ Build Tool: esbuild
    • I deliberately chose esbuild over Webpack. Why? Because it's written in Go and compiles with near-native speed. As someone accustomed to C++ compilation times, waiting for JavaScript bundlers is painful. esbuild brings that raw speed back.
  • 🖥️ Server: serve
    • A lightweight static file serving handler for production.
  • ☁️ Infrastructure: Docker & Google Cloud Run
    • The star of the show. It allows me to deploy stateless containers that scale to zero.

🐛 The Challenge: The "Stdin" Trap

The most interesting part of this project wasn't the React code, but the Container Lifecycle.

During local development, I used esbuild --serve. It worked perfectly on my machine. However, when I deployed to Cloud Run, the container would crash immediately upon startup.

The Diagnosis 🔍

Cloud Run environments are non-interactive. My dev-server command was listening to stdin (waiting for user input to exit), but in the serverless environment, the input stream is closed instantly. The process interpreted this as a signal to terminate.

The Fix 🛠️

I had to re-architect the entry point:

  1. Separation: I separated the build process (esbuild) from the runtime process.
  2. Daemon Process: I switched to serve for the production environment, which is designed to run as a daemon process rather than an interactive shell.
  3. Dynamic Port: I mapped the container's PORT environment variable dynamically to ensure the health check probes could reach the application.

This troubleshooting process reminded me that whether it's an IoT device or a Cloud container, understanding the runtime environment is paramount.

☁️ Why Google Cloud Run?

For a personal portfolio, running a dedicated VM (EC2) is a waste of resources, and simple static hosting (GitHub Pages) lacks the backend flexibility I plan to add later.

Google Cloud Run was the sweet spot because:

  • 📦 Container-based: I could simply package my app with Docker, ensuring it runs exactly the same locally and in production.
  • 📉 Scale to Zero: It incurs zero cost when no one is visiting the site, which is ideal for a personal portfolio.
  • 🔒 HTTPS Default: It provides a secure URL automatically without complex SSL configurations.
  • 🔮 Future Proof: It’s ready for the Python/AI backend services I plan to attach next.

🚀 What's Next?

This portfolio is just the foundation. My roadmap involves integrating my expertise in AI:

  • 🤖 RAG Agent Integration: I plan to embed a small LLM agent that can answer questions about my previous projects using RAG (Retrieval-Augmented Generation).
  • 📝 Tech Blog: A section dedicated to deep dives into .NET architecture and Blazor Hybrid patterns.

Building this portfolio was a refreshing exercise in applying low-level optimization mindsets to high-level cloud infrastructure.

Happy Coding! 🚀

🔗 Links

Top comments (0)