【精选记录】在服务器中用nginx同一域名实现部署多个项目，并配置SSL证书，让其使用域名https方式访问，与后端交互时，https跨域问题解决（前后端分离），http访问自动跳转到https

avatar
作者
筋斗云
  • 首页»
  • 业界新闻»
  • 新闻资讯»
  • 【精选记录】在服务器中用nginx同一域名实现部署多个项目，并配置SSL证书，让其使用域名https方式访问，与后端交互时，https跨域问题解决（前后端分离），http访问自动跳转到https
阅读量:0

目录

简介

安装

配置

①http配置

②配置部分解释

③访问 

①https配置

申请证书

②配置部分解释

③访问

简介

"前后端分离配置"指的是将前端（通常是网页或移动应用的用户界面部分）和后端（服务器端的数据处理和业务逻辑）分开部署和管理的做法。在这种架构下，前端和后端可以独立开发、部署和扩展，彼此之间通过API进行通信。

具体来说，前后端分离配置包括以下几个方面的内容：

1. **前端部分**：包括HTML、CSS和JavaScript等文件，用来构建用户界面和实现用户交互。前端可以使用各种框架（如React、Angular、Vue.js等）来进行开发，前端开发人员关注于页面的呈现和用户体验。

2. **后端部分**：包括应用的服务器端代码，负责处理数据、逻辑和安全性等问题。后端可以使用各种语言和框架（如Node.js、Python的Django或Flask、Java的Spring等），后端开发人员关注于数据处理、业务逻辑和安全性。

3. **API设计**：前后端通过API（Application Programming Interface，应用程序接口）进行通信。后端开发人员设计和实现API接口，定义前端可以访问和使用的数据和功能。

4. **部署和扩展**：前后端可以独立部署，并且能够独立扩展和升级。这种分离的架构使得团队能够更灵活地进行开发和运维，前端和后端团队可以专注于各自的领域。

总体来说，前后端分离配置是现代Web开发中的一种架构模式，能够提高开发效率、增强系统的灵活性和可维护性，是许多大型应用和团队采用的一种最佳实践。

话不多说  我们直接在服务器上来部署一下!

安装

在服务器上先安装nginx服务

yum install nginx -y

这里其他的东西就不多说了  直接开始配置

配置

我们进入配置文件目录

在这个目录下   nginx.conf为主配置文件

[root@nginx ~]# cd /etc/nginx/
[root@nginx 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
 
 
#查看主配置文件，这里我复制一部分出来
[root@nginx nginx]# cat nginx.conf
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/
 
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
 
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
 
events {
    worker_connections 1024;
}
 
http {
    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  /var/log/nginx/access.log  main;
 
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;
 
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
 
    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

####################我们看到最后一行这个配置##############################

在nginx.conf文件中，include /etc/nginx/conf.d/*.conf; 这一行的作用是引入指定目录下所有以.conf为后缀的配置文件。具体解释如下：

- **include指令**: 在nginx配置文件中，include指令用于引入其他配置文件或者配置片段，使得配置文件的管理更加模块化和灵活。

- **/etc/nginx/conf.d/*.conf**: 这部分指定了要引入的文件路径。在Linux系统中，通常/etc/nginx/conf.d/目录下存放着nginx的配置文件。通配符*.conf表示引入该目录下所有以.conf为后缀的文件。

因此，这行配置的效果是将/etc/nginx/conf.d/目录下所有以.conf结尾的文件内容，合并到当前的nginx.conf配置文件中，以实现配置的扩展和模块化管理。

这说明可以在/etc/nginx/conf.d目录下建立*.conf的配置，作为Nginx的辅助配置，所以我们可以在conf.d目录下建立conf配置文件。

①http配置

我们首先用http的形式配置一下,不配置SSL

这里我前端打包前的.env文件的配置 ，VUE_APP_API_BASE_URL是Vue的关键后端请求地址也就是后端服务器地址。

因为不想客户端直接请求真实的后端IP+端口，我们可以通过nginx来做到路径代理！！！

可以依据我的配置修改一下

项目一

VUE_APP_API_BASE_URL=http://192.168.126.99/test1

项目二

VUE_APP_API_BASE_URL=http://192.168.126.99/test2

或

项目一

VUE_APP_API_BASE_URL=/test1

项目二

VUE_APP_API_BASE_URL=/test2

vi /etc/nginx/conf.d/http.conf

#编辑配置文件

#项目一
  server {
    listen 9999 ;

    server_name www.nginxtest.com;                     #域名,在虚拟机自己练习就写本机IP

    #前端
    location / {
      root /home/static/project1;                                   #前端文件路径
      index index.html;
      try_files $uri $uri/ /index.html;
    }

    #后端服务
    location /test1/ {
           proxy_pass http://192.168.126.99:9944/;        #这里是真实的项目一后端地址
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Host $http_host;
           proxy_set_header X-Forwarded-Port $server_port;
           proxy_set_header X-Forwarded-Proto $scheme;

  }

}

#项目二
  server {
    listen 8888 ; 

    server_name www.nginxtest.com;                         #域名,在虚拟机自己练习就写本机IP
    location / {
      root /home/static/project2;                                    #前端文件路径
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    location /test2/ {
           proxy_pass http://192.168.126.99:9945/;                #这里是真实的项目二后端地址
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Host $http_host;
           proxy_set_header X-Forwarded-Port $server_port;
           proxy_set_header X-Forwarded-Proto $scheme;

   }

}
 

#在nginx中配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走;如果没有/，则会把匹配的路径部分也给代理走。

看我上面的配置加了/ ,所以它直接会被代理到http://192.168.126.99:9944/ 这个url，也就是直接代理到我们的后端服务地址。

②配置部分解释

########################################################################

这里给大家解释一下项目一后端配置的含义，项目二同理

这段配置是nginx中关于反向代理的配置，具体解释每行的含义如下：

1. **location /test1/**:
   - 表示当请求以/test1/开头时，将会匹配到这个location块，nginx会对匹配到的请求进行相应的处理。
  
2. **proxy_pass http://192.168.126.99:9944/**:
   - 指定反向代理的目标地址为http://192.168.126.99:9944/，即当匹配到以/test1/开头的请求时，nginx会将请求转发给该地址。

3. **proxy_set_header Host $host**:
   - 设置发送到代理服务器的请求头中的Host字段为客户端请求的Host字段。

4. **proxy_set_header X-Real-IP $remote_addr**:
   - 将客户端的真实IP地址传递给后端代理服务器，作为X-Real-IP请求头的值。

5. **proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for**:
   - 将客户端的IP地址传递给后端代理服务器，作为X-Forwarded-For请求头的值，这样后端服务器可以知道请求的真实来源IP。

6. **proxy_set_header X-Forwarded-Host $http_host**:
   - 将客户端请求中的Host字段传递给后端代理服务器，作为X-Forwarded-Host请求头的值。

7. **proxy_set_header X-Forwarded-Port $server_port**:
   - 将nginx监听的端口号传递给后端代理服务器，作为X-Forwarded-Port请求头的值。

8. **proxy_set_header X-Forwarded-Proto $scheme**:
   - 将请求的协议类型（http或https）传递给后端代理服务器，作为X-Forwarded-Proto请求头的值。

总体来说，这段配置的作用是将以/test1/开头的请求转发给http://192.168.126.99:9944/，并且通过设置各种请求头信息，使得后端服务器可以获取客户端真实IP地址和其他信息。

③访问 

验证nginx配置是否正确

nginx -t

重启服务

systemctl restart nginx

或者重载配置

nginx -s reload

访问打开网站（别忘了放通端口！！！）

项目一

http://www.nginxtest.com:9999

项目二

http://www.nginxtest.com:8888

①https配置

随着流量的不断增加，安全性变得尤为重要，所以需要配置https访问代替https访问，以提高Web访问的安全性！

升级一下配置，我们现在配置https访问,配置SSL、前后端分离

这里得提前说明一下  后面配置可能会导致Vue与后端交互时，http与https跨域问题

#会有一个这个报错 but requested an insecure XMLHttpRequest endpoint 'http://xxx'. This request has been blocked; the content must be served over HTTPS.

所以我们在前端index.html文件中添加 

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

这里我是添加在utf-8的后面

接下来按照我下面的配置，就不会出现跨域问题了

首先我们需要生成证书和私钥，因为我是在服务器申请的，我直接把私钥和证书文件下载后上传到了nginx服务器上。这里给大家贴两个方法申请方法。

申请证书

服务器申请

2022阿里云免费SSL证书申请全过程（图文详解）-阿里云开发者社区 (aliyun.com)

最新阿里云服务器免费SSL证书配置HTTPS的两种方法（图文教程二）-阿里云开发者社区 (aliyun.com)

 虚拟机申请

当然，对于在虚拟机上自己练习或者操作的话可以用openssl生成证书文件，我这里给大家贴一个我之前写的文章中的申请步骤

搭建动态Web集群应用、构建高可用集群，配置nginx实现https负载均衡，NFS部署、LAMP服务部署（保姆级教程），建议收藏_web集群 负载均衡-CSDN博客

1、创建私钥
首先在Nginx服务器的根目录（/etc/nginx）下创建文件夹ssl，使用openssl命令生成私钥文件，名称为server.key

[root@nginx ~]# mkdir /etc/nginx/ssl
[root@nginx ~]# cd /etc/nginx/ssl
[root@nginx ssl]# openssl genrsa -idea -out server.key 2048
Generating RSA private key, 2048 bit long modulus
..........+++
........................+++
e is 65537 (0x10001)
 
#输入生成的私钥的密码123456，生成私钥文件server.key
 
Enter pass phrase for server.key:123456
Verifying - Enter pass phrase for server.key:123456
 
 
#上述命令中2048表示密钥长度,默认是512。


2、以server.key为私钥，生成自签证书server.crt
[root@nginx ssl]# openssl req -days 36500 -x509 -sha256 -nodes -newkey rsa:2048 -keyout server.key -out server.crt
Generating a 2048 bit RSA private key
...............................+++
......................................+++
writing new private key to 'server.key'
-----
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) []:ln
Locality Name (eg, city) [Default City]:sy
Organization Name (eg, company) [Default Company Ltd]:school    
Organizational Unit Name (eg, section) []:computer
Common Name (eg, your name or your server's hostname) []:nginx
Email Address []:
 
     
（1）openssl req是一个 PKCS#10 证书签署请求和证书生成工具，req表示管理证书签名请求，这里是签名场景，所以用到new，表示生成一个CA证书文件或证书签名请求文件
（2）x509是CA证书专属的参数，表示用作证书签名
（3）key表示指定私钥文件
（4）-out表示输出的证书文件
（5）days表示证书的有效期
（6）keyout指定基于的私钥文件


填写生成证书的内容信息即自己的基本情况，填写完成后，在ssl目录下就生成了自己的私钥文件server.key和证书文件server.crt，证书文件其实就是签名的公钥，通过公钥加密、私钥解密的方法来对传输数据进行加密处理

[root@nginx ssl]# ls
server.crt  server.key

前后端配置

取消http配置文件

mv /etc/nginx/conf.d/http.conf /etc/nginx/conf.d/http.conf.bak

vi /etc/nginx/conf.d/https.conf

#接下来就是编辑后端服务配置文件

server {
        listen       443;                                                        #监听443端口，HTTPS默认端口
        server_name  www.nginxtest.com;                       #服务器名字，对应的域名
        ssl on;                                                                    #开启SSL
        ssl_certificate /etc/nginx/ssl/www.nginxtest.com.pem;                             #证书文件路径
        ssl_certificate_key /etc/nginx/ssl/www.nginxtest.com.key;                       #私钥文件路径
        ssl_session_timeout 5m;                                                #SSL会话超时时间
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;                          #使用SSL/TLS协议版本
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;  #支持的加密算法
        ssl_prefer_server_ciphers on;                               #优先使用服务器端的加密算法设置

#项目一后端配置

        location /test1/ {
           proxy_pass http://192.168.126.99:9944/;        #反向代理的后端地址
           proxy_set_header Host $host;                        #设置代理请求的中Host头部字段
           proxy_set_header X-Real-IP $remote_addr;    #向后端传递真实IP地址
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #向后端传递原始客户端
           proxy_set_header X-Forwarded-Host $http_host;   #向后端传递原始的主机头部字段
           proxy_set_header X-Forwarded-Port $server_port; #向后端传递原始的服务器端口
           proxy_set_header X-Forwarded-Proto $scheme; #向后端传递原始的协议（HTTP或HTTPS）

  }

#项目二后端配置

        location /test2/ {
           proxy_pass http://192.168.126.99:9945/; 
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Host $http_host;
           proxy_set_header X-Forwarded-Port $server_port;
           proxy_set_header X-Forwarded-Proto $scheme;

   }

    # gzip压缩配置
    gzip            on;     #开启gzip压缩
    gzip_vary       on;   #根据请求头中的vary字段启用不同版本的页面压缩
    gzip_proxied    any;  #启用任何情况下的gzip压缩
    gzip_comp_level 6;   #压缩级别设置
    gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;   #压缩的文件类型
}

vi /etc/nginx/conf.d/httpsweb.conf

#最后编辑前端配置文件

#项目一

server {
    listen 9999;
    server_name  www.nginxtest.com; 
    ssl on;
    ssl_certificate /etc/nginx/ssl/www.nginxtest.com.pem;                             #证书文件路径
    ssl_certificate_key /etc/nginx/ssl/www.nginxtest.com.key;                       #私钥文件路径
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    error_page 497 https://www.nginxtest.com:9999;       #利用error_page命令将497状态码的链接重定向到这个域名上，这个可以实现输入http访问网站自动跳转到https
    location / {
      root /home/static/project1;                                    #前端文件路径
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    # gzip
    gzip            on;
    gzip_vary       on;
    gzip_proxied    any;
    gzip_comp_level 6;
    gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
  }

#项目二
server {
    listen 8888;
    server_name  www.nginxtest.com; 
    ssl on;
    ssl_certificate /etc/nginx/ssl/www.nginxtest.com.pem;                             #证书文件路径
    ssl_certificate_key /etc/nginx/ssl/www.nginxtest.com.key;                       #私钥文件路径
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    error_page 497 https://www.nginxtest.com:8888;       #利用error_page命令将497状态码的链接重定向到这个域名上，这个可以实现输入http访问网站自动跳转到https
    location / {
      root /home/static/project2;                                    #前端文件路径
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    # gzip
    gzip            on;
    gzip_vary       on;
    gzip_proxied    any;
    gzip_comp_level 6;
    gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
  }

########################################################################

这里需要注意的是nginx版本的问题，查看版本命令（nginx -V）这里我贴一部分给大家看看

在nginx版本低于1.15.1时应该这样开启SSL

server {
        listen       443;                                                        #监听443端口，HTTPS默认端口
        server_name  www.nginxtest.com;                       #服务器名字，对应的域名
        ssl on;                                                                    #开启SSL

当nginx版本高于1.15.1时应该这样开启SSL

server {
        listen       443 ssl;                                                        #监听443端口，HTTPS默认端口,开启SSL
        server_name  www.nginxtest.com;                       #服务器名字，对应的域名

②配置部分解释

部分配置说明:
listen 443:NGINX监听端口443，默认的HTTPS端口。

server_name www.nginxtest.com：与此服务器块关联的域名。

SSL配置:

ssl on：为该服务器块启用ssl。
ssl_certificate: SSL证书文件路径(www.nginxtest.com.pem)。
ssl_certificate_key: SSL私钥文件路径(www.nginxtest.com.key)。
ssl_session_timeout 5m：设置SSL会话超时时间为5分钟。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2：允许的SSL/TLS协议。
ssl_ciphers：定义用于加密的密码列表。
ssl_prefer_server_ciphers on：指示优先使用服务器端的加密算法设置


Location /test1/{…}：定义一个匹配到/test1/的请求的位置块。
proxy_pass：将请求转发到http://192.168.126.99:9944/(替换为实际的后端URL)。
proxy_set_header：设置各种报头(Host, X-Real-IP, X-Forwarded-For, X-Forwarded-Host, X-Forwarded-Port, X-Forwarded-Proto)，将附加信息传递给后端服务器。

还可以在此块中添加其他代理设置，例如超时或缓冲选项。

Gzip配置:

gzip on;:开启gzip压缩。
gzip_vary on;:根据Vary请求头使用不同版本的压缩页面。
gzip_proxededany;:对任何请求启用gzip压缩。
gzip_comp_level 6;:设置压缩级别。
gzip_types:指定应该被压缩的MIME类型。


这些配置一起确保NGINX监听端口443上的HTTPS请求，提供适当的SSL证书，通过HTTP处理反向代理到后端服务器，并对指定的内容类型应用gzip压缩。根据您的具体设置调整路径、域和后端服务器地址。

③访问

验证nginx配置是否正确

nginx -t

重启服务

systemctl restart nginx

或者重载配置

nginx -s reload

访问打开网站（别忘了放通端口！！！）

项目一

https://www.nginxtest.com:9999

项目二

https://www.nginxtest.com:8888

总之，根据自己的环境进行配置，以上我的配置作为大家的一个参考！大家一起学习，如果有什么见解或有误的地方，欢迎在下方评论指出！！！

相关阅读
  1. 如何查看和设置我的Android N设备的权限？
  2. 如何在安卓手机上自定义应用图标？
  3. 如何在安卓微信中同时听语音和查看图片？
  4. 华为哪些设备将支持升级至安卓7.0？
  5. 微信安卓软件中Q10功能有哪些独特之处？
  6. 安卓用户如何挑选最佳视频播放器应用？
  7. 安卓系统中用户文件目录的确切位置是什么？
  8. 小米4用户如何安全升级到安卓8.0系统？
  9. 如何成功将魅蓝5升级至安卓原生7.0版本？
  10. 16GB存储的安卓手机是否能满足日常需求？

广告一刻

为您即时展示最新活动产品广告消息，让您随时掌握产品活动新动态！