个人中心
gpt4 book ai didi

php - 如何部署 React/Laravel 项目？

转载 作者：可可西里 更新时间：2023-11-01 00:08:14 27 4
gpt4 key购买 nike

我使用 Laravel 框架作为 Restful API 服务器，使用 React 作为 SPA 客户端渲染和路由，我使用了 React 创建应用程序套件，我构建了 React 项目。我通过键入 npm run build 获取 app.js 和 app.css 文件。

  1. 如何在 Laravel 中使用这个文件？
  2. 如何使用 React 路由？
  3. 如何正确部署？

最佳答案

我可以回答你的问题并举个例子。

基本上，将 Laravel 用作 React(或 JS)单页应用程序的 API 后端:

  1. 设置一个 Laravel 项目 - 它是后端，所以设置它和你想要的路由

1.a 建议 使您的 SPI URL 与您的 Laravel 应用程序本身可能用于页面请求或其他事物(例如“/api/...").

1.b Laravel(5+ 左右，我的示例是 5.1)附带了一个名为“Elixir”的 Gulp/构建工具。它被设置为在 resources/... 目录中查找脚本文件和 View 之类的东西，因此我建议将您的脚本放在某个地方，例如 resources/assets/scripts/app.js 或其他地方。

1.c(构建过程)假设您将 React 脚本放在 resources/assets/script 中，然后当您运行“gulp”并且 Elixir 任务运行以构建应用程序时，它将把将捆绑的 app.js 文件放入 public/js/app.js -- Laravel View 默认将 public/目录视为它们的根目录，因此您可以在索引页面中引用该构建文件作为“js/app.js”。

1.d 如果您不熟悉 Gulp 或 Elixir，我鼓励您阅读此页面以获得概述:

https://laravel.com/docs/5.1/elixir

  1. 为 Laravel 设置路由、您的索引页面和 API 内容。我建议路由“/”和所有非 API(或已知)路由以仅创建索引页面 View ，我们将在其中加载 app.js ReactJS 应用程序文件。

2.a 值得注意的是，在我的例子中，目前，我还没有实现 React Router，所以我暂时保留所有 React 路由。我假设这是您所知道的，因为您的问题似乎是“如何使后端成为 Laravel”。

Route::get('/', function () { return View::make('pages.index'); });

Route::group(['prefix' => 'api'], function () {
    Route::get('tasks', 'TodosController@index');
});

2.b 设置路由以将请求映射到 Controller 操作，您可以在其中自定义响应。例如，您可以使用 JSON 响应 JSON API:

TodosController@index

$current_tasks = array(
  array("id" => "00001", "task" => "Wake up", "complete" => true),
  array("id" => "00002", "task" => "Eat breakfast with coffee power", "complete" => true),
  array("id" => "00003", "task" => "Go to laptop", "complete" => true),
  array("id" => "00004", "task" => "Finish React + Laravel Example app", "complete" => false),
  array("id" => "00005", "task" => "Respond on StackOverflow", "complete" => false)
);
    
    
return response()->json($current_tasks);
  1. 就部署而言，您可能需要构建代码(我的示例就是这样做的)并将代码的构建 版本加载到您的生产索引页面或任何地方。您还将把它整体部署为一个 Laravel 应用程序——您希望 Laravel 首先在外部看到路由，并希望 React 处理它自己的 URL 和路由。这样，假设您扩展了 SPA 但想要相同的后端，您只需将路由添加到您的 Laravel 应用程序作为路由文件中的异常/覆盖。

resources/pages/index.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>BLaravel 5.1 + ReactJS Single-Page App</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/app.css" />

    <!-- BACKUP SCRIPT CNDS, for React -->
    <!-- <script src="https://unpkg.com/react@15/dist/react.js"></script> -->
    <!-- <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> -->

  </head>
  <body>

    <!-- Container for React App -->
    <div class="container" id="react-app-container"></div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <script src="js/app.js"></script>


  </body>
</html>

因为(据我所知)没有针对此类事情的 Plnkr，所以我制作了 Laravel + React 的本地开发版本来说明我制作您似乎要求的那种应用程序的方式。它目前托管在我的 GitHub 帐户上，因此请随意克隆它并遵循 README 并在有帮助时使用它，或者寻求编辑/帮助/澄清。

https://github.com/b-malone/Laravel5-ReactJS-Boilerplate.git

构建/设置命令(引用)

git clone ... [TEST/] && cd into [TEST/]
composer install
npm install
cp .env.example .env
gulp
php artisan serve
visit http://localhost:8000

关于php - 如何部署 React/Laravel 项目？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44356861/

27 4 0
文章推荐： php 从文本 block 中提取所有主题标签和推特名称
文章推荐： node.js - 我怎样才能让 Node 重新处理/etc/hosts？
文章推荐： javascript - Node.js fs.watchFile，是否可以一次检查更改？
文章推荐： javascript - IF 语句和异步函数的控制流程
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com