在ubuntu系统中将vue3的打包文件dist 部署nginx 并且配置ssl证书 以https方式访问

在ubuntu系统中将vue3的打包文件dist 部署nginx 并且配置ssl证书 以https方式访问

• • [确保 Nginx 已安装](#确保 Nginx 已安装)
  • [准备 Vue 3 打包文件](#准备 Vue 3 打包文件)
  • [配置 Nginx](#配置 Nginx)
  • [编辑 Nginx 配置文件](#编辑 Nginx 配置文件)
  • 启用配置文件
  • [测试 Nginx 配置](#测试 Nginx 配置)
  • [重新加载 Nginx](#重新加载 Nginx)
  • [配置 SSL 证书](#配置 SSL 证书)
  • [获取 SSL 证书](#获取 SSL 证书)
  • 验证证书自动续期
  • 验证部署
  • 注意事项

确保 Nginx 已安装

如果尚未安装 Nginx，可以通过以下命令安装：

sudo apt update
sudo apt install nginx

准备 Vue 3 打包文件

确保你已经通过 npm run build 命令生成了 Vue 3 项目的 dist 目录。
将 dist 目录的内容上传到 Ubuntu 服务器的某个目录，例如 /var/www/vue-app。

配置 Nginx

创建 Nginx 配置文件
在 /etc/nginx/sites-available/ 目录下创建一个新的配置文件，例如 vue-app：
sudo nano /etc/nginx/sites-available/vue-app

编辑 Nginx 配置文件

将以下内容粘贴到配置文件中（根据你的实际路径和域名修改）：

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain.com www.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_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    root /var/www/vue-app;
    index index.html;

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

说明：

your-domain.com：替换为你的实际域名。

/var/www/vue-app：替换为你的 Vue 3 打包文件 dist 目录的实际路径。

ssl_certificate 和 ssl_certificate_key：指向你的 SSL 证书和私钥文件路径。如果使用 Let's Encrypt，路径通常为 /etc/letsencrypt/live/your-domain.com/。

启用配置文件

创建一个符号链接到 /etc/nginx/sites-enabled/ 目录以启用配置：

sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/

测试 Nginx 配置

在重新加载 Nginx 之前，测试配置文件是否正确：

sudo nginx -t

重新加载 Nginx

如果配置测试通过，重新加载 Nginx 以应用更改：

sudo systemctl reload nginx

配置 SSL 证书

安装 Certbot（Let's Encrypt）

如果尚未安装 Certbot，可以通过以下命令安装：

sudo apt install certbot python3-certbot-nginx

获取 SSL 证书

sudo certbot --nginx -d your-domain.com -d www.your-domain.com

按照提示完成证书申请流程。

Certbot 会自动配置 Nginx 以使用 HTTPS，并设置证书自动续期。

验证证书自动续期

测试证书是否可以自动续期：

sudo certbot renew --dry-run

验证部署

打开浏览器，访问 https://your-domain.com。

确保网站可以通过 HTTPS 正常访问。

检查浏览器地址栏是否显示安全锁标志。

注意事项

文件权限：

确保 Nginx 用户（通常是 www-data）对 /var/www/vue-app 目录有读取权限：

sudo chown -R www-data:www-data /var/www/vue-app
sudo chmod -R 755 /var/www/vue-app

防火墙：

确保防火墙允许 HTTP（80）和 HTTPS（443）端口：

sudo ufw allow 'Nginx Full'

日志文件：如果遇到问题，检查 Nginx 的日志文件：

sudo tail -f /var/log/nginx/error.log

总结：

通过以上步骤，你可以在 Ubuntu 系统中部署 Vue 3 的打包文件，并通过 Nginx 配置 SSL 证书以 HTTPS 方式访问。关键步骤包括：

安装并配置 Nginx。

部署 Vue 3 的 dist 目录。

使用 Certbot 获取并配置 SSL 证书。

测试和验证部署。

这样，你的 Vue 3 应用就可以通过 HTTPS 安全访问了。