湖北广盛建设集团网站,成华区微信网站建设公司,网站建设实训课,wordpress文章的分享代码从零开始的 vue项目部署到服务器详细步骤#xff08;vue项目build打包nginx部署配置ssl证书#xff09; 文章目录 从零开始的 vue项目部署到服务器详细步骤#xff08;vue项目build打包nginx部署配置ssl证书#xff09;一、前言二、vue项目部署前配置1、vite.config.js 增加…从零开始的 vue项目部署到服务器详细步骤vue项目build打包nginx部署配置ssl证书 文章目录 从零开始的 vue项目部署到服务器详细步骤vue项目build打包nginx部署配置ssl证书一、前言二、vue项目部署前配置1、vite.config.js 增加base字段2、src/router/index.js 在历史记录中加入BASR_URL3、src/utils/request.js 加上后端的baseURL 二、加SSl证书配置https1、将域名解析到你的服务器2、验证该域名是否解析成功3、lets Encrypt 证书申请1certbot安装2lets Encrypt 证书申请 三、配置nginx1、nginx安装2、配置nginx.conf3、重新运行nginx4、vue 编译后文件上传服务器 四、后话1、完结2、每日小tipssl证书自动续订。 一、前言
未来的开发者们请上座在这里许多人在自己的电脑做完前端后下一步就是怎么部署到服务器上对外开放了。 ps默认各位大大已经购买云服务器了哈。 我的服务器是ubutu 22.04第一次跟随本教程的时候最好也是ubuntu系统避免环境问题。
二、vue项目部署前配置
为了便于演示我新建了一个项目用于演示。
1、vite.config.js 增加base字段
import { fileURLToPath, URL } from node:urlimport { 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 证书申请
1certbot安装
我们需要安装Certbot并用于申请let’s Encrypt 。 打开终端运行以下命令
sudo apt update
sudo apt install certbot python3-certbot-nginx2let’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如果你没有开放44380端口申请的时候会报错 注2如果你没有将域名解析到这个服务器的ip也会报错会出现类似下面的回复。
三、配置nginx
1、nginx安装
sudo apt update
sudo apt install nginx2、配置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配置重定向到HTTPSserver {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 nginx4、vue 编译后文件上传服务器
在这里我们使用SCP完成传输 scpSecure Copy Protocol是一个在Linux和Unix系统上广泛使用的命令行工具用于在本地和远程之间安全地复制文件和目录。它基于SSHSecure Shell协议提供了数据传输的加密和安全认证确保在传输过程中数据不会被窃听或篡改。 scp的基本语法非常直接可以用来复制文件或目录从一个位置到另一个位置。这里有几个常见的用法示例
复制本地文件到远程模版scp /path/to/local/file usernameremotehost:/path/to/remote/directory
我们要拷贝编译后文件到nginx的web页面放置地方/usr/share/nginx/html 所以我们到项目路径下执行指令如下(ip替换为你的)
scp -r .\dist\ root123.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、每日小tipssl证书自动续订。
let’s Encrypt的有效期是90天怎么自动更新呢运行下面的代码
sudo certbot renew --dry-run如果这个命令成功执行那么证书续订工作将自动进行。
