项目部署-打通前后端

35s

已于 2023-07-27 23:15:26 修改

阅读量221

点赞数 1

文章标签：前端

于 2023-03-19 12:21:28 首次发布

本文链接：https://blog.csdn.net/qq_40429067/article/details/129649036

版权

思路：想自己动手打通前后端，从前端到nginx，再从nginx到后端（暂时跳过后端的业务网关）

关键角色1：nginx

nginx一直被大家熟知主要作为反向代理的工具，但是如何本地环境配置，以及线上环境配置，一直是我本人疑惑的一点
尝试过在自己本地部署前端、nginx、后端实现反向代理，感觉不太方便，调试任何一端，都需要把nginx和另外一端启动，遂想尝试部署在线上，最后完成类似于线上devops的开发流程

关键角色2：axios的baseUrl

对于一个后端来说，并不太清楚appUrl和apiUrl
- appUrl：用户访问前端页面的ip
- apiUrl：前端访问后端的ip
通过这次部署，大概明白了二者的作用，但是由此产生了一个跨域的问题，对于浏览器来说访问的页面和页面中请求的接口不在一个域名下，就产生了跨域，对于appUrl和apiUrl所指向的服务器，大部分情况是不属于同一个的，所以解决跨域问题是避免不了的。

本地部署前端、nginx、后端

前端

前端一般会选择封装axios，统一请求工具，方便管理，（此处只做最简单的封装）
此时指定baseURL为nginx所在的服务的地址，端口问题完全取决于你的nginx准备对哪个端口的请求进行代理

import axios from "axios";
const request = axios.create({
  baseURL: "http://127.0.0.1:4000",
  timeout: 5000,
});
request.interceptors.request.use((config) => {
  return config;
});

request.interceptors.response.use(
  (res) => {
    http: return res.data;
  },
  (err) => {
    return err;
  }
);
export default request;

具体怎么使用封装的axios工具就不演示了

后端

由于我本身就是后端，所以觉得后端只需要提供接口功能就可以了

Nginx

本地部署的Nginx配置会比较简单，只需要设置监听端口和代理端口，以及允许跨域就可以了
下面的配置是我windows本地的nginx删除全部注释代码块后的部分，实际只需要关注server块部分，比如我是监听127.0.0.1:4000的请求，将其代理到http://127.0.0.1:9090上，也就是代理到本地启动的后端服务上

worker_processes  1;

events {
    worker_connections  1024;
}


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

    keepalive_timeout  65;

    server {
        listen       127.0.0.1:4000;
        server_name  localhost;

        location / {
            proxy_pass   http://127.0.0.1:9090;
			add_header 'Access-Control-Allow-Origin' *;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

总结：本地部署会省掉什么不必要的麻烦

线上部署前端、nginx、后端

线上部署的准备工作

1. 自己的服务器（IP）

2. 自己的域名（需要购买）

3. 将域名解析绑定IP，并进行ICP备案（备案至少需要一周时间）

4. 购买或者领取免费的SSL，绑定域名。生成SSL证书

前端

我目前只是想实现本地开发前端时，不需要本地启动后端、数据库、nginx，所以暂时前端不需要部署到服务器

后端

后端我是直接打成jar包放在服务器上启动着

Nginx

线上的nginx部署，先把http版本的测试通，再逐步升级到https（此阶段不考虑一些安全性的各种配置，只保证最少可用配置）
http请求，默认是80端口，可以在配置文件里监听来自80端口的请求，进行代理，也可以自定义监听端口

server {
        listen 80;
        server_name www.test.com;

    #以下解决跨域问题
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers

            'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        location / {
       proxy_pass http://www.test.com:9090;
        }
    }

总结：

如果已经完成DNS解析（域名解析成IP）和ICP备案，理论上是可以实现访问http://www.test.com:80 访问到http://www.test.com:9090端口的数据的
如果只没有完成ICP备案，可以把域名替换成IP实现代理

升级https

升级https，需要使用到ssl证书，将ssl证书下载上传到nginx所在的服务器，并在nginx里指定证书路径
由于https的默认端口是443，所以对于来自于https的请求，需要监听443端口，进行转发
升级之前http的对80端口的监听可以使用请求重写，当有http的请求时重写为https请求
http的server块如下

  server {
        listen 80;
        server_name www.test.com;
        rewrite ^(.*)$ https://$host$1;
    }

ssl最终的server块如下

server {
   listen 443 ssl;

   server_name www.test.com;

   ssl_certificate conf.d/cert/ssl.pem;
   ssl_certificate_key conf.d/cert/ssl.key;
   ssl_session_cache shared:SSL:10m;
   ssl_session_timeout 5m;
   ssl_protocols TLSv1.2 TLSv1.3;
   ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256;
   ssl_prefer_server_ciphers on;

   root html;

   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
   add_header Access-Control-Allow-Headers
            'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; 
   
      location / {
               proxy_pass http://www.test.com:9090;
               proxy_set_header Host $host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
}