如何部署 React/Laravel 项目？

Question

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.我使用 Laravel 框架作为 Restful API 服务器，使用 React 作为 SPA 客户端渲染和路由，我使用了 react create app kit，我构建了 React 项目。 I get app.js and app.css files by type npm run build .我通过npm run build类型获取 app.js 和 app.css 文件。

How to use this file with Laravel?如何在 Laravel 中使用这个文件？
How use react routing?如何使用反应路由？
How to deploy it correctly?如何正确部署？

Answer 1

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:基本上，要将 Laravel 用作 React（或 JS）单页应用程序的 API 后端：

setup a Laravel project - it's the backend, so setup it and the routes you want设置一个 Laravel 项目 - 它是后端，所以设置它和你想要的路由

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

1.b Laravel (5+ or so, my example is 5.1) comes packaged with a Gulp/build tool called "Elixir". 1.b Laravel（5+ 左右，我的例子是 5.1）附带了一个名为“Elixir”的 Gulp/构建工具。 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.它设置为在 resources/... 目录中查找脚本文件和视图之类的内容，因此我建议将您的脚本放在诸如resources/assets/scripts/app.js之类的地方。

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.c（构建过程）假设你把你的 React 脚本放在resources/assets/script ，那么当你运行“gulp”并且 Elixir 任务运行以构建应用程序时，它会将捆绑的 app.js 文件放到public/ js/ app.js——默认情况下，Laravel 视图将 public/ 目录视为它们的根目录，因此您可以将索引页面中的构建文件引用为“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: 1.d 如果您不熟悉 Gulp 或 Elixir，我鼓励您阅读此页面以获得概述：

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

setup the Routes for Laravel, your Index page and the API stuff.为 Laravel 设置路由、索引页面和 API 内容。 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.我建议路由 '/' 和所有非 API（或已知）路由来创建索引页面视图，我们将在其中加载 app.js ReactJS 应用程序文件。

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. 2.a 值得注意的是，在我的示例中，目前我还没有实现 React Router ，所以我暂时不考虑所有 React 路由。 I'm assuming this is something you know since your questions seems to be "how to make the Backend be Laravel".我假设这是您知道的，因为您的问题似乎是“如何使后端成为 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. 2.b 设置路由以将请求映射到控制器操作，您可以在其中自定义响应。 For example, you can respond with JSON for a JSON API:例如，您可以使用 JSON 响应 JSON API：

TodosController@index 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);

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.您还将整体部署为 Laravel 应用程序——您希望 Laravel 首先从外部查看路由，并希望 React 处理它自己的 URL 和路由。 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.这样，假设您扩展 SPA 但想要相同的后端，您只需将路由添加到 Laravel 应用程序作为路由文件中的异常/覆盖。

resources/pages/index.blade.php资源/页面/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.因为（据我所知）没有 Plnkr 用于这类事情，所以我制作了 Laravel + React 的本地开发版本来说明我制作您似乎需要的那种应用程序的方式。 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.它目前托管在我的 GitHub 帐户上，所以请随意克隆它并按照自述文件进行操作，如果有帮助，请使用它，或者要求编辑/帮助/澄清。

https://github.com/b-malone/Laravel5-ReactJS-Boilerplate.githttps://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

Answer 2

Please find the steps to run app in your local machine请找到在本地机器上运行应用程序的步骤

Step 1:第 1 步：

Download the code from git从 git 下载代码

Step 2:第 2 步：

Composer install作曲家安装

Step 3:第 3 步：

Npm install安装

Please do following steps if you face - cross-env NODE_ENV=development webpack --progress --hide-modules --如果您遇到以下问题，请执行以下步骤 - cross-env NODE_ENV=development webpack --progress --hide-modules --

You need to make cross-env working globally instead of having it in the project.您需要让 cross-env 在全球范围内工作，而不是在项目中使用它。

1) remove node_modules folder 1) 删除 node_modules 文件夹

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

3) remove "cross-env": "^5.0.1", from package.json file devDependencies section. 3) 从 package.json 文件 devDependencies 部分中删除“cross-env”：“^5.0.1”。 Actually, you can skip this step and keep package.json intact.实际上，您可以跳过此步骤并保持 package.json 完好无损。 If you prefer.若你宁可。

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

5) run npm run dev 5) 运行 npm run dev

Laravel 5.4 'cross-env' Is Not Recognized as an Internal or External Command Laravel 5.4 'cross-env' 不被识别为内部或外部命令

Step 4:第四步：

Npm run dev npm 运行开发

Step 5: Php artisan serve第 5 步：Php 工匠服务

Answer 3

we can simplify our task by this bash script.ssh我们可以通过这个 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)

Create a project file创建项目文件

sudo nano /etc/nginx/sites-available/react_counter须藤纳米 /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 put your IP address root we use this to give the server the application located in the disk index The main file server_name 把你的IP地址放在root我们用这个给服务器应用位于磁盘索引的主文件

Enable the file by linking to the sites-enabled dir通过链接到启用站点的目录来启用文件

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

Test NGINX config测试 NGINX 配置

$ sudo nginx -t

Restart Nginx Server重启 Nginx 服务器

$ sudo systemctl restart nginx

Open your browser and go to http://youripaddress打开浏览器并转到http://youripaddress

Thanks for reading.谢谢阅读。

如何部署 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