使用netlify实现自动化部署前端项目（无服务器版本）
介绍
- 本文以
github仓库进行介绍关联netlify的无服务前端自动化部署。 - 用途：个人网站设计、小游戏等
- 当然这只是让你入门~具体细节等待你自己去探索
实现
- 打开官方网站
- 如果没有注册过的账户，你需要使用 github 去进行登录。注册完成后会自动给你提示填写创建仓库信息，可忽略性看以下操作。
- 进入首页
- 因为我给了所有权限，于是可以看到以下面板，我们以test-demo举例子（点击它）
- 然后进入到以下页面
（1）Build command：你的打包命令（此处一般为填写 npm run build 或者 yarn build）（具体看的位置是package.json中script中看项目打包命令）
（2）Publish directory：这里填写你打包后文件夹的名字叫什么（一般为dist，dist下一级必须有index.html文件！否则指向你项目的入口index.html文件）
（3）Branch to deploy：这个是选择你github上哪个分支
（4）操作完以上操作后直接点击 deploy site 进行下一步
执行完上一步后会看到以下页面，然后这里在进行build构建，咱们点进去，可以看见正在构建，还能看到使用的node版本信息等。
滚动到最上面去点击按钮进行查看构建后的页面是否正常
当整个过程没有飘红的时候代表着你
yarn build执行成功。这也意味着你成功完成了无服务自动化部署项目了。咱们可以试试修改代码然后重新提交。
温馨提醒
- 有的项目（vue-cli）如果在配置文件中添加了
publicPath: '/xxxxxx'则会遇到访问白屏bug，置位publicPath: ''就行了 - 使用vue3的时候同时使用了vue2的写法可能会遇到需要重新下载依赖的问题（本地打包没得这个问题），跟着提示下载依赖就行了。
- 构建中如果出现红色提醒，则代表着打包构建有问题，需自己捋捋，建议在本地打包成功后再做尝试。
- 如果你访问后发现是这个页面，则说明你打包那一步失败了（飘红了~去看看打包过程，哪里报错改哪里），或者你配置的第五步
Publish directory错误了。
（1）Publish directory 这个地址可以更改，如下图
使用netlify实现自动化部署前端项目（无服务器版本）相关推荐
- Linux中部署前端项目(Apache服务器)
设备:使用一台服务器. 1.准备工作: a.关闭防火墙: systemctl stop firewalld //临时关闭防火墙 systemctl disable firewalld ...
- Jenkins自动化部署前端Vue项目
Jenkins自动化部署前端Vue项目 前言 安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件 配置NodeJs 新建及配置任务 ...
- Gitlab CI/CD教程以及实战docker自动部署前端项目（全）
目录 前言 1. 技术知识 1.1 docker安装gitlab 1.2 docker安装gitlab-runner 1.3 .gitlab-ci.yml编写 1.4 使用docker部署前端项目 1 ...
- nginx怎么部署php项目,nginx怎么正确部署前端项目
目的: nginx部署打包成为dist的前端项目 (学习视频分享:php视频教程) 相关知识:docker 安装与使用 docker pull nginx docker run --restart=o ...
- 部署前端项目 Linux系统的nginx配置
为什么80%的码农都做不了架构师?>>> 一.本地文件上传到服务器 scp -r /c/Develop/manage-system/dist/* username@server ...
- win10 nginx部署前端项目（静态资源服务器和HTML）
win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...
- nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面
nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面 location / {expires 1h;root /home/test/vue/dist/;index index.h ...
- 纯java的方式实现自定义自动化部署java项目
纯java的方式实现自定义自动化部署java项目 前言 使用第三方的服务或插件实现部署所存在的问题 自动化部署java项目 java项目部署方式 流程 代码实现 打包 使用 java 执行 cmd 进 ...
- （三）jenkins+bonobo git server+windows系统自动化部署springboot项目（远程windows自动化部署）
前提 jenkins安装,参考:(一)jenkins+bonobo git server+windows系统自动化部署springboot项目(jenkins安装) 自动化部署,参考:(二)jenki ...
最新文章
- R语言之可视化-火山图
- mysql model first,一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具
- enumerate()函数用法
- php拒绝服务,CVE-2015-7803
- 要启用实时(jit)调试 该应用计算机,解决%_启用实时(JIT)调试+编译应用程序时还必须启用方法歩骤?谁有最终解决方案?...
- Q_learning简介与实例
- MemCached的telnet命令行参数
- 【BZOJ1433】【codevs2347】假期的宿舍，最大流
- spark开发环境配置
- 《Head First设计模式》第二版中译本的译稿（摘）
- 跨境电商如何通过WhatsApp Business进行客户服务？
- 实体关系图 (ERD) 指南
- linux查看隐藏大文件夹,Linux系统隐藏文件/文件夹操作教程
- windows10系统hosts文件不见了的解决方法
- mysql 左联left join解析及使用指南
- 为什么更多APP开发者选择穿山甲作为游戏变现平台？
- PHP Include文件
- asp.net是什么？
- python配置opencv环境后，读取图片，报错：can‘t open/read file: check file path/integrity
- Java GUI气泡诗词02