首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将前端部署到GitHub页面,将后端部署到Heroku

基础概念

前端部署到GitHub Pages

  • GitHub Pages 是 GitHub 提供的一个静态网站托管服务。你可以将构建好的前端项目(通常是 HTML、CSS、JavaScript 文件)推送到 GitHub 仓库,然后通过 GitHub Pages 访问你的网站。

后端部署到Heroku

  • Heroku 是一个云平台即服务(PaaS),允许开发者快速部署和运行应用程序。它支持多种编程语言和框架,可以轻松地部署和管理后端服务。

相关优势

GitHub Pages

  • 免费:对于个人和开源项目是免费的。
  • 简单易用:只需将代码推送到 GitHub 仓库即可。
  • 集成度高:与 GitHub 仓库紧密集成,便于版本控制和协作。

Heroku

  • 快速部署:只需几条命令即可部署应用程序。
  • 支持多种语言和框架:如 Node.js、Python、Ruby 等。
  • 自动扩展:根据流量自动扩展应用程序实例。
  • 丰富的插件和集成:可以通过添加插件来扩展功能。

类型

前端部署类型

  • 静态网站托管
  • 基于 GitHub Actions 的自动化构建和部署

后端部署类型

  • 基于容器的部署
  • 基于进程的部署

应用场景

GitHub Pages

  • 个人博客
  • 开源项目文档
  • 小型静态网站

Heroku

  • 快速原型开发
  • 小型到中型 Web 应用程序
  • API 服务

常见问题及解决方法

前端部署到GitHub Pages常见问题

  1. 404 页面未找到
    • 确保 index.html 文件存在,并且在根目录下。
    • 检查 GitHub Pages 设置,确保正确配置了源分支。
  • CORS 问题
    • 如果前端需要与后端通信,确保后端设置了正确的 CORS 头。
    • 可以使用 cors 中间件来解决跨域问题。

后端部署到Heroku常见问题

  1. 环境变量未设置
    • 确保在 Heroku 上设置了所有必要的环境变量。
    • 可以通过 Heroku CLI 或 Dashboard 设置环境变量。
  • 端口绑定问题
    • Heroku 动态分配端口,确保应用程序监听 process.env.PORT 而不是固定端口。

示例代码

前端部署到GitHub Pages

  1. 在项目根目录下创建 gh-pages 分支。
  2. 构建项目并将构建文件推送到 gh-pages 分支。
  3. 在 GitHub 仓库设置中启用 GitHub Pages,选择 gh-pages 分支。

后端部署到Heroku

  1. 创建 Heroku 账户并安装 Heroku CLI。
  2. 初始化 Git 仓库并提交代码。
  3. 创建 Heroku 应用程序:
  4. 创建 Heroku 应用程序:
  5. 推送代码到 Heroku:
  6. 推送代码到 Heroku:
  7. 设置环境变量(如果需要):
  8. 设置环境变量(如果需要):

参考链接

通过以上步骤,你可以将前端部署到 GitHub Pages,将后端部署到 Heroku,并解决常见的部署问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Hexo部署GitHub

前言 Hexo的搭建 配置SSH:Git#配置SSH 创建Github仓库 打开Github,登录账号 点击右上角的“+”,选择“New repository”新建仓库; 输入仓库名(仓库名需要与github...),勾选“Add a README file”,然后点击底部的“Create repository”创建仓库 进入创建完成的仓库后点击右侧的“code”按钮,选择“HTTP”,点击右侧的复制图标,仓库地址复制至剪切板备用...主题上传至Github 在hexo的根目录下找到“_config.yml”,修改“deploy”配置: deploy: type: git repo: github: 刚才复制的仓库地址...生成静态文件后,输入指令hexo deploy或者hexo d静态文件上传至github仓库,此过程可能需要输入密码,按照提示输入即可(如果SSH配置成功的话,只有首次上传需要输入密码,若每次上传都需要输入密码...或者你也可以直接输入hexo g -d直接完成上传操作 上传完成后回到github仓库,可以看到hexo静态文件以上传完成 预览博客 输入博客地址:用户名.github.io,访问博客 因为我这是修改后的博客

1.3K20

静态页面部署github.io

效果: page.zhuchenglin.cn 前提: 这个方法只能用来部署静态页面,而且是可以公开的代码,所以私有项目一定不要图省钱这样部署。...部署步骤: 如果没有github的伙伴注册一个github账号 在github上创建一个公开的项目(注意,如果创建私有的项目,并且能从外面访问到html,这是需要收费的!...里面填上自己的二级域名 这个项目克隆本地,在这个项目里面完成自己的静态页面,然后提交并推送到远程 这时候你可以使用 github账号.github.io/项目名/页面.html 来访问你的页面 进入你的域名管理后台...(阿里云或其他的),开一个CNAME类型的二级域名解析 github账号.github.io,注意:二级域名要和步骤3中的二级域名保持一致 如果正常的话,这个页面现在就可以通过自己设置的二级域名访问了...私有代码一定不要这样部署,或者付费部署也可以 这种方法只能部署静态开源页面,不能部署含有后端语言的代码 如需转载请注明出处 : https://www.cnblogs.com/zhuchenglin/p

1.6K10
  • 同时博客部署github和conding

    前言 之前我是把hexo托管在github,但是毕竟github是国外的,访问速度上还是有点慢,所以想也部署一套在国内的托管平台, 所以就决定部署coding。...查询了多方资料,终于鼓捣出了本地一次部署,同时更新到github以及coding。...具体过程如下: 一·注册 先注册好coding 和 github 二·创建仓库 这里只介绍coding上面如何创建项目,以及把本地hexo部署coding上面, 还不懂如何创建hexo的,百度很多。...首先我们创建一个项目,创建后进入项目的代码模块,获取到这个项目的ssh地址, 我的是 https://git.coding.net/five-great/five-great.git 三·同步本地hexocoding...博客项目名也叫tengj 那直接访问 tengj.coding.me就能访问博客,否则就要带上项目名:tengj.coding.me/项目名 才能访问 推荐项目名跟用户名一样,这样就可以省略项目名了 最后使用部署命令就能把博客同步

    39820

    怎么golang部署docker

    我们都知道go能够这么火是因为他是docker官方标准语言,当然了docker也go的性能发挥到了极致,可谓是相辅相成,交相辉映。...后续查阅知道这个是项目部署docker的自动化配置引导文件。于是今天上班没事干花了一天时间吧周末的小项目给添加了个dockerfile……下面给大家分享一下艰辛的历程吧。...`代表就是把我们dockerfile所在的作为当前目录的所有文件,命令的意思就是当前目录下的所有文件复制镜像指定的/go/src/Fang目录下 关于Dockerfile部署时精简系统大小 1 采用...COPY必要文件复制,不要采用ADD 2 采用curl git等联网数据请求,这样可以部署时从网络请求资源,从而减少自制镜像的大小(如lz项目中需要一些GitHub上的开源库 即 开勇go get -...#安装简单的数据 RUN go get -u github.com/PuerkitoBio/goquery RUN go get -u github.com/tealeg/xlsx RUN

    1.6K20

    Hexo部署云服务器

    前言 看到群里好多人问如何Hexo部署云服务器。按我的思想,如果有服务器谁还用Hexo?但居然还真有人。...趁着上个月白嫖的腾讯云的机器还没过期,赶紧重装个系统,来咕一篇Hexo如何部署云服务器。 ? 开始操作 这篇文章并非从安装开始的教程。...因此并不会涉及Node的安装与配置,Hexo的下载等。...测试能否将其clone 在你的电脑上随便找个位置新建一个文件夹,并且bash或者其他命令行工具切换到这里。开始执行以下命令(注意替换成你的服务器ip),测试能否仓库clone下来。...nginx -s reload此时在浏览器直接访问你的服务器ip地址即可看到一个提示——404页面 四、配置Hexo发布 配置博客根目录下的_config.yml文件 deploy: type:

    10K103

    Spring Boot 项目部署heroku爬坑

    ---- 1.账号注册 ​ heroku官网:https://www.heroku.com ​ heroku免费注册账号,heroku提供的功能已经可以满足大部分个人需求,有特殊需求的用户就需要进行付费了...heroku的注册界面: PS: heroku的网站需要访问外国网站才能访问,并且设置访问外国网站软件的模式为全局模式。...详细教程请参见heroku官网 4.遇到的问题 ​ 上传项目heroku时,一般系统会自动帮你打包并运行你的项目,这里我遇到两个问题: git的个人分支无法上传 项目无法启动...首先说一下正常的一个文件的Spring boot部署heroku,需要在根目录添加一个Procfile文件,告诉heroku你要打包哪个文件,文件内容如下: web java -Dserver.port...,后来发现heroku中有一个很爽的命令,如下: $ heroku run bash ​ 这样就相当于远程登录一台Linux服务器啦,我们可以使用Linux命令查看自己部署heroku上的项目的目录结构啦

    3.1K20

    如何本地transformer模型部署Elasticsearch

    很多企业的生产环境有网络访问限制,并不能直接访问HuggingFace 因此,本文介绍,如果本地训练好的模型,直接通过eland上传到Elasticsearch。...Tokenizer文件(.json、.txt等):这是用于文本转换为模型可接受的输入格式的分词器文件。它可以是预训练的分词器文件或您自己训练的分词器。...上的共享模型资源,但是又不想每次都通过eland去重新下载模型,或者说生产环境对于HuggingFace网络的访问有限制,我们可以先将HuggingFace上面的模型下载到本地,然后每次通过本地的模型进行部署...可参考:Elastic 进阶教程:在Elasticsearch中部署中文NER模型) 从 Hugging Face 上 clone 所选模型本地。...总结 本文介绍了如何本地训练好的transformer模型,直接通过eland上传到Elasticsearch,从而实现在Elastic中管理和使用自己的模型。

    3.4K31

    如何传统 Web 框架部署 Serverless

    如何传统 Web 框架部署 Serverless https://www.zoo.team/article/serverless-web 背景 因为 Serverless 的“无服务器架构”应用相比于传统应用有很多优点...、快速、科学的方式部署 Serverless 上,下面让我们一起研究看看它们是怎么做的吧。...我们以 Node.js 的 Express 应用为例,看看如何通过阿里云函数计算,实现不用按照传统部署方式购买云主机去部署,不用自己运维,快速部署 Serverless 平台上。...、调用,执行成功结果如下: 看到最后,大家会发现 API 网关触发器和 HTTP 触发器很多代码逻辑是可以复用的,大家可以自行阅读优秀的源码是如何实现的~ 其他部署 Serverless 平台的方案...传统 Web 框架部署 Serverless 除了通过适配层转换实现,还可以通过 Custom Runtime 或者 Custom Container Runtime (https://juejin.cn

    2.7K30

    部署一个Sinatra应用程序Heroku

    Heroku是一个云应用程序平台,专门用于解决服务器管理问题。您只需构建您的应用程序,通过Git将其推送到Heroku部署就完成了。但是该怎么部署一个Sinatra应用程序呢?...由于Sinatra是一个Ruby应用程序,所以部署起来并不像要部署一个PHP应用程序那么简单,但它仍然并不是太困难。 Sinatra入门....../main' run Sinatra::Application 您可以通过源代码管理系统Git部署Heroku 。...然后,假设你已经提交了最新的更新,你可以这样做: git push heroku master 你会看到Heroku收到推送请求,压缩文件,安装所需的Ruby gem,然后,没有问题的话,部署你的应用程序...现在你需要做的就是继续开发你的应用程序,提交,然后使用Git推送到Heroku进行部署

    5.1K110

    使用 Webhooks Linux 服务器上的项目自动部署 GitHub

    我们的项目一般都会托管在类似 Github 和 Coding 之类的平台上,当项目部署在服务器上之后,如果发现需要更改一处地方,需要在本地更改之后提交到 Github,然后再登录服务器拉取 Github...上的代码,可以说操作非常麻烦了,我们可以使用 Github 上的 Webhooks 实现本地提交之后服务器上自动更新。...公钥有两个:Git 用户公钥和项目部署公钥,之前部署项目时候直接在服务器上使用 git clone 来克隆 Github 上的代码,所以用户公钥已经配置过了,很简单这里就不赘述了。...部署公钥: sudo -Hu Ubuntu ssh-keygen -t rsa  请选择 “no passphrase”,一直回车下去 2.准备钩子文件(假设项目的目录为 project_dir):...上的操作: 1.添加部署公钥: 复制  /home/ubuntu/webhook.pub (生成的时候我起的名字叫webhook)的内容 Github 中的  项目 > Settings > Deplow

    1.8K30
    领券