服务上线之旅

🎯 核心问题

代码在本地跑得好好的，怎么让全世界的人都能访问？

1. 为什么要"服务上线"？

想象小明在家做了一桌子菜，现在要开餐厅让所有人来吃。这可不是"把菜端出去"那么简单。

🚀服务上线全流程从代码到用户眼中的网页

📦

Build

源码→可执行文件

→

🖥️

Server

24h运行的电脑

→

�

Deploy

代码放到服务器

→

🔀

Nginx

接收请求分发响应

→

�

DNS

域名→IP地址

→

�

HTTPS

加密数据传输

→

⚡

CDN

就近访问加速

→

🔄

CI/CD

自动化部署流程

→

�

Monitor

监控运行状态

💡核心原则：小步快跑 → 先上线MVP → 逐步完善

服务上线是一场"搬家+开业"的大工程：

构建 → 打包代码成服务器能懂的格式
服务器 → 租一台永远不关机的电脑
部署 → 把代码上传到服务器
环境 → 配置 Nginx、Node.js
域名 → 配置 DNS，让用户能找到
HTTPS → 安装证书，保护数据安全
CI/CD → 自动化部署，解放双手
监控 → 盯控和备份，守住底线

2. 构建：把代码变成"可携带的包裹"

2.1 为什么要构建？

浏览器只认识 HTML/CSS/JS，不认识 Vue 组件。构建（Build）就是"打包外卖"的过程。

1解析依赖

→

2编译转换

→

3打包压缩

→

4完成

构建做了什么：

翻译：Vue → HTML/CSS/JS
压缩：减小代码体积（省流量、加载快）
合并：多个文件 → 几个大包（减少请求）
哈希：文件名加指纹（app.abc123.js），缓存友好

bash

npm run build

3. 服务器：找房子

3.1 服务器是什么？

服务器 = 一台永远不关机、连着互联网的电脑

个人博客1核 1G¥50/月

小型电商2核 4G¥300/月

中型应用4核 8G¥1000/月

3.2 怎么选服务器？

💡 选型建议

个人项目/学习：1核2G，约¥100-200/年
小型商业项目：2核4G，约¥500/年
中型项目：4核8G，约¥1000+/年

方案	类比	优点	缺点	价格
虚拟主机	租床位	便宜、简单	性能差	¥50-200/年
云服务器	租公寓	自由度高、可扩展	需自己配置	¥100-1000/年
Vercel	租会议室	零配置、免费额度	受平台限制	免费/按量

3.3 主流云厂商

厂商	特点	适合人群
阿里云	国内访问快	国内业务
腾讯云	价格亲民	小程序开发者
Vercel	零配置、免费	前端项目

4. 部署：搬家

4.1 连接服务器

用 SSH（远程连接工具）：

bash

ssh root@123.45.67.89
# 输入密码后，你就在服务器上了

4.2 部署方式

方式	优点	缺点
FTP上传	简单直观	容易漏传
Git拉取	快、可追溯	需配置Git

4.3 环境配置（Ubuntu）

点击展开：最小化安装脚本

bash

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装 Nginx（Web服务器）
sudo apt install -y nginx

# 安装 Node.js 18
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# 安装 PM2（进程管家）
sudo npm install -g pm2

# 安装 Git
sudo apt install -y git

Nginx 反向代理：把 80 端口请求转发到 3000 端口

nginx

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
    }
}

5. 域名和 DNS：挂牌

5.1 域名是什么？

IP地址（123.45.67.89）太难记
域名（example.com）好记

DNS（域名解析） = 电话本，把域名翻译成IP

💻用户输入域名

→

📋查询 DNS

→

✅返回 IP

示例：example.com → 192.168.1.1

5.2 配置步骤

买域名：阿里云/腾讯云（¥50-100/年）
配置DNS：

记录类型	用途	示例
A记录	指向IP	`example.com` → `123.45.67.89`
CNAME	指向域名	`www.example.com` → `example.com`

⚠️ 注意

DNS生效慢：全球同步需要几分钟到几小时
TTL值：设置小一点（如600秒），修改后生效快

6. HTTPS：安防

6.1 为什么需要 HTTPS？

HTTP

❌ 明文传输

HTTPS
✅ 加密传输

💡 推荐：Let's Encrypt 免费证书

HTTP：数据"裸奔"，谁都能看见
HTTPS：数据加密，黑客看见也是乱码

6.2 怎么搞定 HTTPS？

用 Let's Encrypt（免费证书） + Certbot（自动工具）

bash

# 安装 Certbot
sudo apt install -y certbot python3-certbot-nginx

# 自动申请证书并配置 Nginx
sudo certbot --nginx -d example.com

# 证书自动续期
sudo certbot renew --dry-run

完成后访问网站会看到🔒小锁。

7. CI/CD：自动化

7.1 什么是 CI/CD？

1代码推送

→

2自动测试

→

3自动构建

→

4自动部署

手动部署

❌ 容易出错

CI/CD
✅ 快速可靠

CI（持续集成）：每次提交自动测试
CD（持续部署）：测试通过自动部署

7.2 GitHub Actions 示例

在 .github/workflows/deploy.yml：

yaml

name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install & Build
        run: |
          npm ci
          npm run build

      - name: Deploy
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: root
          key: ${{ secrets.SSH_KEY }}
          script: |
            cd /var/www/my-site
            git pull origin main
            npm install
            npm run build
            pm2 restart all

📖 高级主题：CDN 和负载均衡

CDN（内容分发网络）：全球连锁仓库

把图片、CSS、JS等静态资源上传到CDN
CDN复制到全球节点
用户访问时从最近节点获取

效果：北京用户→北京节点（10ms），纽约用户→纽约节点（15ms）

负载均衡（Load Balancer）：餐厅领班

看着N个服务器
把客人分配到最空闲的那个
某个服务器挂了，自动切换

什么时候需要？

访问量 >10000/天
单台服务器 CPU/内存 >70%

8. 监控和备份：守夜人

8.1 监控什么？

CPU 使用率45%

内存使用率62%

在线用户23

上次备份：

2024-01-15 14:30

指标	正常范围
CPU使用率	<70%
内存使用率	<80%
磁盘空间	<80%
响应时间	<2秒
错误率	<1%

8.2 备份策略

💾 备份三要素

定期备份：每天凌晨自动备份
多地存储：本地 + 异地（防止单点故障）
定期恢复测试：确保备份能恢复

bash

# 每天自动备份数据库
0 2 * * * /usr/bin/mysqldump -u root -p密码 my_db > /backup/db_$(date +\%Y\%m\%d).sql

# 保留最近7天的备份
find /backup -name "db_*.sql" -mtime +7 -delete

# 自动上传到云存储
/usr/bin/ossutil cp /backup/db_$(date +\%Y\%m\%d).sql oss://my-backup/

9. 常见问题速查

现象	可能原因	怎么办
网站打不开	域名没解析？服务器挂了？	`ping 域名`看通不通 `ssh`连不上就是服务器挂了
404 Not Found	Nginx配置错了？路径不对？	`nginx -t`检查配置
502 Bad Gateway	后端服务挂了？端口没开？	`pm2 list`看服务状态
HTTPS证书报错	证书过期？域名不匹配？	`certbot renew`续期
更新不生效	浏览器缓存？CDN缓存？	Ctrl+F5强制刷新去CDN控制台"刷新缓存"
很慢	性能不够？CDN没配置？	查监控看CPU/内存静态资源上CDN

10. 上线前检查清单

✅ 基础检查

[ ] 代码已构建（npm run build）
[ ] 服务器环境配置完成（Nginx + Node.js）
[ ] 域名解析正确（能ping通）
[ ] HTTPS证书正常（有🔒小锁）

🔒 安全检查

[ ] 数据库密码不是弱密码
[ ] 敏感信息没写在代码里
[ ] 开启了防火墙（只开必要端口）
[ ] 配置了SQL注入防护

🛡️ 运维检查

[ ] 监控告警配置完成
[ ] 日志正常记录
[ ] 自动备份已设置
[ ] CI/CD流程测试通过

总结

核心流程

构建 → 代码打包成浏览器懂的格式
部署 → 代码放到服务器上
配置 → Nginx、域名、HTTPS
优化 → CDN、负载均衡（高级）
自动化 → CI/CD解放双手
保障 → 监控和备份守住底线

关键原则

原则	说明
小步快跑	先上线MVP，再逐步完善
自动化优先	能自动的别手动，减少人为失误
监控先行	先建监控，再上功能
备份为王	数据无价，备份是最后防线
安全第一	HTTPS、防火墙、弱密码检查，一个都不能少

学习路线

入门（第1天）：用 Vercel 免费部署静态网页

进阶（第1周）：租云服务器、手动部署 Node.js 应用、配置域名和 HTTPS

实战（第2-4周）：搭建完整 CI/CD 流程、配置 CDN、建立监控和备份

深入（持续）：学习 Docker 容器化、Kubernetes 集群、微服务架构

名词速查表

名词	英文	人话解释
部署	Deployment	把代码放到服务器上让人能访问
构建	Build	把源代码翻译打包成浏览器懂的格式
服务器	Server	一台永远不关机、连着互联网的电脑
域名	Domain Name	网站的好记名字（如 baidu.com）
DNS	Domain Name System	域名解析系统，把域名翻译成IP
HTTP/HTTPS	HyperText Transfer Protocol	网页传输协议（HTTP不安全，HTTPS加密）
Nginx	Engine X	高性能Web服务器（门童）
反向代理	Reverse Proxy	转发请求到后端服务
SSH	Secure Shell	远程连接服务器的工具
CDN	Content Delivery Network	内容分发网络，全球加速
CI/CD	Continuous Integration/Deployment	持续集成/持续部署（自动化）
监控	Monitoring	盯着服务器看有没有问题
备份	Backup	备份数据，防丢失

服务上线之旅 ​

1. 为什么要"服务上线"？ ​

2. 构建：把代码变成"可携带的包裹" ​

2.1 为什么要构建？ ​

3. 服务器：找房子 ​

3.1 服务器是什么？ ​

3.2 怎么选服务器？ ​

3.3 主流云厂商 ​

4. 部署：搬家 ​

4.1 连接服务器 ​

4.2 部署方式 ​

4.3 环境配置（Ubuntu） ​

5. 域名和 DNS：挂牌 ​

5.1 域名是什么？ ​

5.2 配置步骤 ​

6. HTTPS：安防 ​

6.1 为什么需要 HTTPS？ ​

6.2 怎么搞定 HTTPS？ ​

7. CI/CD：自动化 ​

7.1 什么是 CI/CD？ ​

7.2 GitHub Actions 示例 ​

8. 监控和备份：守夜人 ​

8.1 监控什么？ ​

8.2 备份策略 ​

9. 常见问题速查 ​

10. 上线前检查清单 ​

总结 ​

核心流程 ​

关键原则 ​

学习路线 ​

名词速查表 ​

服务上线之旅

1. 为什么要"服务上线"？

2. 构建：把代码变成"可携带的包裹"

2.1 为什么要构建？

3. 服务器：找房子

3.1 服务器是什么？

3.2 怎么选服务器？

3.3 主流云厂商

4. 部署：搬家

4.1 连接服务器

4.2 部署方式

4.3 环境配置（Ubuntu）

5. 域名和 DNS：挂牌

5.1 域名是什么？

5.2 配置步骤

6. HTTPS：安防

6.1 为什么需要 HTTPS？

6.2 怎么搞定 HTTPS？

7. CI/CD：自动化

7.1 什么是 CI/CD？

7.2 GitHub Actions 示例

8. 监控和备份：守夜人

8.1 监控什么？

8.2 备份策略

9. 常见问题速查

10. 上线前检查清单

总结

核心流程

关键原则

学习路线

名词速查表