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

在Heroku上使用Rails API部署Create-React-App

,可以通过以下步骤完成:

  1. 创建Rails API项目:Rails是一个开发Web应用程序的框架,可以使用Ruby语言进行开发。首先,使用Rails命令行工具创建一个新的Rails API项目。打开终端,运行以下命令:rails new my-api --api这将创建一个名为my-api的新Rails API项目。
  2. 创建Create-React-App项目:Create-React-App是一个用于快速搭建React应用程序的脚手架工具。在终端中,切换到你想要创建Create-React-App项目的目录,并运行以下命令:npx create-react-app my-app这将创建一个名为my-app的新Create-React-App项目。
  3. 配置Rails API和Create-React-App项目:在Rails API项目的根目录下,打开Gemfile文件,并添加以下gem:gem 'rack-cors'然后运行bundle install命令安装gem。

在Rails API项目的config/application.rb文件中,添加以下配置:

代码语言:ruby
复制

config.middleware.insert_before 0, Rack::Cors do

代码语言:txt
复制
 allow do
代码语言:txt
复制
   origins '*'
代码语言:txt
复制
   resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options]
代码语言:txt
复制
 end

end

代码语言:txt
复制

在Create-React-App项目的根目录下,创建一个名为setupProxy.js的文件,并添加以下内容:

代码语言:javascript
复制

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {

代码语言:txt
复制
 app.use(
代码语言:txt
复制
   '/api',
代码语言:txt
复制
   createProxyMiddleware({
代码语言:txt
复制
     target: 'http://localhost:3001',
代码语言:txt
复制
     changeOrigin: true,
代码语言:txt
复制
   })
代码语言:txt
复制
 );

};

代码语言:txt
复制
  1. 启动本地开发服务器:在终端中,分别进入Rails API项目和Create-React-App项目的根目录,并在两个终端中分别运行以下命令来启动本地开发服务器:# Rails API项目 rails s -p 3001

Create-React-App项目

npm start

代码语言:txt
复制
  1. 部署到Heroku:完成开发并测试通过后,可以将Rails API和Create-React-App项目部署到Heroku上。首先,确保你已经安装了Heroku CLI,并登录到你的Heroku账号。然后,在终端中,分别进入Rails API项目和Create-React-App项目的根目录,并运行以下命令:# Rails API项目 heroku create my-api-app git push heroku master

Create-React-App项目

heroku create my-app-app

git push heroku master

代码语言:txt
复制

这将创建两个新的Heroku应用程序,并将代码推送到Heroku上进行部署。

以上是在Heroku上使用Rails API部署Create-React-App的步骤。这种部署方式适用于需要将Rails API和Create-React-App项目分开部署的情况,以实现前后端分离的架构。在部署过程中,可以使用Heroku提供的各种功能和插件来优化和扩展你的应用程序。

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

相关·内容

API Gateway KongRainbond部署

技术讲,Kong是Nginx中运行的Lua应用程序,并且通过lua-nginx-module实现。...从应用市场安装 快速安装 目前我们已经将最新版本(v1.4.X)的Kong发布到了应用市场,如果你想要快速的搭建以及使用Kong,你只需要做一件事情,那就是点击一下安装: 等待一小段时间后,Kong就已经部署了你的...举例说明: 对于部署Rainbond的Kong来说,直接添加环境变量 KONG_LOG_LEVEL = error log_level = error nginx_proxy_large_client_header_buffers...目标应用的所有组件都已经部署Rainbond并正常运行 各服务组件使用的数据库具备自动初始化数据的功能 各服务组件间的依赖关系已经处理妥当,从业务层面已经正常运行 我们只需要做到以下几点,就可以发布出可以即点即用的云市场应用...Kong应用怎么制作 Rainbond,可以通过环境变量进行配置: 可以通过kong.conf文件中添加以下条目来包含目标文件: 对于更复杂的配置方案,例如添加整个新 server块,可以使用上述方法

1.3K20

如何在Ubuntu 14.04使用Git Hooks部署Rails应用程序

介绍 本教程中,我们将向您展示如何使用Git hooks自动将Rails应用程序的生产环境部署到远程Ubuntu 14.04服务器。...准备 您将需要访问Ubuntu服务器具有超级用户权限的非root用户。我们的教程设置中,我们将使用一个名为deploy的用户。如果要在不输入密码的情况下进行部署,请务必设置SSH密钥。...您还需要一个本地开发机器的git存储库中管理的Rails应用程序。如果您没有并希望跟进,我们将提供一个简单的示例应用程序。 让我们开始吧!...安装PostgreSQL 大多数生产Rails环境使用PostgreSQL作为数据库,所以现在让我们将它安装在您的服务器。...准备你的Rails应用程序 您的开发机器,很可能是您的本地计算机,我们将准备您要部署的应用程序。 可选:创建Rails应用程序 理想情况下,您已经拥有了要部署Rails应用程序。

2.5K60

如何在CentOS 6.5使用Unicorn和Nginx部署Rails应用程序

介绍 部署基于Rails的Web应用程序时,简单设计的应用程序服务器可以几分钟内启动并运行。...Web应用程序部署,服务器及其角色 部署Web应用程序时,通常涉及多个应用程序,分层设置并相互协作。...这种真实的部署设置与使用单一开发服务器有很大不同,后者设计用于测试目的,因为由于缺乏功能和特性,它们无法实际网站流量的负载下工作。...准备部署服务器 本节中,我们将执行以下步骤: 更新操作系统 获取必要的基本部署工具 安装Ruby,Rails和库 安装应用程序(即Unicorn)和HTTP服务器(Nginx) 更新和准备操作系统 运行以下命令以更新...准备Rails应用程序以进行部署 注意:本节中,我们将使用一个非常简单的Ruby On Rails应用程序作为示例。对于应用程序的实际部署,您应该上传代码库并确保安装所有依赖项(即bundle)。

4.1K20

如何在Ubuntu 14.04使用Unicorn和Nginx部署Rails应用程序

介绍 当您准备部署Ruby on Rails应用程序时,需要考虑许多有效的设置。...本教程将帮助您部署Ruby Rails应用程序中的生产环境,使用PostgreSQL作为数据库,Ubuntu 14.04使用Unicorn和Nginx。...教程准备 本教程假定您将在部署应用程序的用户安装了安装了以下软件的Ubuntu 14.04服务器(没有服务器的同学可以在这里购买,不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验,学会安装后再购买服务器...安装rbenv-vars插件 部署生产Rails应用程序之前,应使用环境变量设置生产密钥和数据库密码。...您已使用Nginx和Unicorn部署了RubyRails应用程序的生产环境。 如果您希望改进生产Rails应用程序部署,您应该查看我们的如何使用Capistrano自动部署的教程系列。

4.2K00

Salesforce的PaaS平台Heroku简介

2011年9月15日,Heroku和Facebook(脸谱)介绍Heroku运营的脸谱网。...2011/11/23:Heroku推出DBaaS数据库即服务 Heroku Postgres供使用 SQL 数据库的开发人员使用....该平台采用了Ruby on Rails 的网络开发框架,客户只需本地计算机设置一个Ruby Gem(Ruby语言的程序包管理器)就可在Heroku云中部署和运行应用程序。...Heroku平台程序开发上可让你得到与本地计算机相同,甚至更好的体验。 HerokuRails应用最简单的部署平台。只是简单的把代码放进去,然后启动、运行,没人会做不到这些。...Heroku会处理一切,从版本控制到 自动伸缩的协作(基于Amazon的EC2之上)。我们提供一整套工具来开发和管理应用,不管是通过Web接口还是新的扩展API

7.1K20

使用Capistrano,Nginx和PumaUbuntu 14.04上部署Rails应用程序

它通过SSH编写任意工作流脚本,可以将Web应用程序可靠地部署到任意数量的远程计算机,并自动执行预编译和重新启动Rails服务器等常见任务。...本教程中,我们将在Ubuntu安装Ruby和Nginx,并在我们的Web应用程序中配置Puma和Capistrano。...我们将使用Capistrano自动执行常见的部署任务,因此每次我们必须将新版本的Rails应用程序部署到服务器时,我们都可以通过一些简单的命令来实现。...相反,我们将使用Ruby版本管理器。有很多可供选择(rbenv,chruby等),但我们将在本教程中使用RVM。RVM允许您在同一系统轻松安装和管理多个rubies,并根据您的应用使用正确的一个。...ssh -p your_port_num deploy@your_server_ip 'cat >> ~/.ssh/authorized_keys' 第六步 - Rails应用程序中添加部署配置 本地计算机上

4.9K40

腾讯云使用 Harbor 部署私有Registry

Docker 作为当下最火的容器技术,各企业都在积极拥抱 Docker, Docker 中,一个非常重要的元素就是Docker 镜像: Docker Images,对于一些没有私密保护需求的镜像,我们可以选择将镜像推送到...安装Docker 这里我使用的是 CentOS 7 来配置 Docker 环境,首先,我们要先安装 Docker 首先,更新下系统的软件包 sudo yum update 然后,加入 Docker 的...harbor-offline-installer-0.4.5.tgz cd harbor 然后修改配置文件,修改为我们自己的需要参数 vi harbor.cfg 将其中的 hostname 修改为我们的公网 IP,方便我们公网中使用...根据你的需要,也可以设置为内网 IP,只私有网内部使用。 配置完成后,运行安装脚本 sudo ./install.sh 当你看到这样的界面时,就说明安装好了,就可以开始使用harbor了!...打开浏览器,输入我们绑定的IP地址 使用默认的帐号admin密码Harbor12345登录,就可以看到我们的界面了 接下来,就是使用 Harbor 来管理我们的镜像!

8.3K00

使用nodejs编写api接口并部署到服务器

一、用node.js编写api接口 1、安装node环境,没有就去看上一篇文章 2、创建一个node项目, 新建一个目录文件,例node_proxy 3、新建的node项目执行npm init,...http://localhost:8888/ms/coupon/template/get 去访问这个接口 ---- 二、把项目部署到服务器 到目前node的环境是搭建好了的。...1、把 api 接口代码上传到服务器(不用上传node_modules,有package.json文件就行了),服务器文件通过命令窗口npm install 安装依赖。...一般放到服务器的根路径下的 api 文件夹/api/ 2、服务器安全组中添加 api 监听的端口号不然访问不了接口,比如腾讯云云的安全防火墙 image.png 3、cd 到 api 接口目录下,...三、让nodejs接口一直服务器运行 1、screen、forever、pm2都可以管理nodejs的接口,我这里用了pm2. 2、 建议使用 PM2 , 优点:   ①可以多进程   ②可以将日志

7.4K20

备选方案:Linux Deploy使用镜像部署Linux系统

文章更新:   20170201 初次成文 问题提出:   之前的文章中: Linux Deploy:Android上部署Linux   小苏为大家介绍了使用Linux DeployAndroid...于是小苏在这里发布另一种备选方案 - 使用小苏部署好的Linux镜像来部署Linux系统。   这种方法只支持Ubuntu和Kail Linux(因为小苏只部署了这两个镜像,其他的没有尝试)。...:   下面介绍Ubuntu镜像的使用方法:   1....值得注意的是,SSH连接进Linux的命令行界面时,用户名为:android,密码为:sun12345,连接即可~   部署Kail Linux的步骤和Ubuntu相似,你只需要下载小苏部署好的...其中,Kail Linux的源地址为: http://mirrors.ustc.edu.cn/kali/   以上小苏部署好的两个镜像中,小苏仅仅部署好了SSH,如果你想开启图形界面,那么你可以选项中配置好图形界面和桌面环境的选项

7K50

Kubernetes 使用 Spinnaker 构建部署流水线

本博文中,我们将讨论如何安装 Spinnaker 以及如何为 Kubernetes 运行的工作负载构建持续交付管道。我们的工作流与以下类似: ?...使用 Helm EKS 安装 Spinnaker。 设置 LDAP/AD 身份验证。 通过设置入站控制器来暴露 Spinnaker。 将一个 GitHub 账户添加到 Spinnaker。... Spinnaker 中构建 CI/CD 管道 — 使用来自 GitHub 的 Web-hook 自动化编译,手动批准生产环境部署。 运行管道并部署应用程序。 测试。 清除。...第 8 步: Spinnaker 中构建 CI/CD 管道 开始构建此管道前,您需要了解一些 Spinnaker 概念: 应用 — 应用是指您将使用 Spinnaker 部署的服务、该服务的所有配置以及它运行所需的所有基础实施...您可以管道屏幕看到进度。人工判断阶段,它将与以下类似: ? 单击 Continue,管道将继续将部署推送到生产环境。 祝贺您!您已经启动并运行了您的 Spinnaker 管道。

2.9K20
领券