angularjs + laravel 先後端分離框架搭建教程 (Nginx)

angularjs + laravel 先後端分離框架搭建教程 (Nginx)

angularjs 和 laravel 分別是當前框架裏比較流行的框架，一個是前端js框架，一個是後端PHP框架。 國內的盆友都對先後端分離極其的熱衷，這裏我就和你們說說我用angularjs 和 laravel 搭建先後端分離框架的一個總體過程。

1. 首先，咱們要分析一下這兩個框架的幾個要素。

• laravel 框架裏包含了前端渲染的功能，因此整合的過程當中。咱們要摒棄laravel 的渲染模板，laravel只提供純粹的接口功能。

• angularjs 框架消費接口，並實現顯示邏輯，頁面跳轉等前端功能。

• 路由的各類問題，咱們從nginx的配置文件入手。

2. 如今，咱們開始動手吧。

• 環境: ubuntu16.04 　 angular2.0 　 laravel5.2　 nginx1.10

• 下載安裝laravel ，咱們這裏用laravel 5.2版本的,能夠從github下載。

git clone https://github.com/laravel/laravel.git
cd laravel
composer install
chmod -R 777 ./storage  ./bootstrap/cache

laravel安裝過程參考http://www.golaravel.com/laravel/docs/5.1/

• 下載安裝angularjs,教程中使用的是angular2.0 版本

git clone https://github.com/angular/angular.git

• 安裝 nginx : 略；

• 文件整合: 將angularjs 文件加放到 laravel 的public目錄下，並重命名爲views。 這個views就是咱們前端的開發目錄。

mv ./angular ./laravel/public/views

其實這個views也能夠直接放在laravel的根目錄，即跟app文件夾同一級，只不過是後面nginx寫的路徑不同而已。

• laravel路由部分：laravel 只作接口路由，頁面跳轉和靜態頁面的請求一概找前端去。 因此這裏路由只有這樣配置就能夠。

Route::get('/',function(){
          //跳轉到前端登陸的界面
          return redirect('pages/login.html');
 } );
  //相應的接口路由
  Route::get('/auth/login', 'Auth\AuthController@postLogin');
  Route::get('/auth/logout', 'Auth\AuthController@getLogout');
  //coding..  其餘路由

• angular 目錄結構：

public
├── index.php
└── views
    ├── assets
    ├── bower_components   // angular引用js腳本目錄
    ├── css
    │   └── style.css       //自定義css目錄
    ├── data
    │   └── time.json       
    ├── index
    │   ├── index.html
    ├── pages
    │   ├── blank.html
    │   ├── grid.html
    │   ├── index.html
    │   ├── login.html
    │   └── typography.html
    └── scripts
        ├── app.js
        ├── controllers
        └── services

• 配置nginx.conf 解決請求走前端仍是走後端問題。

這裏咱們說一下這個問題，就是若是nginx.conf不作區分，那麼先後端的請求所有都會去找後端去了，這樣先後端就沒分離了。

具體實現原理是這樣的：咱們觀察到views目錄下有幾個固定的文件夾， 一個bower_components放的引用文件，assets放的自定義開發的組件，css放的自定義的css文件，data放的固定數據，index放的前端主文件。 pages放的前端未渲染的頁面，script 放的angular控制器等文件。當請求的uri頭是這這幾個目錄名，那就讓請求跑到angular目錄來找。
nginx配置以下（這裏我只貼出server部分的配置了）：

server {
        listen      8080;
        server_name 0.0.0.0;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
           location ~ ^/(bower_components|css|data|scripts|pages){
            root       path/to/angular-laravel/public/views;
               index      index.html;
           }
        location / {
               root   path/to/angular-laravel/public;
            index  index.php index.html index.htm;
               try_files $uri $uri/ /index.php?$query_string;   #for laravel
               if (!-e $request_filename) {
                rewrite .* /index.php last;
               }
        }
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php$ {
            root           path/to/angular-laravel/public;
            fastcgi_pass   localhost:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

這裏就解決了請求是訪問前端目錄仍是走後端路由的問題了。

3. 教程到此結束，但願對各位開發的盆友有所幫助。