danvic712

前言

最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 上新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西时可以直接使用。前端项目,最主要的还是能够实际看到,因此考虑找个地方部署,因为自己的博客是部署到 github page 上的,并且这个项目也只是一个静态网站,所以这里同样选择使用 github page

同时,考虑到发布项目时,虽然使用 github page 已经帮我们省略了拷贝文件到服务器上这一步,但是还是需要自己手动的敲命令来完成项目的发布,因为发布的流程很单一,所以这里选择通过 github action 这个自动化工具来实现程序的自动化部署

代码仓库地址:ingos-admin

预览地址:https://yuiter.com/ingos-admin

Step by Step

2.1、手动部署

示例的 Angular 应用,你可以通过 Angular CLI 直接生成,如有需要,可以点击此链接进行跳转查看(电梯直达),这里就不演示创建的过程了

按照正常的前端项目发布流程,当我们需要发布时,需要使用 npm 命令来完成项目的打包。整个项目中所涉及的 npm 命令,我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看

这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布

npm 命令

当 build 命令执行完成后,项目根路径下 dist 文件夹中以项目名称命名的文件夹就是我们需要部署的文件。此时,如果是部署到自己的服务器上,只需要把这个文件夹拷贝到服务器上,通过 nginx 之类的服务器指向文件所在路径即可

同样的,当我们想要部署到 github page 时,我们也只需要将文件提交到 github 代码仓库中即可,之后 github 会自动完成应用的部署工作

因为 git 默认是会忽略编译生成的 dist 文件夹的,此时,想要把编译生成的文件推送到远程仓库,你需要修改 .gitignore 文件,或是通过 subtree 的形式,将 dist 文件夹作为一个分支推送到远程服务器

# 创建并切换到 gh-pages 分支
git checkout -b gh-pages
# 将 dist 文件夹下的文件添加到 gh-pages 分支
git add -f dist
# 提交到本地分支
git commit -m 'created gh-pages'
# 推送到远程分支
git subtree push --prefix dist origin gh-pages

当然,这样还是显得有些麻烦,对于 angular 应用来说,我们完全可以使用社区提供的

相关文章: