lectron + Vue跨平台应用（十六）基础技法（八）Nginx配置https并部署Vue

最新推荐文章于 2024-05-27 14:59:58 发布

yi_master

最新推荐文章于 2024-05-27 14:59:58 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/yi_master/article/details/107782033

版权

前端专栏收录该内容

27 篇文章 12 订阅

订阅专栏

1: nginx部署前端vue项目
 2: nginx配置https
3: 如何修改console面板和浏览器窗口主动修改为https
4: 彻底理解在本地进行配置https的含义

1: nginx部署前端vue项目

在linux环境中使用nginx部署Vue项目主要分为如下几个步骤

项目打包
nginx修改配置文件
nginx部署

1）针对项目打包比较简单，使用如下命令即可

npm run build

该命令会在工程文件目录生成一个dist文件夹，我们先把他压缩一下，假设压缩后的文件为dist.zip

2）然后我们再看下如何在linux系统中修改nginx配置文件
第一步我们去下载nginx的压缩包，假设当前下载的nginx压缩包版本为“nginx-1.17.9”
第二步解压缩nginx压缩包到任意目录，解压缩后的目录如下
在这里插入图片描述
第三步进入到html目录，在xshell界面通过执行rz命令将第一步准备的压缩文件复制到html文件夹中，复制好之后，执行unzip dist.zip解压缩该文件夹，最后html的目录结构为

其中dist就是nginx最终映射所在文件

第四步修改nginx的配置文件，我们进入到conf目录，可以看到如下结构
在这里插入图片描述
其中nginx.conf文件是我们需要修改的，通过vi命令，我们来打开看下

listen就是nginx监听的端口，此处我们选了一个20011端口进行监听
location对象中，root就是vue项目的地址；index就是映射的文件；
在绝大多数项目中都是采用前后端分离的，所以我们需要配置下nginx的代理来完成请求，代理的配置就在proxy_pass中

当完成上述的配置酒后，就可以启动nginx预览你的vue项目了；
我们需进入到sbin目录，在sbin目录执行如下命令

./nginx

如果vue前端有修改，只需要替换html目录下的dist文件夹，并重新加载nginx即可

./nginx -s reload

补充两个知识点，
1）如果你希望在XShell界面将远程机器上的文件复制到本机，可以通过如下命令

sz xxx.txt

2）停止nginx

./nginx -s stop

2: nginx配置https

如果你的项目需要使用https协议，那么我们就需要额外申请ssl证书和对nginx做一些额外的配置，这里我们使用的SSL证书是自签名的，当然你也可以通过阿里云，腾讯等平台进行申请

1）首先我们检测下当前nginx是否支持SSL模块，当前的nginx版本应该默认支持SSL模块，不需要额外的install
我们先进入到sbin目录，然后执行如下命令

./nginx -V

这里注意下，是大写的V，执行命令之后你会得到如下信息
在这里插入图片描述
这就说明我们的nginx是支持ssl模块的；

第2步，我们通过openssl命令来创建证书，具体的步骤如下
2.1）进入到nginx目录
2.2）创建私钥

openssl genrsa -out server.key 1024

其中server.key为你创建的私钥名称
2.3）生成CA证书

openssl req -new -key server.key -out server.csr

在命令的执行过程中会提示让你输入一些信息，一路回车即可

1 req: 这是一个大命令，提供生成证书请求文件，验证证书，和创建根CA
2 -new: 表示新生成一个证书请求
3 -x509: 直接输出证书
4 -key: 生成证书请求时用到的私钥文件
5 -out：输出文件

2.4）生成CA跟证书

openssl x509 -req -in server.csr -extensions v3_ca -signkey server.key -out server.crt

当完成这些后，在conf目录就会多了三个文件，分别为：
1：server.key
2：server.csr
3：server.crt
其中.key文件和.crt文件是我们需要在nginx配置文件中进行配置的

2.5）最后我们在conf中的nginx.conf文件中配置下证书即可，配置比较简单，只需要新增如下两行即可
在这里插入图片描述
至此，我们的nginx就支持https协议了。

补充，在配置的过程中，如果出现如下错误

nginx报错 the “ssl” directive is deprecated, use the “listen … ssl”

则只需要删除ssl on就行了，改成如下即可

server {
	listen 20011 ssl;
}

3: 如何修改console面板和浏览器窗口主动修改为https

当经过上面的配置之后，你会发现vs终端面板启动之后还是http协议的形式，同时你的vue项目在浏览器中并不会主动修改为https的形式，为了解决这两个问题，我们需要进行一些改造 1）在build文件夹目录创建私钥等文件，目录结构如下

在这里插入图片描述
2）在项目启动文件，如webpack.dev.conf.js中引入如下代码

const https = require('https')
const fs = require('fs')

const options = {
  cert: fs.readFileSync('../build/cert/file.cert'),
  key: fs.readFileSync('../build/cert/private.key')
}
https.createServer(options, app).listen(443)

4: 彻底理解在本地进行配置https的含义

在上面我们在vue前端进行了两种类型的配置，然后你是不是就觉得我访问服务端接口就是以https形式了？而且你会发现vue项目通过F12查看也是https的；

错了，经过上述的配置，虽然看似F12是以https形式，但是最终还是以http形式来交互的，这是为什么？

首先我们知道VUE项目是通过http-proxy-middleware来进行代理的，而且devServer属性的proxy功能就是用的中间件http-proxy-middleware，devServer中的proxy只是帮你做一个转发，所以我们上面的配置只是让本地node支持https，其最终的代理流程是这样的

本地https://localhost:3000/api/hello ------> http-proxy-middleware ----> http://xxx.migu.cn/api/hello

即外部看来是https，但内部其实接口做http转发。所以vue项目只能控制你的localhost 是http还是https；

如果你想让远端接口是以https形式访问，最终还是要配置如方案一那样配置SSL，这样可以做到
1：vue主页以https的形式展示
2：远程接口以https的形式访问

yi_master

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
lectron + Vue跨平台应用（十六）基础技法（八）Nginx配置https并部署Vue

Electron + Vue + Vscode构建跨平台应用（一）知识点补充Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析Electr
复制链接

扫一扫