基于http-server和frp上线服务前端

目标

1. 上线项目到服务器
2. 开发过程中更改代码后能快速响应
3. 不希望繁琐地上传文件

配置frp端口

增加配置，将主机上的想要映射的前端端口，通过frp映射到云服务器的80端口。配置信息如下：

[[proxies]]
name = "front"
type = "tcp"
localIP = "127.0.0.1"
localPort = 8888
remotePort = 80

运行

运行bat脚本文件，开始frp服务。

@echo off

if not defined TAG (
	set TAG=1
	start wt.exe -p "cmd" %0
	exit
)

:home
frpc -c frpc.toml
goto home

使用

npm run dev

刚开始将前端的开发环境直接映射到云端，虽然可以顺利访问，但是由于开发时没有经过优化，出现了加载速度过慢的情况。

npm run build:prod

还是按照普通操作将vue项目打包成了dist文件夹。
但是上传文件进行部署还是非常困难。
经过技术选型，找到了http-server这个工具。
在dist文件夹内，只需要简单的运行http-server -p 8888即可将文件以http的形式运行在本地的8888端口，又因为之前运行了frp端口映射，因此直接访问云服务器所在IP直接可以运行。