LESSON 06 · 幕后之旅 / SHIP IT
跑在你电脑上的网站，还只是个秘密。
情景
网站在你电脑上跑得好好的，朋友让你发链接，你发过去的却是一串 localhost——只有你自己打得开。好不容易部署上线，把链接丢进微信，卡片上只有干巴巴一行字，连张图都没有。
本课 16 个概念 · 约 4 分钟
你写的代码还不能直接见客，先得打包、启动、监听。
把源代码编译打包成可部署文件的过程。
跟 AI 这么说
别直接把源代码放上去跑，先执行构建把源码打包成可部署的文件，并告诉我构建产物在哪个目录、里面都有什么。
用于启动项目的配置文件或命令。
跟 AI 这么说
把启动命令写进 start 脚本里：以后无论在自己电脑还是服务器上，一条命令就能把服务起起来，不靠记忆里的那串命令。
服务器监听的通信端口号。
跟 AI 这么说
服务要监听一个端口，比如 3000。帮我确认这个端口没被别的程序占用，线上环境的端口用环境变量指定，别写死在代码里。
托管网站并处理请求的计算机程序。
跟 AI 这么说
部署之后确认服务真的在跑：能监听端口、能响应请求，进程挂了能自动拉起来，别要我自己盯着终端。
从一台电脑到一台昼夜不关机的远程机器。
把项目发布到服务器供用户访问的过程。
跟 AI 这么说
现在把项目部署上线：把构建产物传到服务器、启动服务、开放端口，部署完成后把能公开访问的网址发给我。
如 Vercel、Netlify、GitHub Pages，托管前端项目。
跟 AI 这么说
我不想自己管服务器，帮我挑一个部署平台（比如 Vercel），把项目接上：连上代码仓库，以后每次推送就自动构建上线。
不写进代码的配置信息。
跟 AI 这么说
数据库地址、密钥这类配置不要写死在代码里，放进环境变量。告诉我这个部署平台的界面上在哪配置它们，线上运行时怎么读到。
持续集成与持续部署的自动化流程。
跟 AI 这么说
配一条 CI/CD 流水线：每次我把代码推送到仓库，就自动跑检查、构建、部署上线，中途任何一步失败都停下并告诉我原因。
一串 IP 记不住，给它起个名字，再把名字指过去。
网站的地址标识，例如 vibe-hub.org。
跟 AI 这么说
给网站注册一个域名：短、好记、和品牌相关，比如 vibe-hub.org。先查它有没有被注册，再给几个备选。
把域名转换成服务器 IP 地址的过程。
跟 AI 这么说
把域名解析到服务器：添加一条 A 记录指向服务器 IP，等解析生效后访问域名就能打开网站，告诉我怎么验证生效了。
网页在网上的唯一地址。
跟 AI 这么说
检查全站链接规不规范：统一用 HTTPS，地址语义化（比如 /pricing 而不是 /page?id=3），分享出去的链接要能直接打开对应页面。
别人还没打开网站之前，先看到的就是这些东西。
显示在浏览器标签页上的那行文字。
跟 AI 这么说
每个页面的浏览器标签标题要有意义：首页显示品牌名，内页用「功能名 · 品牌名」，别整站都叫 Untitled。
藏在 head 里、给浏览器和搜索引擎看的描述信息。
跟 AI 这么说
补全每个页面的元数据：描述、语言、作者和缩略图，搜索引擎和浏览器要靠这些信息展示网站，缺了它们分享出去就是裸链接。
网站在标签页和书签上显示的那个小图标。
跟 AI 这么说
给网站配一套图标：标签页小图标、书签图标、各尺寸的版本都齐，别让用户在标签页和手机列表里看到一个空白默认图标。
决定链接分享出去时显示什么卡片的一套协议。
跟 AI 这么说
分享链接时要有好看的卡片：写上 Open Graph 的标题、摘要和封面图，图片用绝对地址，改完用真实的分享预览检查效果。
告诉浏览器这个网站如何当作 App 被安装的配置文件。
跟 AI 这么说
补一个 Web App Manifest：应用名称、图标、启动地址、全屏显示方式都配好，让用户能把网站像 App 一样安装到手机桌面。
试一试
选择题 · 选一个你认为最合适的答案