vue项目调用接口是阿里云的,H5网站也要部署到阿里云,2个不同的服务器,需要做nginx部署与api代理。
首先当然是买个阿里云服务器,这里是配置是linux系统,配置访问的域名 ,再接着:
给网站配置需要的端口,如下 :

配置之后,终端指定开启对应的端口号,参考:
阿里云 服务器配置端口号阿里云网页开放的一个新端口后,重启防火墙,端口未启动_Lan.W的博客-CSDN博客 我这里用的8083
firewall-cmd --zone=public --add-port=8083/tcp --permanent
下载nginx源码编译之后,在/usr/local/nginx/nginx.conf配置站点信息
在nginx上配置了站点与api代理
放置网站目录:

就可以运行起来了。

无论是域名网站访问域名格式的后端,都可以通过nginx愉快处理,运行。
访问路径 : http://xx.xx.com/cloudh5
Hbuilder打包:h5的基本运行路径 配置: /cloudh5

打包好的h5目录下的所有文件复制到nginx下的html/cloudh5

nginx配置:
location /cloudh5 {
root /usr/local/nginx/html;
index index.html index.htm;
}}
api接口代理还是一样,不用改,按./ 基本运行路径配置是一样的。
把location /网站路径与跨域配置写在443 ssl 的服务配置项下server{}。
# HTTPS server # server { listen 443 ssl; server_name webapi.porray.cn; ssl_certificate D:/nginx-1.24.0/cert/webapi.porray.cn.pem; ssl_certificate_key D:/nginx-1.24.0/cert/webapi.porray.cn.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #加密算法 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #安全链接可选的加密协议 ssl_prefer_server_ciphers on; #使用服务器端的首选算法 location / { root usr/local/nginx/html/secondxss; index index.html index.htm; } location /xss { proxy_pass https://kkaka.api.cn/webapi; }}