"Web Development to Deployment and Operations (1/8) — Why Local Success Breaks in Production"

The first real operational wall for beginners is usually not code quality. It is the gap between a controlled local experiment and an uncontrolled real-world system.

Key Takeaways

  • Local development succeeds under conditions the developer already understands, while production runs inside a larger system of users, servers, networks, and security rules.
  • The same code can behave differently in production because environment variables, data state, file systems, external APIs, and deployment structure are different.
  • Saying "it works on my machine" only proves that implementation started correctly. It does not prove the system is operationally ready.
  • Docker, API design, Supabase boundaries, build tooling, deployment, and HTTPS all exist partly to reduce this local-versus-production gap.

Local success and production success are not the same question

Local development usually happens in a small environment one person can control. The Node version is known, the .env file was created by hand, and the database often contains only simple sample data. When something breaks, the terminal is right there and the developer can fix it immediately.

Production is different. The application runs on another machine, permissions are separated, multiple users arrive at the same time, and every request crosses a network boundary. External APIs can slow down or fail, and the stored data already contains history, edge cases, and inconsistencies.

That is why local success is mostly an implementation check, while production success is a system-fit check. Production asks whether the code survives real conditions, not just whether the logic compiles and runs once.

The first major split is the execution environment

One of the earliest production failures comes from the runtime environment itself. A project may work locally after npm install, but the server could be using a different Node version. The local machine may be macOS while production is Linux. A path that behaves loosely on one file system may be handled strictly on another.

These differences look small until they are not. A package may install native binaries differently by operating system. A build tool may depend on a specific runtime version. A single missing environment variable can stop the whole application from booting.

This is why Docker becomes important so early. Docker is not just a convenience for deployment. It is a control mechanism for saying, "Run this application under the same conditions everywhere." Part 2 of this series picks up exactly at that point.

Real data is much messier than local sample data

Beginners often test features against clean, small, predictable data. That is enough to confirm that the feature basically works, but production data is rarely clean. It is incomplete, duplicated, historically inconsistent, and full of input patterns that were never considered during a first build.

A feature that works well with three local users may slow down badly with tens of thousands of rows. A form that looked safe during testing may encounter null values from older records. A button that one developer clicked once may be triggered repeatedly by many users at the same time.

Many production problems do not begin with "the code is wrong." They begin with "the data reflects reality." That is also why data-layer tools such as Supabase must be understood through preprocessing, postprocessing, and permission boundaries, not only through CRUD operations.

Networks and external dependencies become visible in production

Local function calls usually feel immediate. In production, the browser, CDN, proxy, backend, database, and external services are separated by real network boundaries. Once that happens, latency, timeouts, retries, and authentication failures become part of the application behavior.

This is where many beginners learn that "the API call succeeded" is not the same thing as "the user experience is stable." An LLM API might respond too slowly. A token may expire. A third-party dependency may become more expensive than expected. A tool-selection layer such as MCP exists partly to make those external dependencies more organized and more governable.

Production is slower than local development, fails more often, and forces those failures into the design itself.

Security and permissions move to the center

During local development, it is easy to do everything with broad permissions. In production, access control becomes part of the system design. Database secrets, OAuth tokens, service accounts, deployment permissions, and domain settings must be separated.

This matters for more than compliance. Permission separation reduces operational mistakes. A secret that should stay on the server might be exposed to the browser. A deployment process may accidentally leak a production credential into the wrong environment.

Understanding operations means understanding that architecture is shaped not only by code and features, but also by who is allowed to do what and where.

What good development prepares before production

Good development does not stop when the feature works locally. It reduces the boundaries most likely to fail later.

  • Fix the execution environment.
  • Separate environment variables and secrets.
  • Define clean input and output boundaries for data.
  • Treat external API failure as a normal scenario.
  • Make build and deployment reproducible.

Those five items are not abstract DevOps slogans. They are the minimum conditions for moving beyond an app that only works on the original machine.

What this series covers next

This first article establishes the operating problem. Once the local-versus-production gap is clear, the rest of the stack starts to make more sense.

Part 2 explains Docker as environment control. Part 3 moves into API usage, MCP, and vibe-coding guardrails. Part 4 uses Supabase to show why CRUD is only one piece of a larger data boundary. The later parts continue through OAuth and SSO, build and bundling, deployment structure with nginx, and finally HTTPS, domains, and monitoring.

Operational learning is not mostly about memorizing tool names. It is about understanding why each boundary appears in the first place.

References

  • Docker Docs, Docker overview — https://docs.docker.com/get-started/docker-overview/
  • Next.js Docs, How to deploy your Next.js application — https://nextjs.org/docs/app/building-your-application/deploying
  • AWS Docs, Get started with Amazon EC2 — https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html

This is Part 1 of the Web Development to Deployment and Operations series.

Series overview: Series index

๋Œ“๊ธ€

๋Œ“๊ธ€ ์“ฐ๊ธฐ

์ด ๋ธ”๋กœ๊ทธ์˜ ์ธ๊ธฐ ๊ฒŒ์‹œ๋ฌผ

Agent Memory Engine (2/10) — Building an AI Agent Memory System with SQLite Alone

← 1/10 SQLite Memory Engine f… ๐Ÿ“š Series Index 3/10 memcore Completed → A memory engine that runs without daemons, without dependencies, anywhere ํ•ต์‹ฌ ์š”์•ฝ This post covers how to design an AI agent memory engine (memcore) on a single-file SQLite backend. - Structure: 25 modules, ~6,464 lines, 22 DB tables - Principles: no daemon, single-file portability, no required external dependencies, host-agnostic - Core techniques: 4-layer hybrid search (topic · vector · FTS5 · LIKE), U-tag dialectic-based confidence evolution, ingestion-layer bias rejection rules What This Post Covers One approach to building AI agent memory without a server or cloud vector DB. Specifically: (1) the limitations of text-file-based memory, (2) vector DB alternatives compared and selection criteria, (3) how to layer search tiers, (4) how to evolve confidence scores over time, and (5) how to block biased memory accumulation at the ingestion stage. Design Principles: Why Single-File SQLite Text-file-based ...
Read more »

"ML Foundations (9/9) — PyTorch vs TensorFlow, and the Road to Local LLMs"

์ด๋ฏธ์ง€
← 8/9 Deep Learning Architec… ๐Ÿ“š Series Index (series end) The final part. So far we've focused on models. Now we focus on the tools that actually run them . We'll lay out the philosophical difference between PyTorch and TensorFlow, and trace how Hugging Face transformers , llama.cpp , MLX , and Ollama built the bridge to running large language models on your own machine. By the end you should have the full mental model of "download a pretrained LLM and serve it locally." 0. Learning Objectives Explain the eager-vs-graph difference between PyTorch and TensorFlow. Explain, in graph terms, how autograd automates the backward pass. Use Hugging Face transformers ' AutoModel , AutoTokenizer , and pipeline abstractions. Describe llama.cpp's GGUF quantization, INT4 inference, and CPU-first flow. Describe Apple MLX's use of unified memory and how it differs from PyTorch. Run a local LLM with Ollama and call it through an OpenAI-compatible API. ...
Read more »

"RAG Core Study (14/26) — Evaluation Sets with RAGAS & DeepEval"

์ด๋ฏธ์ง€
Series overview: Series index ๐Ÿ“š Series Index Without an evaluation set, every RAG improvement is a story, not evidence. RAG systems fail in more than one place: retrieval, context selection, answer generation, and grounding. That means "looks better" is not a metric. Part 14 explains how to build a golden dataset , how RAGAS and DeepEval fit into the workflow, and why teams must separate retrieval quality from answer quality if they want tuning decisions to hold up. 0. Prerequisites Part 13 reranking — system quality now depends on multi-stage ranking. Part 1 grounding — a correct-looking answer is not enough. Part 12 Hybrid — multiple retrieval settings need comparison on fixed data. 1. Learning Objectives Build a small but useful golden dataset for RAG. Distinguish retrieval metrics from answer metrics . Use RAGAS and DeepEval in the right roles. Avoid the common traps in judge-model-based evaluation. 2. ํ•ต์‹ฌ ์š”์•ฝ An evaluation set for RAG is ...
Read more »

"ML Foundations (8/9) — Deep Learning Architectures: CNN, RNN, Attention"

์ด๋ฏธ์ง€
← 7/9 Deep Learning Training ๐Ÿ“š Series Index 9/9 PyTorch vs TensorFlow → What did we keep adding on top of an MLP? Vision went CNN, sequences went RNN/LSTM, and eventually both converged on Attention and the Transformer. Each architecture is easier to remember if you read it as what it gave up to gain something else . This part is the one-line summary of the decisive inflection points: LeNet → AlexNet → ResNet → LSTM → Attention → Transformer. 0. Learning Objectives Explain why CNN's convolution, pooling, and weight sharing match images so well. Trace what got unblocked from LeNet → AlexNet → VGG → ResNet as depth grew. State BPTT for RNNs and the vanishing/exploding gradient problem. Write the LSTM gate equations (forget, input, output) with intuition. Write the attention formula in query/key/value form and the scaled dot-product variant. State the precise reasons Transformers replaced RNNs (parallelism + long-range dependencies). 1. ํ•ต์‹ฌ ์š”์•ฝ CNN : weight sharin...
Read more »

"ML Foundations (7/9) — Deep Learning Training: Optimizers, Regularization, Initialization"

← 6/9 Neural Networks ๐Ÿ“š Series Index 8/9 Deep Learning Architec… → Building an MLP, as we did in Part 6, is not the same as getting it to train well . The right optimizer, regularization, initialization, and learning rate — when these line up, deep networks converge. When they don't, the network refuses to learn at all. This part is the catalog of those crafts, with formulas, paper citations, and code in one place. 0. Learning Objectives Compare and write the update rules for SGD, Momentum, Nesterov, and Adam. Explain how Dropout, BatchNorm, and LayerNorm work and where they belong in a model. Derive the variance formulas for Xavier and He initialization and match them to activations. Implement step, cosine, and warmup learning-rate schedules in PyTorch. Explain why gradient clipping is effectively required for RNNs and Transformers. Diagnose the most common training failures (NaN, plateau, overfitting) and apply first-line fixes. 1. ํ•ต์‹ฌ ์š”์•ฝ SGD : \(w \leftarro...
Read more »

OpenClaw to Hermes Migration (2/13) — What to Preserve, Partially Port, or Discard

← 1/13 Current Structure Inve… ๐Ÿ“š Series Index 3/13 What Moves to Hermes → A code review record classifying operational scripts into three tiers: preserve, partial-preserve, and discard. What This Post Covers An asset classification framework (preserve / partial-preserve / discard) for migrating a legacy agent system to a successor A concrete case applying the Strangler Fig + Subset Migration strategy to a memory pipeline Classification results evaluated across LOC, external dependencies, and replaceability axes A method for slimming down a bloated single file (1,310 LOC) using the migration as a natural entry point Problem Definition: Port Everything or Cut Deep? The OpenClaw inventory comprises multiple agents, multiple scheduler/daemon processes, and multiple operational scripts. When moving to the successor system, Hermes, the choice is not binary. A full port carries accumulated technical debt along with it; a minimal port discards hard-won domain logic. Code-revie...
Read more »

AI Agents I Built (5/7) — Building an Automated Blogger API Publishing System

← 4/7 My Life Organizer Agent ๐Ÿ“š Series Index 6/7 Dual → Designing a Markdown-Based Auto-Publish Pipeline with Blogger API v3 + OAuth 2.0 Key Summary Blogger API v3 + OAuth 2.0 enables a pipeline that converts Markdown files into publishable HTML posts blogger_publish.py handles the full flow — frontmatter parsing → body cleanup → HTML conversion → CSS injection → API post — in a single script For bulk publishing, quota management (delay, retry, TOC suppression) is the critical design concern Platform Selection Criteria API access is mandatory for AI agent-driven content publishing. A comparison of platforms: Platform API Cost AdSense Decision WordPress.com REST API Paid plan required Paid only Cost overhead Ghost REST API Self-hosted or paid Manual setup Ops overhead Blogger v3 API Free Native integration Adopted Blogger is free, exposes a REST API, and integrates natively with AdSense. For personal blog automation, this combination i...
Read more »