# 面向非开发人员的 Web 开发基础概念 > 我用 AI 编写了代码，但如何将其发布到网上呢？ > > 本文旨在帮助没有开发经验的人了解“部署”流程。 --- ## 目录 1. [整体结构概览](#1-整体结构概览) 2. [客户端和服务器](#2-客户端和服务器) 3. [前端和后端](#3-前端和后端) 4. [数据库](#4-数据库) 5. [文件存储](#5-文件存储) 6. [网络和HTTPS](#6-网络和HTTPS) 7. [SSR和CSR](#7-SSR和CSR) 8. [什么是基础设施？](#8-什么是基础设施？) 9. [什么是部署？](#9-什么是部署？) 10. [Vercel - 轻松部署](#10-Vercel---轻松部署) --- ## 1. 整体结构概览 Web 服务类似于**餐厅**。让我们先从整体上看起。 ```mermaid flowchart TB subgraph Customer["🏠 손님 (사용자)"] Browser["📱 브라우저<br/>(크롬, 사파리)"]
# 面向非开发人员的 Web 开发基础概念 > 我用 AI 编写了代码，但如何将其发布到网上呢？ > > 本文旨在帮助没有开发经验的人了解“部署”流程。 --- ## 目录 1. [整体结构概览](#1-整体结构概览) 2. [客户端和服务器](#2-客户端和服务器) 3. [前端和后端](#3-前端和后端) 4. [数据库](#4-数据库) 5. [文件存储](#5-文件存储) 6. [网络和HTTPS](#6-网络和HTTPS) 7. [SSR和CSR](#7-SSR和CSR) 8. [什么是基础设施？](#8-什么是基础设施？) 9. [什么是部署？](#9-什么是部署？) 10. [Vercel - 轻松部署](#10-Vercel---轻松部署) --- ## 1. 整体结构概览 Web 服务类似于**餐厅**。让我们先从整体上看起。 ```mermaid flowchart TB subgraph Customer["🏠 손님 (사용자)"] Browser["📱 브라우저<br/>(크롬, 사파리)"]
