到底什么是前端部署?

2 阅读2分钟

前端部署核心

前端部署的核心其实很简单:

  1. 将源代码打包转换为可部署的格式
  2. 将打包好的资源上传到服务器
  3. 配置Web服务器
其他所有的配置本质都是在对这个流程进行优化,如通过脚本CI/CD省去一些重复繁杂的工作,增加整个流程的可操作性和可靠性。这也很好理解 最简单也是最繁杂的办法就是: 在本地进行打包>手动将打包好的文件放到服务器的指定文件夹下>配置好nginx等代理指向打包好的资源地址确保服务器可以正确访问到响应文件资源
但是这样一来每个步骤都需人力手动操作,我们的注意力需要在服务器与本地资源之间穿梭,还要进行服务器操作一不小心可能就会导致:文件上传错误、不确定是否更新了、文件名称错误、服务器误操作等不可控的问题,同时也会影响我们的部署效率。

因此为了实现更高校,更可靠的部署,就需要我们对这个流程进行优化:

  1. 将繁杂的服务器操作按操作顺序写入shell脚本,这样只需要 执行命令sh shell.sh就可以保证每一次在服务器的操作都是相同的,同时省去每次等待命令执行和手动写入命令的时间,下面展示一个可用的shell脚本例子
# 设置项目路径
project_path="/root/frontend/kx-code/kx-dashboard"

# 设置部署路径
deploy_path="/root/frontend/dashboard"

NAME="dashboard"

cd $project_path

#进入要部署的项目代码所在分支  
git checkout newGlobal

# 拉取最新代码
git pull

# 路径为dockerfile所在位置 dashboard 为镜像名称
docker build --build-arg BUILD_ENV=tj -t "$NAME" "$project_path"

# 将镜像名为dashboard的镜像运行在dashboard容器下
docker run --name "$NAME" -d "$NAME"


# 将dashboard容器中/www文件层下的文件内容(/www为dockerfile中配置) 拷贝到/home/talentdb/frontend/dashboard文件夹下

# cp 后的第一个参数必须加“/.”否则docker命令会产生两种不同结果导致构建后不更新
docker cp "$NAME":/www/.  "$deploy_path"

#停止容器运行
docker stop "$NAME"

#移除容器
docker rm "$NAME"

#移除镜像
docker rmi "$NAME"

上面的例子是将代码上传到了服务器 在服务器进行资源打包,更可靠的办法是可以直接拉取打包好的dist脚本 这个过程可以通过git来实现,如:直接讲打包好的文件推送到git的指定目录,编写合适的shell脚本拉取dist文件 放到服务器的指定位置即可

以上是我对前端部署的一些了解 有任何问题或者建议欢迎评论交流😊~