Vue 项目部署为 HTTPS 站点

 🧑‍🎓 个人主页：爱蹦跶的大A阿

🔥当前正在更新专栏：《JavaScript保姆级教程》、《VUE》、《Krpano》

✨ 前言

        在将 Vue 项目部署为 HTTPS 站点时，你需要配置 HTTPS 证书和服务器。以下是一个基本的步骤和解决方案指南：

✨ 正文

步骤 1: 准备 HTTPS 证书

你需要一个 SSL 证书。可以从以下来源获取：

• 自签名证书：适用于开发和测试环境，但不适合生产环境。
• 免费证书：如 Let's Encrypt。
• 付费证书：从受信任的证书颁发机构（CA）购买。

步骤 2: 生成证书（以 Let's Encrypt 为例）

使用 Certbot 工具自动获取和安装 Let’s Encrypt 证书。

sudo apt-get update
sudo apt-get install certbot
sudo apt-get install python3-certbot-nginx

步骤 3: 为 Nginx 配置 HTTPS

配置你的 Nginx 服务器以使用 SSL 证书。

server {
    listen 80;
    server_name example.com www.example.com;

    # 自动重定向 HTTP 到 HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name example.com www.example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        root /path/to/your/vue/project/dist;
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

步骤 4: 重新启动 Nginx 

sudo systemctl restart nginx

步骤 5: 配置 Vue 项目以支持 HTTPS

在 Vue 项目中，确保开发环境也支持 HTTPS。编辑 vue.config.js 文件：

module.exports = {
  devServer: {
    https: true,
    // 其他配置项
  },
};

 

如果使用自签名证书，你还需要信任该证书。可以在浏览器中打开开发服务器地址，并手动添加例外。

注意事项

• 更新证书：Let's Encrypt 证书有效期为 90 天，确保定期更新。可以通过设置定时任务来自动更新证书：

  sudo crontab -e
  

  添加以下行来每天凌晨 2 点自动更新证书：

  0 2 * * * /usr/bin/certbot renew --quiet
  

• 安全配置：确保 Nginx 的 SSL 配置符合最佳安全实践，例如禁用旧的协议和弱的加密算法。

以上步骤将帮助你将 Vue 项目部署为 HTTPS 站点，确保数据传输的安全性。