I have developed a project with Vuejs as the front-end and Laravel as the back-end api.In localhost they run in different ports.How should I deploy them in production?
3
-
i understand that you develop the frontend separately using Vue clie?Boussadjra Brahim– Boussadjra Brahim2019-02-16 13:50:37 +00:00Commented Feb 16, 2019 at 13:50
-
You can use subdomainZahid Hassan Shaikot– Zahid Hassan Shaikot2019-02-16 13:53:26 +00:00Commented Feb 16, 2019 at 13:53
-
You could take your front-end code source and compile it using laravel mix and in this case you could deploy you app in the same address and portBoussadjra Brahim– Boussadjra Brahim2019-02-16 13:55:55 +00:00Commented Feb 16, 2019 at 13:55
Add a comment
|
1 Answer
When you build your Vue app for production, all the relevant files are in the dist folder. It does not run on any port, but instead the files are served by a webserver (e.g. Apache or Nginx). For a laravel api you normally have the public folder in the laravel installation visible, while having the rest of the files not directly accessible from the web.
I am going to assume that you want to deploy the api and the frontend on the same domain. The easiest way of getting this to work is by having a specific prefix for your api. In the case below, I use the prefix /api for all api requests, since this is the default for api routes. Anything else is considered a request for the frontend.
You set up your folder structure like the following. The public_html folder is what is normally loaded when going to example.com and you can test this by adding a test.txt file with some content and going to example.com/test.txt. The backend folder contains your laravel installation. The frontend folder contains everything that the dist folder contained after running npm run build.
/var
+-- /www
+-- /vhosts
+-- /example.com
+-- public_html
+-- /backend
+-- /frontend
To get everything to work, we are going to remove the public_html folder and replace it with a symlink to backend/public.
cd /var/www/vhosts/example.com
rm -r public_html
ln -s ../backend/public public_html
When we check example.com, we now should see that we can make requests to the api using example.com/api/someroute. There are several ways we can make the frontend work with this, but for ease of deployment, lets create a symlink to the dist folder.
cd /var/www/vhosts/example.com/public_html
ln -s ../../frontend/dist app
If you are using hash mode for your Vue application and don't mind accessing the app through example.com/app, I believe this is all you would need to do. Otherwise you would need to modify the .htaccess file if you are using Apache, or change the rewrite configuration of whatever other webserver you are using. I imagine the .htaccess file would look something like this:
# We assume that the FollowSymLinks option is enabled in the main Apache configuration.
RewriteEngine On
# Rewrite anything that starts with `api` to the laravel index file
RewriteCond %{REQUEST_URI} ^/api
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
# Rewrite anything else to the frontend app
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ /app/index.html [L]
2 Comments
Huthaifah Kholi
Dear @Sumurai8 thanks for this guide. I've laravel - react application instead of Vue.js. when I run the example.com/app it should show the front end application (index.html) @ front end folder, but the server return a 403 error.
Sumurai8
@Huthaifah Kholi Please ask a new question if you want help with your problem with the button in the top-right. You can link this Q&A in your newly asked question if you think that makes your question clearer. Non of my answer generates a 403 on it's own, so I can't really tell why you would be getting that http status code.
