前端Docker部署 http / https服务&使用 iframe嵌套页面遇到的问题&页面403 Forbidden问题

中心思想：先部署 http服务，再部署 https服务转发到 http服务上
（如果 http和 https服务部署在同一台服务器上，可共用一个 docker容器同时部署，见 3）
前端Docker微服务快速部署参考：前端Docker微服务快速部署
⇧⇧⇧这个博主很厉害
2023.04.11遇到问题：页面报错 403 Forbidden，查看容器日志，一堆类似"/usr/share/nginx/html/dist/index.html" failed (13: Permission denied)的报错，原因是dist目录没有权限。
解决方法：在unzip之后，多执行一步chmod -R 777 /xxx/dist/

1. http服务部署

（1）nginx配置：default.conf文件

server {
	listen       80; # http内部端口
	server_name  localhost;
	client_max_body_size 1024M;

	location / {
		root   /usr/share/nginx/html/dist;
		index  index.html index.htm;
    	try_files $uri $uri/ /index.html; #	Vue history模式路由必配
    	add_header 'Access-Control-Allow-Origin' '*' always; # 允许跨域访问
    }
    
    # 接口转发（接口中包含前缀 /apiWebser）
    # 当接口前缀有重复时，[字符长的前缀转发配置]必须写在[字符短的前缀转发配置]之前，否则会被[字符短的前缀转发配置]匹配上，导致无法连接到正确的后端服务
    location /apiWebser{
    	proxy_pass http://xx.xx.xx.xx:xxxx/;
	}

	# 接口转发（接口中包含前缀 /api）
	location /api{
    	proxy_pass http://xx.xx.xx.xx:xxxx/;
	}
	
	# 接口转发（接口中不包含前缀 /webser）
	location ^~/webser/ {
    	proxy_pass http://xx.xx.xx.xx:xxxx/;
	}
}

（2）部署脚本：upgrade.sh文件

/xxx/ 是前端部署文件的存放地址，web-server是当前前端服务的 docker容器名，根据实际情况调整*

rm -rf /xxx/dist

unzip /xxx/dist.zip

docker cp /xxx/default.conf     web-server:/etc/nginx/conf.d/

docker cp /xxx/dist      		web-server:/usr/share/nginx/html/

docker restart web-server

（3）创建 docker容器并启动服务

web-server是当前前端服务的 docker容器名，9000是外部端口，根据实际情况调整

docker run --name web-server -p 9000:80 -d nginx

【容器创建好之后，再执行更新部署脚本，即完成 http服务部署】

sh upgrade.sh

2. https服务部署

（1）nginx 配置：default.conf文件

（配置中的 temp.crt 和 temp.key是证书文件，http://xxx.xxx.xxx.xxx:9000是部署的 http服务地址，根据实际情况调整）

server {
	listen       6443 ssl; # https内部端口
	server_name  localhost;
	
	ssl_certificate      /etc/nginx/conf.d/temp.crt; # https证书 crt文件
	ssl_certificate_key  /etc/nginx/conf.d/temp.key; # https证书 key文件

	location / {
    	proxy_pass	http://xxx.xxx.xxx.xxx:9000; # 转发到 http服务地址
	}
}

（2）部署脚本：upgrade.sh文件

web-server-https是当前前端服务的 docker容器名，根据实际情况调整

docker cp /xxx/default.conf     web-server-https:/etc/nginx/conf.d/

# 拷贝 https证书文件到容器中
docker cp /xxx/temp.crt      	web-server-https:/etc/nginx/conf.d/
docker cp /xxx/temp.key      	web-server-https:/etc/nginx/conf.d/

docker restart web-server-https

（3）创建 docker容器并启动服务

web-server-https是当前前端服务的 docker容器名，9001是外部端口，根据实际情况调整

docker run --name web-server-https -p 9001:6443 -d nginx

【容器创建好之后，再执行更新部署脚本，即完成 https服务部署】

sh upgrade.sh

3. http和 https服务共用一个 docker容器，同时部署

（如果 http和 https服务部署在同一台服务器上）

（1）nginx配置：1 & 2的 nginx配置合并

（2）部署脚本：1 & 2的 部署脚本合并

（3）创建 docker容器：1 & 2的创建命令合并

docker run --name web-server -p 9001:6443 -p 9000:80 -d nginx

4. 使用 iframe嵌套页面

当前场景：外部集成环境使用 iframe方式集成了多个独立子应用的页面

1). 外部集成环境使用 https协议时，iframe方式集成的其他应用也必须使用 https协议
2). 如果使用的 https安全证书不是正式备案受信任的证书，在进入页面时，需要手动进行安全认证，类似这样：

3). 如果使用的是不受信任的临时证书：
外部集成环境 和 iframe方式集成的其他应用必须部署在同一台服务器上，且使用同样的 https安全证书

否则会出现问题： 打开集成环境后，进入 iframe方式集成的其他应用的页面，页面打不开，需要在浏览器中单独打开其他应用，手动安全认证后，才能在集成环境中打开

只有按照 3)的部署方式，在打开集成环境时，手动安全认证后，iframe方式集成的其他应用因为使用的是同样的证书，就能直接通过安全认证进入页面，而不需要另外的手动安全认证

当然，如果能申请正式受信任的 https安全证书，就不会有这些问题了