本篇主要记录vue项目，通过nginx实现https部署的免费方案。主要参考步骤和关键点如下所示。
一、生成证书
进入nginx安装目录
?
1
2
3
4
5
# 进入nginx目录
[root@hecs-402944 nginx]# cd /etc/nginx/
[root@hecs-402944 nginx]# ls
conf.d fastcgi.conf fastcgi_params koi-utf mime.types nginx.conf scgi_params uwsgi_params win-utf
default.d fastcgi.conf.default fastcgi_params.default koi-win mime.types.default nginx.conf.default scgi_params.default uwsgi_params.default
创建ssl文件目录
?
1
2
3
# 创建ssl目录
[root@hecs-402944 nginx]# mkdir ssl
[root@hecs-402944 nginx]# cd ssl
生成server.key，需要设置两次密码
?
1
2
3
4
5
6
7
[root@hecs-402944 ssl]# openssl genrsa -aes256 -out server.key 2048
Generating RSA private key, 2048 bit long modulus
…………………………………………………..+++
……………………………………………………………………………………+++
e is 65537 (0x10001)
Enter pass phrase for server.key:
Verifying – Enter pass phrase for server.key:
生成无密码的server.key
?
1
2
3
4
5
6
# 生成无密码的server.key
[root@hecs-402944 ssl]# openssl rsa -in server.key -out server.key
Enter pass phrase for server.key:
writing RSA key
[root@hecs-402944 ssl]# ls
server.key
创建服务器证书的申请文件 server.csr
此处需要填写具体内容，国家、省份、城市、公司、行业、网站、邮箱等，后面的两次密码直接回车就好。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
[root@hecs-402944 ssl]# openssl req -new -key server.key -out server.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter ., the field will be left blank.
—–
## 国家
Country Name (2 letter code) [XX]:CN
## 省份
State or Province Name (full name) []:heilongjiang
## 城市
Locality Name (eg, city) [Default City]:haerbin
## 公司
Organization Name (eg, company) [Default Company Ltd]:xxxxxxx
## 行业
Organizational Unit Name (eg, section) []:IT
## 网站
Common Name (eg, your name or your servers hostname) []:www.xxxxxxx.com
## 邮箱
Email Address []:xxxxxx@xxxxxx.com.cn
Please enter the following extra attributes
to be sent with your certificate request
## 两次回车
A challenge password []:
An optional company name []:
[root@hecs-402944 ssl]# ll
总用量 8
-rw-r–r– 1 root root 1082 5月 13 09:15 server.csr
-rw-r–r– 1 root root 1679 5月 13 09:11 server.key
生成crt证书文件server.crt
?
1
2
3
4
5
# 生成crt证书文件server.crt
[root@hecs-402944 ssl]# openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 3650
Signature ok
subject=/C=CN/ST=heilongjiang/L=haerbin/O=dongfangtongwangxin/OU=IT/CN=www.tongtech.com/emailAddress=weirx@mvtech.com.cn
Getting Private key
二、nginx配置
前端项目使用nginx部署，所以我们采用nginx爆率443端口，开启ssl。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
ssl on;
ssl_certificate “/etc/nginx/ssl/server.crt”;
ssl_certificate_key “/etc/nginx/ssl/server.key”;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
server_name _;
include /etc/nginx/default.d/*.conf;
root /opt/vue/dist;
gzip_static on;
location / {
proxy_pass http://localhost:13000;
}
# 支持websocket的配置项
location /websocket {
proxy_pass http://localhost:13000;
# WebScoket Support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
}
}
三、修改vue配置文件
项目使用qiankun框架，分为主工程和子工程，所以我们需要修改在主工程当中的子工程配置，主要是访问的ip地址。
修改.env文件，在使用http时是需要配置ip+端口的,修改为https直接使用ip即可。
?
1
2
3
4
5
6
7
#开发环境env配置
NODE_ENV=production
VUE_APP_SYSTEM_URL=//172.16.3.30/system
VUE_APP_COMPONENTS_URL=//172.16.3.30/components
VUE_APP_API_BASIC_URL=//172.16.3.30/basic
VUE_APP_SOCKETURL = wss://172.16.3.29
如上所示，需要将websocket的请求地址由ws修改为wss,否则会报错。
总结
到此这篇关于nginx通过https部署vue项目的文章就介绍到这了,更多相关nginx通过https部署vue内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://juejin.cn/post/7098143397071814663
声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。