当前位置：首页 > news >正文

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

news 来源：原创 2025/6/25 9:02:33

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

- 确保 Nginx 已安装
- 准备 Vue 3 打包文件
- 配置 Nginx
- 编辑 Nginx 配置文件
- 启用配置文件
- 测试 Nginx 配置
- 重新加载 Nginx
- 配置 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 安全访问了。

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

在ubuntu系统中将vue3的打包文件dist 部署nginx 并且配置ssl证书以https方式访问确保 Nginx 已安装准备 Vue 3 打包文件配置 Nginx编辑 Nginx 配置文件启用配置文件测试 Nginx 配置重新加载 Nginx配置 SSL 证书获取 SSL 证书验证证书自动续期验证部署注意事项确保 Nginx 已安…...

编程日记 2025/6/25 9:02:33

MH22D3开发高级UI应用，适配arm2d驱动

在资源有限的嵌入系统上，要开发出具有现代风格（圆弧，表盘，滚动，滑动，透明，图层叠加等）的UI应用，需要极高的cpu算力和ram，flash资源的支持。但是往往鱼和熊掌…...

编程日记 2025/5/31 21:14:06

MongoDB数据库深度解析：架构、特性与应用场景

在现代应用程序开发中，数据存储技术的选择至关重要。在众多的数据库管理系统中，MongoDB以其灵活性和强大的功能迅速崛起，成为NoSQL数据库中的佼佼者。本文将深入解析MongoDB的架构、核心特性、性能优化及其在实际应用中的最佳实践&#xff0c…...

编程日记 2025/6/25 8:57:36

LeetCode 235. 二叉搜索树的最近公共祖先 LeetCode 701.二叉搜索树中的插入操作 LeetCode 450.删除二叉搜索树中的节点

LeetCode 235. 二叉搜索树的最近公共祖先思路： 根据二叉搜索树的特性，对 “基于二叉树的最近公共祖先 ” 进行优化，在二叉树寻找最近公共祖先时，需要分别对根节点的两个子树进行遍历来判断两个节点是异侧还是同侧。但是在二叉搜…...

编程日记 2025/6/22 11:04:57

GPU异步执行漏洞攻防实战：从CUDA Stream竞争到安全编程规范

点击 “AladdinEdu，同学们用得起的【H卡】算力平台”，H卡级别算力，按量计费，灵活弹性，顶级配置，学生专属优惠。引言在高校实验室的GPU加速计算研究中，多卡并行编程已成为提升深度学习训练效…...

编程日记 2025/6/25 1:51:12

[c语言日寄]数据结构：栈

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...

编程日记 2025/6/25 8:19:31

day21：零基础学嵌入式之数据结构

一、双向链表（doulinklist） 1. 2.创建 struct DouLinkList *CreateDouLinkList() {struct DouLinkList *dl malloc(sizeof(struct DouLinkList));if(NULL dl){fprintf(stderr, "CreateDouLinkLis malloc");return NULL;}dl->head NUL…...

编程日记 2025/6/25 7:35:04

数据结构之图的应用场景及其代码

一，最小生成树最小生成树（Minimum Spanning Tree, MST）是图论中的经典问题，旨在通过选择无向连通图中的边，使得所有节点连通且总边权最小。 1.1 普里姆（Prim）算法普里姆算法是一种用于求解…...

编程日记 2025/6/25 8:37:38

python克洛伊婚纱摄影预约管理系统

目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理，难度适中&#xf…...

编程日记 2025/6/23 21:25:01

GCC 使用说明

参数 -fPIC ppc_85xx-gcc -shared -fPIC liberr.c -o liberr.so -fPIC 作用于编译阶段，告诉编译器产生与位置无关代码(Position-Independent Code)， 则产生的代码中，没有绝对地址，全部使用相对地址，故而代码可以被加…...

编程日记 2025/6/25 7:59:47

配置别名路径 @

CRA本身把webpack配置包装到了黑盒里无法直接修改，需要借助一个插件 - craco 1. 路径解析配置（Webpack）-- craco 插件把 / 解析为 src/ 配置步骤： 1.安装 craco npm i -D craco/craco 2. 项目根目录下创建配置文件 craco.co…...

编程日记 2025/6/25 7:58:08

MYSQL基本命令

目录 1.登录命令2.操作数据库命令2.1查询数据库(show)2.2 创建数据库(create)2.3使用数据库(use) 3.操作表命令3.1增加表3.2查询表3.3修改表(alert)3.4 删除(delete/drop) 1.登录命令 mysql -uroot -p2.操作数据库命令 2.1查询数据库(show) show databases;2.2 创建数据库(c…...

编程日记 2025/6/25 8:36:33

C#语法基础

一、什么是.NET平台 .NET 是由 Microsoft 支持的免费开放源代码应用程序平台。 .NET .NET 是一个安全、可靠且高性能的应用程序平台。C# 是 .NET 的编程语言。它是强类型且类型安全的，并集成了并发和自动内存管理。 C# C# 是一种新式、安全且面向对象的编程语言&…...

编程日记 2025/6/24 11:56:45

深度学习框架对比---Pytorch和TensorFlow

一、计算图与执行模式 1. 图的本质：动态图 vs 静态图 PyTorch（动态图，Eager Execution） 运行机制：代码逐行执行，张量操作立即生效，计算图在运行时动态构建。x torch.tensor(1.0, requires_gra…...

编程日记 2025/6/25 7:20:37

antdv3 Tabs.TabPane 右上角增加一个角标Badge

1、Tabs官方说明 Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 2、Badge角标官方效果图 Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 3、Tabs.TabPane要实现的效果 4、代码 <Tabs v-m…...

编程日记 2025/6/25 8:18:21

Python-88：英雄升级奖励

问题描述在一个游戏中，小W拥有 n 个英雄，每个英雄的初始能力值均为 1。她可以通过升级操作来提升英雄的能力值，最多可以进行 k 次升级。每次升级操作包含以下步骤： 选择一个英雄选择一个正整数 x将该英雄的能力值 aiai 更新…...

编程日记 2025/6/24 11:42:00

使用uv创建python项目

uv创建项目 uv init -p 3.12 qwen3env # -p 指定python版本 # qwen3env是项目名称 # 可以使用下面的步骤 mkdir qwen3env cd qwen3env uv venv -p3.12 .venv # 基于 Python 3.12 创建名为 .venv 的虚拟环境 uv init第一种方式第二种方式内容如下执行python脚本 uv ru…...

编程日记 2025/6/25 1:22:09

window 显示驱动开发-命令和 DMA 缓冲区简介

命令和 DMA 缓冲区非常相似。但是，命令缓冲区由用户模式显示驱动程序使用，DMA 缓冲区由显示微型端口驱动程序使用。命令缓冲区具有以下特征： 它永远不会由 GPU 直接访问。硬件供应商控制格式。它从呈现应用程序的专用地址空间中的常规…...

编程日记 2025/6/25 8:39:51

深光-谷歌TV TADA/奈飞Netflix/亚马逊Prime Video/YouTube等测试外包服务

一、谷歌TV TADA测试服务 1.CTS CTS测试是一系列旨在确保设备与Android操作系统兼容性的自动化测试，CTS是所有测试项中测试量最大的一项测试。 2.GTS GTS测试是确保Android设备能够正确集成和运行Google Mobile Services（GMS）的关键步骤&am…...

编程日记 2025/6/25 7:47:06

《教育退费那些事儿：从困境到破局》

《教育退费那些事儿：从困境到破局》教育退费：不容忽视的热点问题在当今社会，教育消费已成为家庭支出的重要组成部分。无论是 K12 阶段的学科辅导、艺术特长培训，还是成人的职业技能提升、学历继续教育，家长和学生们…...

编程日记 2025/6/25 8:38:53

AtCoder 第405场初级竞赛 A~E题解

A Is it rated? 【题目链接】原题链接：A - Is it rated? 【考点】嵌套判断【题目大意】有两个分区，有不同的评分区间，给一个评分 r 和分区 x，判断是否在评分区间中。【解析】先判断在属于哪个分区，再判断是否在该分区评分区间中。【难度】 GESP一级【…...

编程日记 2025/6/25 7:53:21

登录接口中图片验证码Tesseract-OCR识别Java脚本

项目上移植了研发部的产品，文档不全，项目上验证码功能无法关闭，又要做接口/性能测试，开发不配合（作为测试多么无奈），此方法识别命中率不高，仅作借鉴。版本JDK11 import io.restass…...

编程日记 2025/6/25 8:02:58

专项智能练习（定义判断）_DA_02

2. 单选题虚假同感偏差也叫虚假一致性偏差，是指人们常常会高估或夸大自己的信念、判断及行为的普遍性。在认知他人时总喜欢把自己的特性赋予他人身上，假定他人与自己是相同的，而当遇到与此相冲突的信息时，会坚信自己信念和判断的…...

编程日记 2025/6/25 7:45:25

安卓A15系统实现修改锁屏界面默认壁纸功能

最近遇到一个A15系统项目，客户要求修改锁屏界面的默认壁纸，客户提供了一张壁纸图片，但是从A15系统的源代码查看时才知道谷歌已经去掉了相关的代码，已经不支持了，A13和A14系统好像是支持的，A15系统的Wallpap…...

编程日记 2025/6/25 8:39:50

Linux之Yum源与Nginx服务篇

1.Yum源知识理论总结概括 Yum源概述 Yum 源即软件仓库的标识，里面承载着软件包集合 Yum源组成包含模块【OS】、【everything】、【EPOL】、【debuginfo】、【source】、【update-source】【os】:简称operator system 它内部包含操作系统的核心组件&#x…...

编程日记 2025/6/25 8:47:08

帧差法识别

定义： 视频通过闪过x帧画面来实现，帧差法就是利用两帧之间的差异找出。也就是移动目标识别帧差法识别步骤： 1、灰度处理：将多通道变成双通道压缩图像数据。 cvtColor(before_frame,before_gray,CV_RGB2GRAY);cvtColor(after_f…...

编程日记 2025/6/25 8:12:26

游戏引擎学习第282天:Z轴移动与摄像机运动

运行游戏，展示目前进展我们目前正在进行一个游戏开发项目。昨天，我们实现了基于房间的角色移动系统，并且加入了摄像机的跟随滚动功能。这是我们首次进入“游戏逻辑设计”阶段，也就是说，我们开始构建游戏本身的行为和…...

编程日记 2025/6/21 16:26:04

解决：npm install报错，reason: certificate has expired

目录 1. 问题分析2. 问题解决2.1 查看配置的镜像2.2 修改镜像源种一棵树最好的时间是10年前，其次就是现在，加油！ --by蜡笔小柯南 1. 问题分析启动前…...

编程日记 2025/6/20 12:10:25

C++ 基础知识点

1、指针和引用的区别指针：是一个变量，存储的是另一个变量的内存地址，可以被重新赋值指向不同的对象，允许为 nullptr。指针的特性： 独立变量，存储内存地址可重新赋值指向其他对象支持空值（n…...

编程日记 2025/6/4 9:48:34

线代第二章矩阵第九、十节：初等变换、矩阵的标准形、阶梯形与行最简阶梯形、初等矩阵

文章目录初等变换初等行变换初等列变换矩阵的标准型阶梯形与行最简阶梯形阶梯型矩阵行简化阶梯形初等矩阵定义性质初等矩阵和初等变换的联系本节非常重要初等变换初等变换使用"→"，而不是"" 初等行变换 ① 交换两行 ② 非0数乘以某一…...

编程日记 2025/6/24 18:52:49

新能源汽车制动系统建模全解析——从理论到工程应用

《纯电动轻卡制动系统建模全解析：车速-阻力拟合、刹车力模型与旋转质量转换系数优化》摘要本文以纯电动轻卡为研究对象，系统解析制动系统建模核心参数优化方法，涵盖： 车速-阻力曲线拟合（MATLAB实现与模型验证&…...

编程日记 2025/6/22 11:20:45

初始化一个Springboot项目

初始化一个Springboot项目文章目录初始化一个Springboot项目1、新建项目2、配置yml3、自定义异常4、通用相应类5、全局跨域配置6、总结 1、新建项目首先，我们需要创建一个新的 Spring Boot 项目。这里我们使用 IntelliJ IDEA 作为开发工具，它提供了方…...

编程日记 2025/6/24 15:34:16

Springboot考研信息平台

Springboot考研信息平台文章目录 Springboot考研信息平台1、技术栈2、项目说明3、项目截图4、核心代码4.1、前端核心代码4.2、后端核心代码 1、技术栈前端 Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。 Vue 作为前端核心框架，提供了响应式的数据绑定和高…...

编程日记 2025/6/25 4:47:40

Spring 框架 JDBC 模板技术详解

一、JDBC 模板技术概述在传统 JDBC 开发中，开发人员需要手动处理数据库连接（Connection）、事务管理、语句执行（Statement）和结果集（ResultSet）等繁琐操作，不仅代码冗余度高&#x…...

编程日记 2025/6/2 15:42:01

Console Importer浏览器插件的编译及制作成.crx浏览器插件的步骤

近日由于下载Console Importer浏览器插件(一个前端调试窗口方便引下第三方库便于学习测试的插件)找不到资源，于是找到该插件的源码，地址：https://github.com/pd4d10/console-importer），发现该插件基于一款名为“Plasmo…...

编程日记 2025/6/21 6:14:18

ArcGIS切片方案记录bundle文件

文章目录前言一、导入底图二、生成切片方案三、导出切片方案总结前言切片的作用是让前端可以访问地图的Mapsever来加载底图。arcgis切片是测绘人员或者WebGIs人员需要认识到的操作。一、导入底图首先10.8的ArcGis，这里没有Pro，Pro其实也是一样的操…...

编程日记 2025/6/21 8:20:17

山东大学计算机图形学期末复习6——CG10下

##CG10下将世界坐标中的任意点 P P P 变换到以相机为中心的“观察坐标系”下（右手坐标系） n \mathbf{n} n：从相机眼睛朝向观察点的反方向，代表“前方”； u \mathbf{u} u：观察坐标系的 x 轴，向…...

编程日记 2025/6/21 22:51:38

【Spring Cloud Gateway】Nacos整合遇坑记：503 Service Unavailable

一、场景重现最近在公司进行微服务架构升级，将原有的 Spring Cloud Hoxton 版本升级到最新的 2021.x 版本，同时使用 Nacos 作为服务注册中心和配置中心。在完成基础框架搭建后，我使用 Spring Cloud Gateway 作为API 网关，通过 N…...

编程日记 2025/6/20 21:57:58

[Linux]从零开始的STM32MP157 Busybox根文件系统测试及打包

一、前言在上一篇教程中，我们成功编译了Busybox根文件系统并且能够正常使用，但是大家应该也发现了我们构建的根文件系统存在许多问题，比如一些找不到文件的报错。并且在实际的产品中一般都是将根文件系统烧录到EMMC中，并不是像我…...

编程日记 2025/6/22 14:11:41

【Pandas】pandas DataFrame eval

Pandas2.2 DataFrame Computations descriptive stats 方法描述DataFrame.abs()用于返回 DataFrame 中每个元素的绝对值DataFrame.all([axis, bool_only, skipna])用于判断 DataFrame 中是否所有元素在指定轴上都为 TrueDataFrame.any(*[, axis, bool_only, skipna])用于判断…...

编程日记 2025/6/22 1:06:28

考研408《计算机组成原理》复习笔记，第二章(2)数值数据的表示和运算（浮点数篇）

一、回顾定点数知识点 ——定点小数机器码表示 ——定点整数机器码表示 ——【原码】和【移码】的作用二、浮点数表示 1、概念引入我们生活中有很多 “带小数”，也就是浮点数，也就是【整数部分】和【纯小数部分】都不为0，那么这样的小数…...

编程日记 2025/6/24 22:10:44

【虚幻引擎】UE5独立游戏开发全流程（商业级架构）

本套课程我将会讲解一下知识 1.虚幻引擎的常用功能节点、模块包含但不限于动画模块、UI模块、AI模块、碰撞模块、伤害模块、背包模块、准心模块、武器模块、可拾取物品模块、死亡等模块。 2.整个游戏的设计思路（游戏架构），本套教程讲解了如…...

编程日记 2025/6/25 5:49:05

大语言模型 08 - 从0开始训练GPT 0.25B参数量 - MiniMind 单机多卡 torchrun deepspeed

写在前面 GPT（Generative Pre-trained Transformer）是目前最广泛应用的大语言模型架构之一，其强大的自然语言理解与生成能力背后，是一个庞大而精细的训练流程。本文将从宏观到微观，系统讲解GPT的训练过程，…...

编程日记 2025/6/23 1:44:43

使用gitbook 工具编写接口文档或博客

步骤一：在项目目录中初始化一个 GitBook 项目 mkdir mybook && cd mybook git init npm init -y步骤二：添加书籍结构（如 book.json, README.md） echo "# 我的书" > README.md echo "{}" > bo…...

编程日记 2025/6/19 23:26:13

Mysql视图详解

文章目录 1、视图简介 && 前置准备2、基本crud语法3、检查选项（with check option）CASCADEDLOCAL总结 4、视图更新限定条件 1、视图简介 && 前置准备视图 (View) 是一种虚拟存在的表。视图中的数据并不在数据库中实际存在，…...

编程日记 2025/6/19 21:37:48

leetcode 56. 合并区间

题目描述代码： class Solution {struct Interval{int left;int right;Interval(int l0,int r0):left(l),right(r){}bool operator<(const Interval& rhs) const{return left<rhs.left;}};public:vector<vector<int>> merge(vector<vecto…...

编程日记 2025/6/19 23:55:59

Mac 环境下 JDK 版本切换全指南

概要在 macOS 上安装了多个 JDK 后，可以通过系统自带的 /usr/libexec/java_home 工具来查询并切换不同版本的 Java。只需在终端中执行 /usr/libexec/java_home -V 列出所有已安装的 JDK，然后将你想使用的版本路径赋值给环境变量 JAVA_HOME，…...

编程日记 2025/6/23 12:14:19