如何部署Laravel 5.4 API和Vue.js 2项目？

Question

I have created an API using Laravel 5.4 and frontend side using Vue.js 2 on different domains. Installed CORS to an API. By this time it all works correctly in my local machine. How should I deploy it in a proper way to a hosting server? I have 2 folders: backend and frontend . In there I've implemented 2 separate projects: one is an API and the other one is a frontend side.

Here's my routes/api.php

Route::group(['middleware' => ['jwt.auth']], function() {    
    Route::get('logout', 'AuthController@logout');
    Route::get('/requests', 'RequestController@index');
    Route::delete('/requests/{id}', 'RequestController@destroy');
});

Route::post('login', 'AuthController@login');
Route::post('register', 'AuthController@register');


Route::post('/requests', 'RequestController@create');

Route::get('/', function() {
    return response()->json([
        'success' => true
    ]);
});

Route::get('/hello', function() {
    return response()->json([
        'success' => true,
        'message' => 'API is working correctly.'
    ]);
});

Answer 1

You probably have already observed that Laravel comes pre configured to use Vue.js as its frontend, which you use to build components and then build or compile into your app.js using Webpack, Laravel-Mix, Babel etc.

The normal structure is your Laravel code, your api, lives in the app directory, and your Vue.js and style sheets are built in the resources/assets/ directory, then built out into your public html directory using npm run dev or npm run watch etc.

To connect your front end and backend, or communicate between the two, you would use some form of XMLHttpRequest, aka Ajax.

Laravel has Axios installed by default for all your Ajax needs. This is where you want to start looking at making the api calls to your backend.

An Axios request from Vue looks something like this. (promise based)

axios.get('logout').then(//some function).catch(//some function);

Here is a simple api request being made to remote endpoint that returns a json response with {"message":"hello world"}

 Vue.component('example', { template: '#cool', data(){ return{ requestData: {"message":"waiting for request..."}, } }, methods: { makeRequest(){ axios.get('https://api.myjson.com/bins/xpk6h').then(function(response) { console.log(response.data.message); this.requestData = response.data; }.bind(this)); } }, }); const app = new Vue({ el: '#app' }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <div id="app"> <example></example> </div> <template id="cool" functional> <div> <button @click="makeRequest">make api request</button> <p>{{requestData.message}}</p> </div> </template>