如何部署 React/Laravel 项目？

Question

我使用 Laravel 框架作为 Restful API 服务器，使用 React 作为 SPA 客户端渲染和路由，我使用了 react create app kit，我构建了 React 项目。 我通过npm run build类型获取 app.js 和 app.css 文件。

如何在 Laravel 中使用这个文件？
如何使用反应路由？
如何正确部署？

Answer 1

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

基本上，要将 Laravel 用作 React（或 JS）单页应用程序的 API 后端：

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

1.a建议将 SPI 的 URL 与 Laravel 应用程序本身可能用于页面请求或其他内容（例如“/api/...”）的普通 URL分开/区分。

1.b Laravel（5+ 左右，我的例子是 5.1）附带了一个名为“Elixir”的 Gulp/构建工具。 它设置为在 resources/... 目录中查找脚本文件和视图之类的内容，因此我建议将您的脚本放在诸如resources/assets/scripts/app.js之类的地方。

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/elixir

为 Laravel 设置路由、索引页面和 API 内容。 我建议路由 '/' 和所有非 API（或已知）路由来创建索引页面视图，我们将在其中加载 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 设置路由以将请求映射到控制器操作，您可以在其中自定义响应。 例如，您可以使用 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);

就部署而言，您可能需要构建代码（我的示例就是这样）并将代码的构建版本加载到您的生产索引页面或任何地方。 您还将整体部署为 Laravel 应用程序——您希望 Laravel 首先从外部查看路由，并希望 React 处理它自己的 URL 和路由。 这样，假设您扩展 SPA 但想要相同的后端，您只需将路由添加到 Laravel 应用程序作为路由文件中的异常/覆盖。

资源/页面/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 帐户上，所以请随意克隆它并按照自述文件进行操作，如果有帮助，请使用它，或者要求编辑/帮助/澄清。

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

Answer 2

请找到在本地机器上运行应用程序的步骤

第 1 步：

从 git 下载代码

第 2 步：

作曲家安装

第 3 步：

安装

如果您遇到以下问题，请执行以下步骤 - cross-env NODE_ENV=development webpack --progress --hide-modules --

您需要让 cross-env 在全球范围内工作，而不是在项目中使用它。

1) 删除 node_modules 文件夹

2) 运行 npm install --global cross-env

3) 从 package.json 文件 devDependencies 部分中删除“cross-env”：“^5.0.1”。 实际上，您可以跳过此步骤并保持 package.json 完好无损。 若你宁可。

4) 运行 npm install --no-bin-links

5) 运行 npm run dev

Laravel 5.4 'cross-env' 不被识别为内部或外部命令

第四步：

npm 运行开发

第 5 步：Php 工匠服务

Answer 3

我们可以通过这个 bash script.ssh来简化我们的任务

#!/bin/bash
#install updates
sudo  apt-get update
sudo  apt-get upgrade
#install nginx
sudo apt-get install nginx
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash
#install nodejs
sudo apt-get install -y nodejs
#status of install ndoe and nginx
node -v
sudo service nginx status
#clone repo of project in server
git clone https://github.com/your_new_project.git
cd your_new_project
npm run build 
#(first time,it downlod lib,and files )
npm run build  
#(second time,he build and run it)
cd build/
ls
ls static/
#now tell nginx server (listen :80/ root :path of build folder/ location :index.html)

创建项目文件

须藤纳米 /etc/nginx/sites-available/react_counter

server {
   server_name your_IP domain.com www.domain.com;
   root /home/username/React-counter-app/build;
   index index.html index.htm;
   location / {
   try_files $uri /index.html =404;
   }
}

server_name 把你的IP地址放在root我们用这个给服务器应用位于磁盘索引的主文件

通过链接到启用站点的目录来启用文件

须藤 ln -s /etc/nginx/sites-available/react_counter /etc/nginx/sites-enabled

测试 NGINX 配置

$ sudo nginx -t

重启 Nginx 服务器

$ sudo systemctl restart nginx

打开浏览器并转到http://youripaddress

谢谢阅读。

如何部署 React/Laravel 项目？

问题描述

3 个解决方案

解决方案1
15 已采纳 2017-06-08 18:48:08

解决方案2
1 2020-04-15 19:14:53

解决方案3
0 2021-11-24 07:46:15

如何部署 React/Laravel 项目？

问题描述

3 个解决方案

解决方案1 15 已采纳 2017-06-08 18:48:08

解决方案2 1 2020-04-15 19:14:53

解决方案3 0 2021-11-24 07:46:15

解决方案1
15 已采纳 2017-06-08 18:48:08

解决方案2
1 2020-04-15 19:14:53

解决方案3
0 2021-11-24 07:46:15