Two different technologies for frontend and backend, so far so good.
The problem (which is, in turn, the most common situation) is that both frontend and backend have to be served from the same domain (or server/file structure).
What is the best approach to make the two projects coexist in the same server?
EDIT : The main problem here is that neither Laravel Mix nor any Laravel frontend capabilities can be used because of the create-react-app stack. The rules it imposes make very difficult the integration without first ejecting the app, which is not recommendable from the maintenance point of view.
If you are using Apache HTTPd, you have two options.
Lets say you have copied your front-end and back-end directories as follows:
Back-end (assumed Laravel 5.x) under /var/www/yourappname/api/
Front-end under /var/www/yourappname/frontend/
You can access your app using app.yourdomain.com
. (I normally prefer www.yourdomain.com
to be a separate server / Apache instance for security and performance reasons).
1. Two sub-domains
Have two sub-domains pointing to same IP address, say app.yourdomain.com
for front-end, and api.yourdomain.com
for Laravel back-end. Create two virtual hosts in your Apache configuration and document root as follows
For api.yourdomain.com
/var/www/yourappname/api/public
For app.yourdomain.com
/var/www/yourappname/frontend/
Your back-end base URL to be included in front-end app will be api.yourdomain.com/
Advantage: if you wish to split your front-end and back-end on two different Apache instances or separate servers in future, you can do it easily. Also, front-end is static content and hence could be served using other low cost options like S3 based sites.
Caveat: You will have to take care of CORS ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ) issue. Also, you will need two SSL certificates or multi-domain certificate or wild-card SSL certificate.
I prefer this option and I have used this in one of my setup considering future load.
2. Single Domain and Alias
Set Document Root as
/var/www/yourappname/frontend
Add Alias as follows ( http://httpd.apache.org/docs/2.4/mod/mod_alias.html#alias )
Alias "/api/" "/var/www/yourappname/api/public/
Your back-end base URL to be included in front-end app will be app.yourdomain.com/api/
(I have not yet verified this on my setup)
Advantage: You have single domain, and need single SSL certificate.
Caveat: All hits will be on same Apache service and hence difficult to segregate load of compute intensive API requests and static content.
Note: In either case, I have pointed to "public" directory of Laravel framework, to avoid exposing configuration and other directories of Laravel to outside world.
I have had to spend considerable time on fixing the issues I faced while deploying my project with React front-end and Laravel as the API. Hope this helps someone who is trying to deploy similar stack to production.
To summarize, I had separate configs for react and laravel projects, each with different listen ports, and different location
.
Since I was using Laravel as my API, I used /api
as the location config for laravel and /
as location config for react.
Please find the nginx configs I used for reference
React:
server {
listen 80;
server_name <server_ip or hostname>;
charset utf-8;
root /var/www/html/react;
index index.html index.htm;
# Always serve index.html for any request
location / {
root /var/www/html/react;
try_files $uri /index.html;
}
error_log /var/log/nginx/react-app-error.log;
access_log /var/log/nginx/react-app-access.log;
}
Laravel:
server {
listen 90;
server_name <server ip or hostname>;
charset utf-8;
root /var/www/html/laravel/public;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
index index.php index.html index.htm;
# Always serve index.html for any request
location /api {
try_files $uri $uri/ /index.php?$query_string;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
error_page 404 /index.php;
location ~ \.php$ {
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ /\.(?!well-known).* {
deny all;
}
error_log /var/log/nginx/laravel-app-error.log;
access_log /var/log/nginx/laravel-app-access.log;
}
I know it's a question from some time ago, but in case someone stumbles upon this in search for answers, it is now possible to use Create React App in Laravel (without ejecting): https://github.com/mjsarfatti/create-react-app-laravel/
create-react-app-laravel
is essentially a fork of Create React App that runs in your Laravel project.
You can see https://github.com/mjsarfatti/create-react-app-laravel/wiki/ for the installation guide, and https://dev.to/mjsarfatti/introducing-cral-create-react-app-laravel-4n90 for the announcement.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.