行业知识
前端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=/ 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中配置。
另外，本文也没有提及目前流行的一种部署方式–容器部署，后文也一并抽空整理出来。
- 使用CI/CD工具，把h5静态页面发布到OSS。(后期我将介绍使用Jenkins插件，把H5静态页面部署到OSS)
