前端h5页面和后端php服务的几种部署方式

一、背景

和java后端服务的部署不同，前端h5的部署有好几种。

CDN+OSS
nginx反向
把输出物全部拷贝到后端

所以，这就带来了部署上的歧义，到底该用哪种部署方式呢？

本文以前端h5搭配后端php程序为示例，试着讨论一下他们之间的配合部署。
这里的前端h5是仅限静态页面，不包括nodejs等独立运行的前端程序。

二、部署Php服务

php服务可以使用以下两种方式：

nginx反向代理php文件
nginx + php-fpm

第一种方式和第二种方式不同，要求php文件和nginx在同一机器。
第二种方式，因为php-fpm会新建一个进程，所以允许nginx不在同一个机器。

php-fpm不在本文的论述范围内，可以去网上寻找一些更加详细的资料。这里侧重于部署。

三、部署方案之h5和php同源部署

为了达到同源，也即同一个域名的访问入口，不同的uri前缀会转向到不同的地方。

比如，/api开头的接口指向php服务，其他默认指向h5静态页面。

1、php和h5在同一个机器

在这里插入图片描述

2、php和h5不在一个机器

因为不在一个机器，所以域名指向一个新的api网关，比如kong。由kong配置两个upstream，一个是php upstream，另一个是h5 upstream。

在这里插入图片描述
你需要开发一个kong 自定义插件，区分不同的uri转向到不同的upstream后端。

四、部署方案之跨域部署

不同源后，也就会带来跨域问题。所以本方案叫做跨域部署方案。

在这里插入图片描述

如果你的h5网站是TO C端，建议你使用CDN+OSS的部署方式。
php服务的反向代理nginx，必须设置CORS跨域。

具体操作见下：

在 Nginx 上配置 CORS（跨域资源共享）头，允许前端应用跨域访问 PHP 后端。在 Nginx 的配置文件中添加如下配置：

location / {
    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';
}

这里顺便说下，如果是Kong网关的话，开启cors插件即可。

在这里插入图片描述

使用CI/CD工具，把h5静态页面发布到OSS。(后期我将介绍使用Jenkins插件，把H5静态页面部署到OSS)

五、Nginx反向代理php和h5

1、php-fpm + h5

这种方式，就是比较“耗端口”，Nginx监听9036，而Php-fpm监听另外一个端口9035。而如果是java程序，只需要nginx监听80，不同的服务对应不同的域名即可。

server {
    listen 9036;
    server_name platform.xxx.cloud;

    set $static_root '/opt/h5/platform-web/platform-web/dist';
    set $php_root '/opt/php/platform-php/platform-php/public';
    root $static_root;

    index index.html index.htm index.php;
    
    access_log /data/nginx/logs/platform_access.log;
    error_log /data/nginx/logs/platform_error.log;

    # 以.php结尾的请求。它将这些请求传递给 PHP-FPM 进程（通过 127.0.0.1:9035 地址）进行处理
    location ~ \.php$ {
        root $php_root;
        fastcgi_pass   127.0.0.1:9035;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
        fastcgi_buffer_size 128k;
        fastcgi_buffers 32 32k;
        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
    }

    # 匹配uri以/结尾的接口，示例：/api/v1/user/userId/{userId}后不小心多加了一个斜杆
    # 既匹配/api/v1/user/userId/1002, 也匹配/api/v1/user/userId/1002/
    # 都未匹配到，则转向到首页
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 处理以 /api/ 开头的请求
    location ^~ /api/ {
        root $php_root;
        if (!-e $request_filename) {
            rewrite  ^(.*)$  /index.php?s=/$1  last;
            break;
        }
    }

    # 设置首页不缓存
    location = /index.html {
        add_header Cache-Control no-cache;
        add_header Pragma no-cache;
        add_header Expires 0;
    }

    # 设置静态页面的缓存过期时间
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires       max;
        log_not_found off;
        access_log    off;
    }
}

2、php + h5

不建议这种部署。

使用 Nginx 的 fastcgi_pass 指令来将请求传递给 PHP 解释器，适用于开发阶段。

你需要明确sock文件的路径，相当于是给java程序指明JAVA_HOME。

# 处理 PHP 脚本的配置
location ~ \.php$ {
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;  # 替换为你的 PHP-FPM sock 文件路径
}

3、静态页面h5

server {
    listen 9086;
    server_name  tea.xxx.com;

    location / {
        index index.html;
        alias "/opt/h5/tea-web/dist/" ;
    }
    access_log  /data/nginx/logs/tea-web_access.log  main;
    error_log  /data/nginx/logs/tea-web_error.log;
}