前端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在同一个机器

前端h5页面和后端php服务的几种部署方式_第1张图片

2、php和h5不在一个机器

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

前端h5页面和后端php服务的几种部署方式_第2张图片
你需要开发一个kong 自定义插件,区分不同的uri转向到不同的upstream后端。

四、部署方案之跨域部署

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

前端h5页面和后端php服务的几种部署方式_第3张图片

  • 如果你的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插件即可。

前端h5页面和后端php服务的几种部署方式_第4张图片

前端h5页面和后端php服务的几种部署方式_第5张图片

  • 使用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;
}

六、总结

本文把部署的几种方案作了一个简单示意,后文我将讲述如何在kong中配置。

另外,本文也没有提及目前流行的一种部署方式–容器部署,后文也一并抽空整理出来。

你可能感兴趣的:(前端,php,html5,持续部署,开发语言,docker)