前端项目docker部署_docker部署前端项目

以react项目为例，理论上vue项目也支持。

1. 打包。最好在package.json 里加上"homepage": "."，打包好后，会生成build目录
2. 将build目录下的所有文件上传到服务器，假设放在/root/service/shop-h5/public 目录下
3. 编写脚本，启动docker容器

#容器名，改在你喜欢的
name=http-proxy-server

docker rm -f $name
docker run -d --restart=always --name $name \
	   --restart=always \
	   -p 8080:8080 \
	   -e PROXY_PREFIX='/test' \
	   -e PROXY_TARGET='https://test.server.cn/api' \
	   -v /root/service/shop-h5/public:/public \
	   lengmianshi/http-proxy-server:2.0
1
2
3
4
5
6
7
8
9
10
11

说明：

• PROXY_PREFIX：接口的前缀，类比http-proxy-middleware中的配置，本例表示所有以/test开头的请求都走代理。可以配置多个，用英文分号隔开，如/test;/prod
• PROXY_TARGET：接口真实地址，即以PROXY_PREFIX开头的请求要转发的实际地址。可以配置多个，用英文分号隔开，如https://test.server.cn/api;https://prod.server.cn/api
• 当PROXY_PREFIX和PROXY_TARGET包含多个值时，它们要一一对应：
• • 如PROXY_PREFIX=‘/test;/prod’，PROXY_TARGET=‘https://test.server.cn/api;https://prod.server.cn/api’，表示以/test打头的请求转发地址为https://test.server.cn/api，以/prod打头的请求的转发地址为https://prod.server.cn/api
• /root/service/shop-h5/public：前端项目打包后build目录下的所有文件

4. 容器启动后，浏览器输入：http://ip:port/index.html即可访问（记得开放端口）