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

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

相关·内容

领券