我使用 Laravel 框架作为 Restful API 服务器，使用 React 作为 SPA 客户端渲染和路由，我使用了 react create app kit，我构建了 React 项目。我按类型获取 app.js 和 app.css 文件npm run build。
- 如何在 Laravel 中使用这个文件？
- 如何使用react路由？
- 如何正确部署？
如何部署 React/Laravel 项目？
IT技术
php
laravel
reactjs
laravel-5
2021-04-28 18:09:32
3个回答
我可以回答你的问题并举个例子。
基本上，要使用 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
请找到在本地机器上运行应用程序的步骤
步骤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' 不被识别为内部或外部命令
步骤4：
npm 运行开发
第 5 步：Php 工匠服务
我们可以通过这个 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
谢谢阅读。