从零开始的 vue项目部署到服务器详细步骤（vue项目build打包+nginx部署+配置ssl证书）

从零开始的 vue项目部署到服务器详细步骤（vue项目build打包+nginx部署+配置ssl证书）

文章目录

  • 从零开始的 vue项目部署到服务器详细步骤（vue项目build打包+nginx部署+配置ssl证书）
  • 一、前言
  • 二、vue项目部署前配置
    • 1、vite.config.js 增加base字段
    • 2、src/router/index.js 在历史记录中加入BASR_URL
    • 3、src/utils/request.js 加上后端的baseURL
  • 二、加SSl证书配置https
    • 1、将域名解析到你的服务器
    • 2、验证该域名是否解析成功
    • 3、let's Encrypt 证书申请
      • （1）certbot安装
      • （2）let's Encrypt 证书申请
  • 三、配置nginx
    • 1、nginx安装
    • 2、配置nginx.conf
    • 3、重新运行nginx
    • 4、vue 编译后文件上传服务器
  • 四、后话
    • 1、完结
    • 2、每日小tip：ssl证书自动续订。

一、前言

未来的开发者们请上座，在这里许多人在自己的电脑做完前端后，下一步就是怎么部署到服务器上对外开放了。
ps：默认各位大大已经购买云服务器了哈。
我的服务器是ubutu 22.04，第一次跟随本教程的时候最好也是ubuntu系统，避免环境问题。

二、vue项目部署前配置

为了便于演示，我新建了一个项目用于演示。

1、vite.config.js 增加base字段

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({base:'vue-test',//这个为项目名plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

2、src/router/index.js 在历史记录中加入BASR_URL

在这里插入图片描述

3、src/utils/request.js 加上后端的baseURL

如果，涉及后端，则需要在拦截器那边加上后端的baseURL,。如果没有则不用管，同时后续nginx也不需要配这个路由

二、加SSl证书配置https

前置条件：我默认你已经有域名了，如果没有需要在国内的阿里云、腾讯云、华为云，国外的Hostinger等云服务商都提供域名注册和域名解析服务。找一个你喜欢的就可以，在这里我用的是阿里云注册的域名进行演示。
（国内的域名需要提前备案，15天左右。如果比较着急且只是演示可以用香港或者国外如Hostinger 云服务厂商提供的域名这样可以免掉备案的步骤）

1、将域名解析到你的服务器

在这里插入图片描述

等待20s左右让其传播。

2、验证该域名是否解析成功

执行 nslookup + 域名，即可查询域名解析对象

nslookup bak.sligenai.cn

在这里插入图片描述
看到解析到你的公网服务器的ip就完成了

3、let’s Encrypt 证书申请

（1）certbot安装

我们需要安装Certbot并用于申请let’s Encrypt 。
打开终端，运行以下命令：

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

（2）let’s Encrypt 证书申请

 sudo certbot --nginx -d bak.sligenai.cn

如果是第一次，可能会要你输入你的邮箱和让你输入A或Yes同意一些条款你按着输入就行。
在这里插入图片描述
然后就生成好证书了。记得保存好fullchain.pem和private.pem的路径，这个等下会用到。

下面是我的fullchain.pem和private.pem的路径
/etc/letsencrypt/live/bak.sligenai.cn/fullchain.pem
/etc/letsencrypt/live/bak.sligenai.cn/privkey.pem

fullchain.pem和privkey.pem这两个文件对于配置Web服务器以安全地提供服务是非常重要的。下面是这两个文件的详细说明：
fullchain.pem

  • 含义：fullchain.pem文件包含了你的域名证书以及任何中间证书的完整链，但不包括根证书。这个文件是将你的证书(cert.pem)和中间证书(chain.pem)合并而成的。在大多数Web服务器的SSL配置中，使用这个文件可以确保客户端（如Web浏览器）能够信任你的证书，即能够通过证书链验证到达一个根CA，该根CA已被客户端信任。
  • 用途：在配置SSL/TLS时，fullchain.pem通常用于服务器配置中指定证书文件。例如，在Nginx中，会用它来设置ssl_certificate指令。

privkey.pem

  • 含义：privkey.pem文件包含了你的私钥，这是在生成CSR（证书签名请求）时创建的。私钥是安全通信的基础，用于在SSL/TLS握手过程中对服务器端信息进行加密，确保只有对应的公钥（即你的服务器证书）能够解密。私钥必须保密，任何泄露都可能导致通信被解密。
  • 用途：在Web服务器的SSL配置中，privkey.pem用于设置私钥文件的位置。例如，在Nginx配置中，会用它来设置ssl_certificate_key指令。

总结

  • fullchain.pem：包含你的域名证书和中间证书的全部内容，用于服务器配置中指定证书链。
  • privkey.pem：包含你的私钥，用于服务器配置中指定私钥文件的位置。

在配置SSL/TLS时，确保正确使用这些文件，同时保护好你的私钥，避免安全风险。

注1：如果你没有开放443，80端口，申请的时候会报错
注2：如果你没有将域名解析到这个服务器的ip也会报错，会出现类似下面的回复。
在这里插入图片描述

三、配置nginx

1、nginx安装

sudo apt update
sudo apt install nginx

2、配置nginx.conf

打开nginx.conf

 vim /etc/nginx/nginx.conf

下面是一个nginx.conf模版

# nginx.conf
worker_processes auto; # 与worker_connections乘积表示实际处理事件的总数events {worker_connections 1024;  # 每个工作进程连接数
}http {include       mime.types;   # 文件扩展名与文件类型映射表default_type  application/octet-stream;client_max_body_size 10M;sendfile        on;            # 减少网络报文数量keepalive_timeout  65; # 链接超时时间，自动断开，如果为0则无限时长。# HTTP server配置（重定向到HTTPS）server {listen 80;  # 监听80端口server_name bak.sligenai.cn;             # 替换为你的域名return 301 https://$host$request_uri;  # 强制重定向到HTTPS}# HTTPS server配置server {listen 443 ssl;  # 监听443端口server_name bak.sligenai.cn;             # 替换为你的域名ssl_certificate /etc/letsencrypt/live/bak.sligenai.cn/fullchain.pem;          #替换为你的fuuchian.pemssl_certificate_key /etc/letsencrypt/live/bak.sligenai.cn/privkey.pem;    #替换为你的privkey.pemroot         /usr/share/nginx/html;location / {index index.html index.htm;rewrite / /login permanent; # 根据需求选择是否保留}location /vue-test {                              #替换为你的项目路由，注意需要一开头的base一致index index.html index.htm;try_files $uri $uri/ /vue-test/index.html;       #这个则是/路由/index.html 前面的部分一致不用动。   }location /abc {   #替换为请求拦截器中的baseURL的地址，如果没有后端则可以删掉这一部分add_header Cache-Control no-cache;add_header Pragma no-cache;add_header Expires 0;proxy_pass  http://localhost:3777/;   #后端地址}error_page  404  /404.html;  # 自定义404页面location = /404.html {internal;}error_page  500 502 503 504  /50x.html;  # 自定义500页面location = /50x.html {internal;}}}

注1：上面一共两个路由 /vue-test、 /abc ，分别为前端和后端。
注2：如果有多个项目则复制/vue-test 在旁边粘贴一个，改掉路由即可。
注3： 如果有其他域名，则额外把上面这个server复制一遍，即可。

3、重新运行nginx

在这里插入图片描述
检测nginx.conf是否配置正常

nginx -t

如果报错，则按照提示修改即可。

重新运行nginx

sudo systemctl reload nginx

4、vue 编译后文件上传服务器

在这里我们使用SCP完成传输

scp（Secure Copy
Protocol）是一个在Linux和Unix系统上广泛使用的命令行工具，用于在本地和远程之间安全地复制文件和目录。它基于SSH（Secure
Shell）协议，提供了数据传输的加密和安全认证，确保在传输过程中数据不会被窃听或篡改。

scp的基本语法非常直接，可以用来复制文件或目录从一个位置到另一个位置。这里有几个常见的用法示例：

  1. 复制本地文件到远程
  2. 模版：scp /path/to/local/file username@remotehost:/path/to/remote/directory

我们要拷贝编译后文件到nginx的web页面放置地方：/usr/share/nginx/html
所以我们到项目路径下执行指令如下：(ip替换为你的)

scp -r .\dist\ root@123.57.210.235:/usr/share/nginx/html

在这里插入图片描述
重命名dist为路由的地址

四、后话

1、完结

然后我们进入:https://bak.sligenai.cn/vue-test/，可以看到已经访问成功了！
恭喜你！掌握了如何从零开始的 vue项目部署到服务器（vue项目build打包+nginx部署+配置ssl证书），执行上面的步骤如果有什么问题欢迎在下面提出！

至此，你已经成功为你的网站安装了Let’s Encrypt SSL证书，并配置了自动续订。你的网站现在应该也可以通过HTTPS安全访问了。
在这里插入图片描述

2、每日小tip：ssl证书自动续订。

let’s Encrypt的有效期是90天，怎么自动更新呢？运行下面的代码：

sudo certbot renew --dry-run

如果这个命令成功执行，那么证书续订工作将自动进行。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/58261.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ubuntu内核更新导致显卡驱动掉的解决办法

ubuntu内核更新导致显卡驱动掉的解决办法

方法1，DKMS指定内核版本 用第一个就行 1，借鉴别人博客解决方法 2，借鉴别人博客解决方法 方法2，删除多于内核的方法 系统版本：ubuntu20.24 这个方法是下下策，如果重装驱动还是不行，就删内核在…
阅读更多...
豆瓣同城活动采集-过去一年到未来已定档活动

豆瓣同城活动采集-过去一年到未来已定档活动

通过采集豆瓣同城活动，来辅助分析一个城市的文商旅体活跃繁荣程度。 以成都为例，2023年10月30日到2024年11月未来已定档活动期间，豆瓣同城活动共有975场。 示例数据： 活动网址：有，此处不显示 封图网址&…
阅读更多...
海量数据面试题

海量数据面试题

⭐️前言⭐️ 本篇文章主要针对在面试时可能涉及到的海量数据的面试题，该类型面试题常常考虑通过位图、布隆过滤器或者哈希的方式来解决。 🍉欢迎点赞 👍 收藏 ⭐留言评论 🍉博主将持续更新学习记录收获，友友们有任何…
阅读更多...
pytorh学习笔记——cifar10（九）使用torhvision的标准resnet模型

pytorh学习笔记——cifar10（九）使用torhvision的标准resnet模型

之前的demo都是模仿和简化了已有的模型，也可以直接调用orhvision的标准模型，代码将更加简单。 新建resnet18.py import torch.nn as nn from torchvision import modelsclass ResNet18(nn.Module):def __init__(self, num_classes10):super(ResNet18, …
阅读更多...
json与python中字典的互相转化

json与python中字典的互相转化

json的定义 JSON （JavaScript Object Notation） ，是一种轻量级的数据交换格式。它的使用范围很广，并成为 ECMA 标准，可以被使用在多种编程语言中，用于前后端之间的数据传输、存储和交换数据。可以说是“用…
阅读更多...
如何快速分析音频中的各种频率成分

如何快速分析音频中的各种频率成分

从视频中提取音频 from moviepy.editor import VideoFileClip# Load the video file and extract audio video_path "/mnt/data/WeChat_20241026235630.mp4" video_clip VideoFileClip(video_path)# Extract audio and save as a temporary file for further anal…
阅读更多...
Rust 力扣 - 5. 最长回文子串

Rust 力扣 - 5. 最长回文子串

文章目录 题目描述题解思路题解代码题解链接 题目描述 题解思路 从中心点先寻找和中心点相等的左右端点，在基于左右端点进行往外扩散，直至左右端点不相等或者越界，然后左右端点这个范围内就是我们找寻的回文串，我们遍历中心点&am…
阅读更多...
在Java中，需要每120分钟刷新一次的`assetoken`，并且你想使用Redis作为缓存来存储和管理这个令牌

在Java中，需要每120分钟刷新一次的`assetoken`，并且你想使用Redis作为缓存来存储和管理这个令牌

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……） 2、学会Oracle数据库入门到入土用法(创作中……） 3、手把手教你开发炫酷的vbs脚本制作(完善中……） 4、牛逼哄哄的 IDEA编程利器技巧(编写中……） 5、面经吐血整理的 面试技…
阅读更多...
macOS 15 Sequoia dmg格式转用于虚拟机的iso格式教程

macOS 15 Sequoia dmg格式转用于虚拟机的iso格式教程

想要把dmg格式转成iso格式，然后能在虚拟机上用，最起码新版的macOS镜像是不能用UltraISO，dmg2iso这种软件了，你直接转放到VMware里绝对读不出来，办法就是，在Mac系统中转换为cdr，然后再转成iso&am…
阅读更多...
Unity3D学习FPS游戏（3）玩家第一人称视角转动和移动

Unity3D学习FPS游戏（3）玩家第一人称视角转动和移动

前言：上一篇实现了角色简单的移动控制，但是实际游戏中玩家的视角是可以转动的，并根据转动后视角调整移动正前方。本篇实现玩家第一人称视角转动和移动，觉得有帮助的话可以点赞收藏支持一下！ 玩家第一人称视角 修复小问…
阅读更多...
NAT技术和代理服务器

NAT技术和代理服务器

NAT IP原理 之前我们讨论了, IPv4协议中, IP地址数量不充足的问题 NAT技术当前解决IP地址不够用的主要手段, 是路由器的一个重要功能;NAT能够将私有IP对外通信时转为全局IP. 也就是就是一种将私有IP和全局IP相互转化的技术方法:很多学校, 家庭, 公司内部采用每个终端设置私有…
阅读更多...
批处理操作的优化

批处理操作的优化

原来的代码 Override Transactional(rollbackFor Exception.class) public void batchAddQuestionsToBank(List<Long> questionIdList, Long questionBankId, User loginUser) {// 参数校验ThrowUtils.throwIf(CollUtil.isEmpty(questionIdList), ErrorCode.PARAMS_ERR…
阅读更多...
2023IKCEST第五届“一带一路”国际大数据竞赛--社交网络中多模态虚假 媒体内容核查top11

2023IKCEST第五届“一带一路”国际大数据竞赛--社交网络中多模态虚假 媒体内容核查top11

比赛链接&#xff1a;https://aistudio.baidu.com/competition/detail/1030/0/introduction PPT链接&#xff1a;https://www.ikcest.org/bigdata2024/zlxz/list/page.html 赛题 社交网络中多模态虚假媒体内容核查 背景 随着新媒体时代信息媒介的多元化发展&#xff0c;各种内容…
阅读更多...
GitHub Star 数量前 5 的开源应用程序生成器

GitHub Star 数量前 5 的开源应用程序生成器

欢迎来的 GitHub Star 数量排名系列文章的第 7 篇——最受欢迎的应用程序生成器。 之前我们已经详细探讨过&#xff1a;在 GitHub 上最受欢迎的——无代码工具、低代码项目、内部工具、CRUD项目、自部署项目和 Airtable 开源替代品。累计超过 50 个优质项目&#xff01;&#…
阅读更多...
橘子多开同步器 v6.0 免费版

橘子多开同步器 v6.0 免费版

下载&#xff1a; 【1】https://drive.uc.cn/s/ddb0774e92924?public1 【2】https://pan.quark.cn/s/b5b1aae8c331 橘子多开同步器是一款专门为了游戏工作室而打造的免费游戏客户端多开同步工具&#xff0c;涵盖了包括客户端多开、客户端键鼠同步、智能防封等功能。 功能介…
阅读更多...
Linux 进程优先级 进程切换

Linux 进程优先级 进程切换

目录 优先级 概念 为什么优先级要限制在一定范围内 进程切换 方式 EIP寄存器(程序计数器) 进程在运行时会使用寄存器来保存临时数据 进程的上下文是什么&#xff1f; 进程的上下文保存到哪&#xff1f; 内核栈或专门的上下文结构也在内核空间&#xff1f;那为什么不直…
阅读更多...
海外逆向代购：新机遇下的跨境赚钱之道

海外逆向代购：新机遇下的跨境赚钱之道

所谓逆向代购&#xff0c;即利用海外客源&#xff0c;将中国的优质商品反向代购至海外市场&#xff0c;实现跨境赚钱的同时&#xff0c;也让更多中国商品走向世界。 近年来&#xff0c;随着中国经济的飞速发展和消费水平的不断提升&#xff0c;中国商品在全球市场上的认可度越来…
阅读更多...
一个简单的例子，说明Matrix类的妙用

一个简单的例子，说明Matrix类的妙用

在Android、前端或者别的平台的软件开发中&#xff0c;有时会遇到类似如下需求&#xff1a; 将某个图片显示到指定的区域&#xff1b;要求不改变图片本身的宽高比&#xff0c;进行缩放&#xff1b;要求最大限度的居中填充到显示区域。 以下示意图可以简单描绘该需求 以Androi…
阅读更多...
ETL、ELT和反向ETL都有什么不同？怎么选择？

ETL、ELT和反向ETL都有什么不同？怎么选择？

数据处理是现代企业中不可或缺的一部分。随着数据量的不断增长&#xff0c;如何高效地处理、转换和加载数据变得尤为重要。本文将介绍三种常见的数据处理方式&#xff1a;ETL、ELT和反向ETL&#xff0c;帮助读者更好地理解和选择适合自己业务需求的方式。 一、ETL 定义&#…
阅读更多...
深入理解 SQL 中的 WITH AS 语法

深入理解 SQL 中的 WITH AS 语法

在日常数据库操作中&#xff0c;SQL 语句的复杂性往往会影响到查询的可读性和维护性。为了解决这个问题&#xff0c;Oracle 提供了 WITH AS 语法&#xff0c;这一功能可以极大地简化复杂查询&#xff0c;提升代码的清晰度。本文将详细介绍 WITH AS 的基本用法、优势以及一些实际…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023