首页
学习
活动
专区
工具
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提供的各种功能和插件来优化和扩展你的应用程序。

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

相关·内容

  • 日常学习——创建一个React项目创建

    React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。 React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用。 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

    01

    React 基础

    当翻阅很多的 React 教程时,在前言或者建议中会提醒你在想要去接触 React 之前,你应该会些啥?笼统的讲就是你应该有一定的 Web 开发基础,即你要认识什么是 HTML5 (Hyper Text Markup Language 5)、 CSS (Cascading Style Sheet)以及 JavaScript 。有了这两样东西你完全就可以写出一些网页了,比如一个简单的登录页面、一个表格展示页面又或者一个表单页面……当你具备了一定的审美和逻辑之后,这些静态的网页便可以信手捏来了(不知道这个词是不是这么用的),如果你不满足于此,想要一个既美观又炫酷的网页,那可能就需要一些 JS (JavaScript)了。而本系列的就在于解决这个问题以及怎么才能更提高效率,通过较为清晰简单的代码逻辑实现很多的功能。

    03
    领券