如何部署 React/Laravel 项目？答案

【问题标题】：How to deploy React/Laravel project?如何部署 React/Laravel 项目？
【发布时间】：2017-11-05 12:19:59
【问题描述】：

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

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

【问题讨论】：

您能否提及您计划使用的基础架构？是云计算环境还是本地环境？

标签： php laravel reactjs laravel-5

【解决方案1】：

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

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

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

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

1.b Laravel（5+ 左右，我的例子是 5.1）附带一个名为“Elixir”的 Gulp/build 工具。它设置为在 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 路由器，所以我暂时不考虑所有 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

【讨论】：

没问题！我很高兴它有帮助！

【解决方案2】：

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

第一步：

从 git 下载代码

第二步：

作曲家安装

第三步：

npm 安装

如果你遇到 - cross-env NODE_ENV=development webpack --progress --hide-modules --

您需要让跨环境在全局范围内工作，而不是在项目中使用它。

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’ Is Not Recognized as an Internal or External Command

第四步：

npm 运行开发

第 5 步： php工匠服务

【讨论】：

【解决方案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)

创建项目文件

sudo nano /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 我们使用它来为服务器提供位于磁盘中的应用程序 index 主文件

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

sudo ln -s /etc/nginx/sites-available/react_counter /etc/nginx/sites-enabled

测试 NGINX 配置

$ sudo nginx -t

重启 Nginx 服务器

$ sudo systemctl restart nginx

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

感谢阅读。

【讨论】：