如何部署React/Laravel项目? [英] How to deploy React/Laravel project?

问题描述

我使用Laravel框架作为Restful API服务器，使用React作为SPA客户端渲染，并使用我使用React创建应用程序工具包进行路由，我构建了React项目.我通过 npm run build 类型获取app.js和app.css文件.

1. 如何在Laravel中使用此文件?
2. 如何使用反应路由?
3. 如何正确部署它?

解决方案

我可以回答您的问题并举个例子.

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

1. 设置一个Laravel项目-它是后端，因此设置它以及所需的路线

1.a 建议将SPI的URL与您的Laravel应用本身可能用于页面请求或其他用途(例如"/api/...& quot;).

1.b Laravel(5+左右，我的例子是5.1)与称为"Elixir"的Gulp/构建工具打包在一起.它的设置是在resources/...目录中查找脚本文件和视图之类的内容，因此我建议将脚本放置在 resources/assets/scripts/app.js 之类的地方./p>

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

1.d如果您不熟悉Gulp或Elixir，建议您阅读此页面以获取概述:

https://laravel.com/docs/5.1/长生不老药

2. 设置Laravel的路由，索引页面和API内容.我建议路由"/"和所有NON-API(或已知)路由以仅创建索引"页面视图，在该视图中，我们将加载app.js ReactJS应用程序文件.

2.a值得注意的是，在我的示例中，目前我还没有实现React Router ，因此我暂时不考虑所有React路由.我假设这是您所知道的，因为您的问题似乎是如何使后端成为Laravel".

  Route :: get('/'，function(){return View :: make('pages.index');});Route :: group(['prefix'=>'api']，function(){路线:: get('tasks'，'TodosController @ index');}); 

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

TodosController @ index

  $ current_tasks = array(数组("id" ="00001"，任务" =>唤醒"，完成" ="true")，数组("id" ="00002"，任务" =>用咖啡吃早餐"，完成" ="true")，array("id" ="00003"，任务" ="Go to laptop"，"complete" ="true")，array("id" ="00004"，任务" ="Finish React + Laravel Example app"，完整" ="false")，array("id" ="00005"，任务" =在StackOverflow上响应"，完成" ="false"));返回response()-> json($ current_tasks); 

3. 就部署而言，您可能需要构建代码(我的示例确实如此)，并将 builded 版本的代码加载到生产索引页面中或任何位置.您还需要将其整体部署为laravel应用程序-您希望Laravel首先在外部看到路由，并希望React处理它自己的URL和路由.这样，假设您扩展了SPA，但希望使用相同的后端，则只需将路由添加到Laravel应用中，作为路由文件中的例外/替代.

资源/页面/index.blade.php

 <！DOCTYPE html>< html lang ="en">< head><元字符集="utf-8">< meta http-equiv =与X-UA兼容"；content ="IE = edge"<元名称=视口"内容＝宽度＝设备宽度，初始比例＝ 1".<！-以上3个元标记*必须*排在首位；其他任何头部内容都必须在这些标签之后*< title> BLaravel 5.1 + ReactJS单页应用程序</title>< ;!-引导程序->< 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，用于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><身体><！-React App的容器->< div class =容器"；id ＝"react-app-container"</div>.<！-jQuery(Bootstrap的JavaScript插件必需)->< 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/]&&光盘插入[TEST/]作曲家安装npm安装cp .env.example .env吞咽PHP工匠服务访问http://localhost:8000 

I use Laravel framework as Restful API server, and React as SPA client render and for routing i have used react create app kit, I build React project. I get app.js and app.css files by type npm run build.

1. How to use this file with Laravel?
2. How use react routing?
3. How to deploy it correctly?

解决方案

I can answer your questions and have an example.

Basically, to use Laravel as an API backend for a React (or JS) Single-Page application:

1. setup a Laravel project - it's the backend, so setup it and the routes you want

1.a Suggestion Make your URLs for the SPI separate/distinct from normal URLs your Laravel app itself might use for page requests or other things (such as "/api/...").

1.b Laravel (5+ or so, my example is 5.1) comes packaged with a Gulp/build tool called "Elixir". It's setup to look for things like scripts files and views in the resources/... directory, so I suggest putting your scripts in some place like resources/assets/scripts/app.js or something.

1.c (Build Process) Assuming you put your React scripts in resources/assets/script, then when you run "gulp" and the Elixir task runs for building the app, it will put the bundled, app.js file into public/js/app.js -- Laravel views by default think of the public/ directory as their root directory, so you can reference that built file in your index page as "js/app.js".

1.d If Gulp or Elixir are unfamiliar to you, I encourage you to give this page a read for an overview:

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

2. setup the Routes for Laravel, your Index page and the API stuff. I suggest routing '/' and all NON-API (or known) routes to just make the Index page View, where we'll load the app.js ReactJS application file.

2.a It's worth noting that in my example, currently, I have not implemented the React Router, so I'm leaving all React routes alone for the moment. I'm assuming this is something you know since your questions seems to be "how to make the Backend be Laravel".

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

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

2.b Setup the Routes to map requests to controller actions, where you can customize your response. For example, you can respond with JSON for a 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);

3. As far as deployment goes, you'll probably need to build the code (my example does) and load the built version of the code into your production Index page or wherever. You'll also deploy it overall as a laravel app -- you want Laravel seeing the Routes first externally and want React to handle it's own URLs and routes. This way, say you expand the SPA but want the same backend, you just add routes to your Laravel app as exceptions/overrides in the routes file.

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>

Because there's (as far as I know) no Plnkr for this sort of thing, I made a local development version of Laravel + React to illustrate my way of making the kind of app you seem to be asking for. It's currently hosted on my GitHub account, so feel free to clone it and follow the README and use it if it helps, or ask for edits/help/clarification.

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

Build/Setup Commands (Reference)

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

这篇关于如何部署React/Laravel项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！