一、背景

和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_indexindex.php;fastcgi_paramSCRIPT_FILENAME$document_root$fastcgi_script_name;includefastcgi_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" />=/$1last;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_logoff;}}

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_nametea.xxx.com;location / {index index.html;alias "/opt/h5/tea-web/dist/" ;}access_log/data/nginx/logs/tea-web_access.logmain;error_log/data/nginx/logs/tea-web_error.log;}

六、总结

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

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