使用Nginx配置SSL以及部署前端项目

简介: 本文介绍了如何使用Nginx配置SSL证书以启用HTTPS,并展示了如何通过Nginx部署前端项目,包括配置SSL证书、设置代理和负载均衡的示例。

简单记录一下使用Nginx配置SSL以及部署前端项目

1、配置SSL

openssl pkcs12 -in cert.pfx -nodes -out cert.pem
cd /home/senwill-back/first_project/
ls
sh app.sh status
cd /etc/nginx/
ls
openssl pkcs12 -in cert.pfx -nodes -out cert.pem
cd /usr/lib/ssl
ls
cp openssl.cnf openssl.old.cnf
cd /usr/local/openssl/ssl/
ls
cp openssl.cnf /usr/lib/ssl/
openssl pkcs12 -in cert.pfx -nodes -out cert.pem
cd /etc/nginx
pwd
ls
openssl pkcs12 -in cert.pfx -nodes -out cert.pem
pwd
ls
openssl pkcs12 -in cert.pfx -nodes -out cert.pem
openssl rsa -in cert.pem -out cert.key
cd /usr/sbin/
ls
./nginx -t
pwd
cd /etc/nginx/
openssl x509 -in cert.pem -out cert.crt
cd /usr/sbin
ls
./nginx -t
./nginx -s reload

2、配置文件(nginx.conf)


#user  nobody; //设置使用Nginx服务的系统用户
user  root;
worker_processes  1; //工作进程数

#error_log  logs/error.log; //全局错误日志定义类型
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid; //Nginx服务启动时的pid


events {
    //事件模块
    worker_connections  1024; //每个进程允许最大连接数
}


http {
   
    include       mime.types;
    default_type  application/octet-stream;

    #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;

    # 80端口的服务
    server {
   
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
   
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        # 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
   
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
   
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
   
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
   
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
   
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
   
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
   
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
   
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

    # 443端口的服务
    server {
   
        listen       443 ssl;
        server_name  example.com;

        ssl_certificate      cert.crt;
        ssl_certificate_key  cert.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location ^~ /senwill/project_1/api {
   
            proxy_pass https://IP_1:Port_1;
            // 设置链接超时时间为3800秒
            proxy_read_timeout  3800s;
            proxy_connect_timeout 3800s;
            proxy_send_timeout 3800s;
            send_timeout 3800s;
        }

        location ^~ /senwill/project_1/ {
   
            root   html;
            index  index.html index.htm;
        }

        location ^~ /senwill/project_2/api {
   
            proxy_pass https://IP_2:Port_2;
            // 设置链接超时时间为3800秒
            proxy_read_timeout  3800s;
            proxy_connect_timeout 3800s;
            proxy_send_timeout 3800s;
            send_timeout 3800s;
        }

        location ^~ /senwill/project_2/ {
   
            root   html;
            index  index.html index.htm;
        }

        location ^~ /senwill/project_3/api {
   
            proxy_pass https://IP_3:Port_3;
            // 设置链接超时时间为3800秒
            proxy_read_timeout  3800s;
            proxy_connect_timeout 3800s;
            proxy_send_timeout 3800s;
            send_timeout 3800s;
        }

        location ^~ /senwill/project_3/ {
   
            root   html;
            index  index.html index.htm;
        }

        location ^~ /senwill/project_4/api {
   
            proxy_pass https://IP_4:Port_4;
            // 设置链接超时时间为3800秒
            proxy_read_timeout  3800s;
            proxy_connect_timeout 3800s;
            proxy_send_timeout 3800s;
            send_timeout 3800s;
        }

        location ^~ /senwill/project_4/ {
   
            root   html;
            index  index.html index.htm;
        }
    }
}
# 负载均衡
    upstream springboot {
   
        server 10.67.132.49:9090;
    }

    # 80端口的服务
    server {
    
        listen       80;
        server_name  10.67.132.49; # 此处应为域名

        location / {
   
            alias  html;
            index  index.html index.htm;
            try_files $uri $uri/ /senwill/index.html;
            proxy_pass http://localhost;
        }

        location ^~ /senwill/ {
   
            root   html/senwill;
            index  index.html index.htm;
            proxy_pass http://localhost;
        }

        location ^~ /sz-senwill-sky/api/ {
   
          proxy_pass http://springboot;
        }

        location ^~ /sz-senwill-sky/auth/api/ {
   
          proxy_pass http://springboot;
        }
    }
目录
相关文章
|
3天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
15天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
nginx配置反向代理404问题
|
9天前
|
安全 应用服务中间件 网络安全
49.3k star,本地 SSL 证书生成神器,轻松解决 HTTPS 配置痛点
mkcert是一款由Filippo Valsorda开发的免费开源工具,专为生成受信任的本地SSL/TLS证书而设计。它通过简单的命令自动生成并安装本地信任的证书,使本地环境中的HTTPS配置变得轻松无比。mkcert支持多个操作系统,已获得49.2K的GitHub Star,成为开发者首选的本地SSL工具。
|
4天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
10天前
|
应用服务中间件 网络安全 PHP
八个免费开源 Nginx 管理系统,轻松管理 Nginx 站点配置
Nginx 是一个高效的 HTTP 服务器和反向代理,擅长处理静态资源、负载均衡和网关代理等任务。其配置主要通过 `nginx.conf` 文件完成,但复杂设置可能导致错误。本文介绍了几个开源的 Nginx 可视化配置系统,如 Nginx UI、VeryNginx、OpenPanel、Ajenti、Schenkd nginx-ui、EasyEngine、CapRover 和 NGINX Agent,帮助简化和安全地管理 Nginx 实例。
|
14天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
35 6
|
16天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
46 7
|
15天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
29 2
|
20天前
|
缓存 负载均衡 应用服务中间件
Nginx配置
【10月更文挑战第22天】在实际配置 Nginx 时,需要根据具体的需求和环境进行调整和优化。同时,还需要注意配置文件的语法正确性和安全性。
35 7
|
22天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。