如何将HTML、CSS、JavaScript文件部署到云服务器？

将 HTML、CSS、JavaScript 文件部署到云服务器

整体流程概览

本地开发 → 打包/准备文件 → 上传到服务器 → 配置 Web 服务器 → 访问测试

一、前置准备

1. 云服务器要求

• 操作系统：Linux（推荐 Ubuntu/CentOS）或 Windows Server
• 权限：SSH 访问权限（root 或 sudo 用户）
• 网络：开放端口（HTTP: 80，HTTPS: 443）

2. 本地文件结构示例

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
├── images/
└── favicon.ico

二、上传文件到服务器

方法 1：SCP / SFTP（推荐）

# 使用 SCP 上传整个目录
scp -r ./project/* user@your_server_ip:/var/www/html/

# 或使用 SFTP（交互式）
sftp user@your_server_ip
sftp> cd /var/www/html
sftp> put -r ./project/*

方法 2：Git 部署（自动化）

# 服务器上安装 Git
sudo apt install git    # Ubuntu
sudo yum install git    # CentOS

# 创建裸仓库并设置 post-receive hook
mkdir /home/git/myapp.git && cd /home/git/myapp.git
git init --bare

# 编写 post-receive hook
cat > hooks/post-receive << 'EOF'
#!/bin/bash
GIT_WORK_TREE=/var/www/html git checkout -f
EOF
chmod +x hooks/post-receive

# 本地推送
git remote add server ssh://user@your_server_ip/home/git/myapp.git
git push server main

方法 3：rsync（增量同步）

rsync -avz --delete ./project/ user@your_server_ip:/var/www/html/

三、配置 Web 服务器

Nginx 配置（推荐）

1. 安装 Nginx

# Ubuntu/Debian
sudo apt update
sudo apt install nginx

# CentOS/RHEL
sudo yum install nginx

2. 创建站点配置

# /etc/nginx/sites-available/myapp
server {
    listen 80;
    server_name your_domain.com www.your_domain.com;

    root /var/www/html;
    index index.html;

    # 静态资源缓存优化
    location ~* .(css|js|jpg|jpeg|png|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # SPA 路由支持（如 Vue/React 单页应用）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 错误页面
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
}

3. 启用站点并重启

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
sudo nginx -t          # 测试配置
sudo systemctl restart nginx

Apache 配置

1. 安装 Apache

sudo apt install apache2    # Ubuntu
sudo yum install httpd      # CentOS

2. 配置虚拟主机

# /etc/apache2/sites-available/myapp.conf
<VirtualHost *:80>
    ServerName your_domain.com
    DocumentRoot /var/www/html

    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # 静态资源缓存
    <FilesMatch ".(css|js|jpg|jpeg|png|gif|ico|svg)$">
        Header set Cache-Control "max-age=2592000"
    </FilesMatch>
</VirtualHost>

sudo a2ensite myapp.conf     # Ubuntu
sudo systemctl restart apache2

四、配置 HTTPS（SSL 证书）

使用 Let’s Encrypt（免费）

# 安装 Certbot
sudo apt install certbot python3-certbot-nginx   # Nginx
sudo apt install certbot python3-certbot-apache   # Apache

# 获取证书并自动配置
sudo certbot --nginx -d your_domain.com -d www.your_domain.com
# 或
sudo certbot --apache -d your_domain.com

# 自动续期
sudo systemctl enable certbot.timer

Nginx HTTPS 完整配置

server {
    listen 80;
    server_name your_domain.com;
    return 301 https://$server_name$request_uri;  # HTTP 强制跳转 HTTPS
}

server {
    listen 443 ssl;
    server_name your_domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    # SSL 安全建议
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

五、设置正确的文件权限

# 所有者设为 www-data（Nginx/Apache 运行用户）
sudo chown -R www-data:www-data /var/www/html

# 目录权限 755，文件权限 644
find /var/www/html -type d -exec chmod 755 {} ;
find /var/www/html -type f -exec chmod 644 {} ;

# 确保 web 服务器能读取
sudo chmod o+r /var/www/html/index.html

六、防火墙配置

# UFW (Ubuntu)
sudo ufw allow 'Nginx Full'    # 允许 HTTP + HTTPS
sudo ufw allow OpenSSH
sudo ufw enable

# firewalld (CentOS)
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

七、验证部署

# 1. 检查服务状态
sudo systemctl status nginx
sudo systemctl status apache2

# 2. 检查配置文件语法
sudo nginx -t

# 3. 从浏览器访问
# http://your_server_ip
# https://your_domain.com

# 4. 命令行测试
curl -I http://your_domain.com
curl -I https://your_domain.com

八、常见 SPA 框架额外配置

Vue / React / Angular 单页应用

关键：所有路由请求回退到 index.html

location / {
    try_files $uri $uri/ /index.html;
}

添加 HTTP 头增强安全性

add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

九、持续集成/持续部署（CI/CD）进阶方案

# .github/workflows/deploy.yml
name: Deploy to Server

on:
  push:
    branches: [main]

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

      - name: Sync files via rsync
        uses: burnett01/rsync-deployments@v5
        with:
          args: -avz --delete
          src: './dist/'
          excludes: '.git/.github'
          rsh: ssh -p ${{ secrets.SSH_PORT }} -i ${{ secrets.SSH_KEY }}
          host: ${{ secrets.HOST }}
          target: '/var/www/html'
          ssh_user: ${{ secrets.SSH_USER }}

十、故障排查清单

快速一键脚本（Ubuntu + Nginx）

#!/bin/bash
# deploy.sh

DOMAIN="your_domain.com"
WEB_DIR="/var/www/html"

echo "=== 更新系统 ==="
apt update && apt upgrade -y

echo "=== 安装 Nginx ==="
apt install nginx -y

echo "=== 复制项目文件 ==="
cp -r ./project/* "$WEB_DIR/"
chown -R www-data:www-data "$WEB_DIR"
find "$WEB_DIR" -type d -exec chmod 755 {} ;
find "$WEB_DIR" -type f -exec chmod 644 {} ;

echo "=== 配置 Nginx ==="
cat > /etc/nginx/sites-available/$DOMAIN << EOF
server {
    listen 80;
    server_name $DOMAIN www.$DOMAIN;
    root $WEB_DIR;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}
EOF
ln -sf /etc/nginx/sites-available/$DOMAIN /etc/nginx/sites-enabled/
rm -f /etc/nginx/sites-enabled/default
nginx -t && systemctl restart nginx

echo "=== 配置 HTTPS ==="
certbot --nginx -d $DOMAIN -d www.$DOMAIN --non-interactive --agree-tos --email admin@$DOMAIN

echo "=== 完成！访问 https://$DOMAIN ==="

最佳实践建议：生产环境建议使用 CI/CD 流水线、CDN 提速静态资源、定期备份网站文件和数据库。