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

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

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

确保 Nginx 已安装

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

sudo apt updatesudo 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-appsudo 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 安全访问了。