0
0

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

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

文章目录

一、前言

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

二、vue项目部署前配置

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

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

  1. import{ fileURLToPath,URL}from'node:url'import{ defineConfig }from'vite'import vue from'@vitejs/plugin-vue'// https://vite.dev/config/exportdefaultdefineConfig({
  2.   base:'vue-test',//这个为项目名
  3.   plugins:[vue(),],
  4.   resolve:{
  5.     alias:{'@':fileURLToPath(newURL('./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 + 域名，即可查询域名解析对象

  1. nslookup bak.sligenai.cn

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

3、let’s Encrypt 证书申请

（1）certbot安装

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

  1. sudo apt update
  2. sudo apt install certbot python3-certbot-nginx

（2）let’s Encrypt 证书申请

  1.  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

  1. fullchain.pem

和

  1. 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安装

  1. sudo apt update
  2. sudo apt install nginx

2、配置nginx.conf

打开nginx.conf

  1.  vim /etc/nginx/nginx.conf

下面是一个nginx.conf模版

  1. # nginx.conf
  2. worker_processes auto; # 与worker_connections乘积表示实际处理事件的总数
  4. events {
  5.     worker_connections 1024;  # 每个工作进程连接数
  6. }
  8. http {
  9.     include       mime.types;   # 文件扩展名与文件类型映射表
  10.     default_type  application/octet-stream;
  11.     client_max_body_size 10M;
  12.     sendfile        on;            # 减少网络报文数量
  13.     keepalive_timeout  65; # 链接超时时间，自动断开，如果为0则无限时长。
  15.     # HTTP server配置（重定向到HTTPS）
  16.     server {
  17.         listen 80;  # 监听80端口
  18.         server_name bak.sligenai.cn;             # 替换为你的域名
  19.         return 301 https://$host$request_uri;  # 强制重定向到HTTPS
  20.     }
  21.     # HTTPS server配置
  22.     server {
  23.         listen 443 ssl;  # 监听443端口
  24.         server_name bak.sligenai.cn;             # 替换为你的域名
  26.         ssl_certificate /etc/letsencrypt/live/bak.sligenai.cn/fullchain.pem;          #替换为你的fuuchian.pem
  27.         ssl_certificate_key /etc/letsencrypt/live/bak.sligenai.cn/privkey.pem;    #替换为你的privkey.pem
  29.         root         /usr/share/nginx/html;
  31.         location / {
  32.             index index.html index.htm;
  33.             rewrite / /login permanent; # 根据需求选择是否保留
  34.         }
  36.      
  37.         location /vue-test {                              #替换为你的项目路由，注意需要一开头的base一致
  38.             index index.html index.htm;
  39.             try_files $uri $uri/ /vue-test/index.html;       #这个则是/路由/index.html 前面的部分一致不用动。   
  40.         }
  41.      
  42.           location /abc {   #替换为请求拦截器中的baseURL的地址，如果没有后端则可以删掉这一部分
  43.             add_header Cache-Control no-cache;
  44.             add_header Pragma no-cache;
  45.             add_header Expires 0;
  46.             proxy_pass  http://localhost:3777/;   #后端地址
  47.         }
  48.         error_page  404  /404.html;  # 自定义404页面
  49.         location = /404.html {
  50.             internal;
  51.         }
  53.         error_page  500 502 503 504  /50x.html;  # 自定义500页面
  54.         location = /50x.html {
  55.             internal;
  56.         }
  57.     }
  58.     
  60.    
  61. }

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

3、重新运行nginx

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

  1. nginx -t

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

重新运行nginx

  1. 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替换为你的)

  1. 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天，怎么自动更新呢？运行下面的代码：

  1. sudo certbot renew --dry-run

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

标签： vue.js 服务器 nginx
本文转载自: https://blog.csdn.net/qq_51116518/article/details/143345353
版权归原作者 风吹落叶花飘荡 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？