首页 前端知识 Vue 项目部署为 HTTPS 站点

Vue 项目部署为 HTTPS 站点

2024-08-19 22:08:19 前端知识 前端哥 448 371 我要收藏

 🧑‍🎓 个人主页:爱蹦跶的大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 站点,确保数据传输的安全性。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16239.html
标签
评论
发布的文章

php保存

2024-08-27 16:08:00

jQuery NiceScroll 插件

2024-08-27 09:08:49

vue echart4.0 按需引入

2024-08-27 09:08:28

Taro3 Vue3使用echarts

2024-08-27 09:08:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!