SpringBoot和Vue2项目配置https协议

1、SpringBoot项目

① 去你自己的云申请并下载好相关文件,SpringBoot下载的是Tomcat(默认),Vue2下载的是Nginx

② 将下载的压缩包里面的.pfx后缀文件拷贝到项目的resources目录下

③ 编辑配置文件

主要是框里面的内容,注意是配置在server

然后就是把项目打成jar包,部署到服务器上即可,这里就不过多赘述了

2、Vue2项目

① 查看nginx是否安装了with-http_ssl_module

进入到你的nginx安装目录下面,我的目录是在(/usr/local/nginx),进入到目录的sbin目录下,输入

# 注意这里是大写的V,小写的只显示版本号 
./nginx -V

如果出现 (configure arguments: --with-http_ssl_module), 则已安装。

一般情况下都是不存在ssl模块的

接下来进入到你的解压缩后的nginx目录,注意这里不是nginx安装目录,是解压缩后的目录,我的是在(/usr/local/nginx-1.14.0),进入目录后,输入

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

接下来执行make,切记不要执行make install,否则会重新安装nginx

make

上述操作执行完成以后,你的目录下会出现objs文件夹,文件夹内存在nginx文件,如图:

② 接下来使用新的nginx文件替换掉之前安装目录sbin下的nginx,注意这里替换的之前可以先将之前的文件备份下,停掉nginx服务

(一定要保证没有nginx进程在运行,先用命令查看是否还有nginx进程在运行,下图则表明还有nginx进程在运行)很重要!很重要!很重要!

ps -ef | grep nginx

然后执行

 ./nginx -s stop

如果还是跟上图一样,无法关闭,可以使用杀死进程方式关闭:(很重要这一步,一定要确保之前的进程都杀掉再往下走,不然怎么配置都没意义!!!

ps -ef | grep nginx 
kill -9 进程id 


# 真杀不掉,那就用下面这个指令 
pkill -9 nginx

上面没问题之后,往下走(命令的1.14.0是我nginx的版本,实际操作请以你的版本路径为主,不然会报找不到目录

#替换之前的nginx 
cp /usr/local/nginx-1.14.0/objs/nginx /usr/local/nginx/sbin

成功之后,进入到nginx安装目录下,查看ssl是否成功

# 注意这里是大写的V,小写的只显示版本号 
./nginx -V 


# 可以看到这里出现了configure arguments: --with-http_ssl_module 证明已经安装成功

③ 配置ssl证书

将下载的证书(这里的证书就是第一点提到的,里面有两个文件,后缀分别为:.key,.pem)解压上传至服务器,(只需pem文件和key文件),我将它放在nginx安装目录下,创建cert文件夹

mkdir cert

④ 修改nginx.conf配置文件(直接Ctrl+A,再CV全部覆盖掉nginx.conf里面的内容即可

(主要改里面的第23、45、48、49、58行)

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    server {
        # 监听端口80
        listen 80;
        # 配置域名 ---改---
        server_name xxx.com;
        # 重定向到HTTPS协议
        rewrite ^(.*)$ https://$host$1 permanent;
    }

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

 server {
          listen       443 ssl;
          #你的域名,申请证书时填的是什么域名就填什么域名 ---改---
          server_name  xxx.com;
    
           #上传的证书 ---改---
          ssl_certificate      ../cert/xxx.pem;
          ssl_certificate_key  ../cert/xxx.key;
    
          ssl_session_cache    shared:SSL:1m;
          ssl_session_timeout  5m;
    
          ssl_ciphers  HIGH:!aNULL:!MD5;
          ssl_prefer_server_ciphers  on;

          #---改---
           location / {
                # 你前端页面的路径        
                root xxx/dist;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
            }
                
         error_page 404 /404.html;
           location = /404.html {
         }
        
         error_page 500 502 503 504 /50x.html;
           location = /50x.html {
         }
      }

}

⑤ 重启nginx

./nginx -s reload

然后就可以通过https访问你的网站了,如果能够正常访问则说明配置成功,完结撒花,嘻嘻~~~

  • 14
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Spring BootVue项目配置应用监控,可以采取以下步骤: 1. 在Spring Boot项目中添加Spring Boot Actuator依赖,以便可以访问应用的监控端点。可以在pom.xml文件中添加以下依赖: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> ``` 2. 配置Spring Boot Actuator端点的访问路径和安全性。可以在application.properties或application.yml文件中添加以下配置: ``` # 配置Actuator端点的访问路径 management.endpoints.web.base-path=/actuator # 开启Actuator端点的安全认证 management.endpoint.health.show-details=always management.endpoints.web.exposure.include=health,info,metrics management.endpoint.info.enabled=true management.endpoint.metrics.enabled=true management.security.enabled=true management.security.roles=ACTUATOR_ADMIN ``` 3. 在Vue项目中添加Vue.js Devtools插件,以便可以实时查看Vue组件的状态和性能。可以在Chrome浏览器中安装Vue.js Devtools插件。 4. 配置Vue.js Devtools插件的选项,以便可以连接到本地的Vue.js应用程序。可以在Chrome浏览器中打开Vue.js Devtools插件,然后在选项中添加以下配置: ``` { "host": "localhost", "port": 8081, "https": false } ``` 其中,host是Vue.js应用程序的主机名,port是应用程序的端口号,https表示是否使用HTTPS协议。 5. 在Vue组件中添加性能监控代码,以便可以实时查看组件的性能数据。可以在Vue组件的mounted()方法中添加以下代码: ``` mounted() { this.$nextTick(() => { if (window.performance && window.performance.mark) { window.performance.mark('vue-app-mounted') } }) } ``` 其中,window.performance.mark()方法可以在浏览器的性能分析工具中创建一个时间戳,以便可以测量组件的渲染时间。 6. 在Spring Boot项目中添加Micrometer依赖,以便可以将Vue.js应用程序的性能数据发送到监控系统。可以在pom.xml文件中添加以下依赖: ``` <dependency> <groupId>io.micrometer</groupId> <artifactId>micrometer-registry-prometheus</artifactId> <version>1.1.4</version> </dependency> ``` 7. 配置Micrometer的Prometheus注册表,以便可以将Vue.js应用程序的性能数据发送到Prometheus监控系统。可以在application.properties或application.yml文件中添加以下配置: ``` # 配置Prometheus注册表 management.metrics.export.prometheus.enabled=true management.metrics.export.prometheus.endpoint=/prometheus ``` 其中,management.metrics.export.prometheus.enabled表示是否启用Prometheus注册表,management.metrics.export.prometheus.endpoint表示Prometheus注册表的访问路径。 8. 在Prometheus监控系统中添加Vue.js应用程序的监控指标,以便可以实时查看应用程序的性能数据。可以在Prometheus的配置文件中添加以下配置: ``` - job_name: 'vue-app' metrics_path: '/prometheus' static_configs: - targets: ['localhost:8081'] ``` 其中,job_name是监控任务的名称,metrics_path是Prometheus注册表的访问路径,targets是Vue.js应用程序的地址和端口号。 9. 在Grafana监控系统中创建Vue.js应用程序的监控仪表板,以便可以实时查看应用程序的性能数据。可以在Grafana中添加以下数据源: ``` { "name": "Prometheus", "type": "prometheus", "url": "http://localhost:9090", "access": "proxy", "isDefault": true } ``` 其中,url是Prometheus监控系统的地址和端口号。 然后,可以在Grafana中创建一个新的仪表板,然后添加Vue.js应用程序的监控指标,并配置仪表板的数据展示方式和报警规则,以便可以及时发现应用程序的性能问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值