nginx通过https部署vue项目的完整步骤

目录

一、生成证书

进入nginx安装目录创建ssl文件目录生成server.key，需要设置两次密码生成无密码的server.key创建服务器证书的申请文件 server.csr生成crt证书文件server.crt



二、nginx配置三、修改vue配置文件总结

本篇主要记录vue项目，通过nginx实现https部署的免费方案。主要参考步骤和关键点如下所示。

一、生成证书

进入nginx安装目录

1. # 进入nginx目录
2. [root@hecs-402944 nginx]# cd /etc/nginx/
3. [root@hecs-402944 nginx]# ls
4. conf.d     fastcgi.conf          fastcgi_params          koi-utf  mime.types          nginx.conf          scgi_params          uwsgi_params          win-utf
5. default.d  fastcgi.conf.default  fastcgi_params.default  koi-win  mime.types.default  nginx.conf.default  scgi_params.default  uwsgi_params.default

复制代码
创建ssl文件目录

1. # 创建ssl目录
2. [root@hecs-402944 nginx]# mkdir ssl
3. [root@hecs-402944 nginx]# cd ssl

复制代码
生成server.key，需要设置两次密码

1. [root@hecs-402944 ssl]# openssl genrsa -aes256 -out server.key 2048
2. Generating RSA private key, 2048 bit long modulus
3. …………………………………………………..+++
4. ……………………………………………………………………………………+++
5. e is 65537 (0x10001)
6. Enter pass phrase for server.key:
7. Verifying – Enter pass phrase for server.key:

复制代码
生成无密码的server.key

1. # 生成无密码的server.key
2. [root@hecs-402944 ssl]# openssl rsa -in server.key -out server.key
3. Enter pass phrase for server.key:
4. writing RSA key
5. [root@hecs-402944 ssl]# ls
6. server.key

复制代码
创建服务器证书的申请文件 server.csr

此处需要填写具体内容，国家、省份、城市、公司、行业、网站、邮箱等，后面的两次密码直接回车就好。

1. [root@hecs-402944 ssl]# openssl req -new -key server.key -out server.csr
2. You are about to be asked to enter information that will be incorporated
3. into your certificate request.
4. What you are about to enter is what is called a Distinguished Name or a DN.
5. There are quite a few fields but you can leave some blank
6. For some fields there will be a default value,
7. If you enter ‘.’, the field will be left blank.
8. —–
9. ## 国家
10. Country Name (2 letter code) [XX]:CN
11. ## 省份
12. State or Province Name (full name) []:heilongjiang
13. ## 城市
14. Locality Name (eg, city) [Default City]:haerbin
15. ## 公司
16. Organization Name (eg, company) [Default Company Ltd]:xxxxxxx
17. ## 行业
18. Organizational Unit Name (eg, section) []:IT
19. ## 网站
20. Common Name (eg, your name or your server’s hostname) []:www.xxxxxxx.com
21. ## 邮箱
22. Email Address []:xxxxxx@xxxxxx.com.cn
24. Please enter the following ‘extra’ attributes
25. to be sent with your certificate request
26. ## 两次回车
27. A challenge password []:
28. An optional company name []:
29. [root@hecs-402944 ssl]# ll
30. 总用量 8
31. -rw-r–r– 1 root root 1082 5月  13 09:15 server.csr
32. -rw-r–r– 1 root root 1679 5月  13 09:11 server.key

复制代码
生成crt证书文件server.crt

1. # 生成crt证书文件server.crt
2. [root@hecs-402944 ssl]# openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 3650
3. Signature ok
4. subject=/C=CN/ST=heilongjiang/L=haerbin/O=dongfangtongwangxin/OU=IT/CN=www.tongtech.com/emailAddress=weirx@mvtech.com.cn
5. Getting Private key

复制代码
二、nginx配置

前端项目使用nginx部署，所以我们采用nginx爆率443端口，开启ssl。

1. server {
2.            listen 443 ssl http2 default_server;
3.            listen [::]:443 ssl http2 default_server;
5.            ssl on;
6.            ssl_certificate “/etc/nginx/ssl/server.crt”;
7.            ssl_certificate_key “/etc/nginx/ssl/server.key”;
8.            ssl_session_cache shared:SSL:1m;
9.            ssl_session_timeout 10m;
10.            ssl_ciphers HIGH:!aNULL:!MD5;
11.            ssl_prefer_server_ciphers on;
13.         server_name  _;
15.         include /etc/nginx/default.d/*.conf;
17.         root /opt/vue/dist;
19.         gzip_static on;
21.         location / {
22.          proxy_pass http://localhost:13000;
23.         }
25.            # 支持websocket的配置项
26.             location /websocket {
27.                 proxy_pass http://localhost:13000;
28.                 # WebScoket Support
29.                 proxy_http_version 1.1;
30.                 proxy_set_header Upgrade $http_upgrade;
31.                 proxy_set_header Connection “upgrade”;
32.             }
33.         }

复制代码
三、修改vue配置文件

项目使用qiankun框架，分为主工程和子工程，所以我们需要修改在主工程当中的子工程配置，主要是访问的ip地址。

修改.env文件，在使用http时是需要配置ip+端口的,修改为https直接使用ip即可。

1. #开发环境env配置
2. NODE_ENV=production
3. VUE_APP_SYSTEM_URL=//172.16.3.30/system
4. VUE_APP_COMPONENTS_URL=//172.16.3.30/components
5. VUE_APP_API_BASIC_URL=//172.16.3.30/basic
7. VUE_APP_SOCKETURL = ‘wss://172.16.3.29’

复制代码 如上所示，需要将websocket的请求地址由ws修改为wss,否则会报错。

总结

到此这篇关于nginx通过https部署vue项目的文章就介绍到这了,更多相关nginx通过https部署vue内容请搜索软件技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件技术网！