nginx部署多个vue项目共用443端口

转载

月光倾城美 2024-10-10 09:16:49

文章标签 nginx Vue 跨平台 文章分类 运维

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压缩包到任意目录，解压缩后的目录如下

nginx部署多个vue项目共用443端口_nginx

第三步进入到html目录，在xshell界面通过执行rz命令将第一步准备的压缩文件复制到html文件夹中，复制好之后，执行unzip dist.zip解压缩该文件夹，最后html的目录结构为

nginx部署多个vue项目共用443端口_nginx_02

其中dist就是nginx最终映射所在文件第四步修改nginx的配置文件，我们进入到conf目录，可以看到如下结构

nginx部署多个vue项目共用443端口_nginx_03

其中nginx.conf文件是我们需要修改的，通过vi命令，我们来打开看下

nginx部署多个vue项目共用443端口_Vue_04

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部署多个vue项目共用443端口_跨平台_05

这就说明我们的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部署多个vue项目共用443端口_Vue_06

至此，我们的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文件夹目录创建私钥等文件，目录结构如下

nginx部署多个vue项目共用443端口_nginx_07

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，其最终的代理流程是这样的