laravel+vue-cli前后端分离部署到nginx

我用的是阿里云Ubuntu16.04的轻量级服务器，安装了LNMP环境。因为xshell要收费，我用的是免费的国产软件FinalShell，比xshell好用，推荐。

1、laravel和vue的项目建好后，手动上传至服务器的/var/www文件夹下（用git自动更新服务器代码将在下一篇博客讲到）。blog是laravel项目，dist是vue打包好的项目，结构如下：

 2、接着要配置nginx。

vi /etc/nginx/sites-available/default.conf

我的想法是，vue用80端口访问，即“http://ip”就能访问到vue页面；laravel用8080端口访问，即“http://ip/api/...”就能访问到laravel的后端api接口。因此，必须要用到反向代理。所谓反向代理，我的理解就是：本来http://ip已经指到80端口的vue项目了，现在要让它返回上一层，再进入8080端口的laravel项目。这就只需要在分别写好vue和laravel的两个server配置后，再在vue的serve里添加location /api{...}。具体如下：

server {
    listen 80;
    server_name _;
    root /var/www/dist;

    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api{
    	   rewrite ^/api/(.*) /$1 break;
    	   proxy_pass http://localhost:8080;
    }

}

server {
    listen 8080;
    server_name localhost;
    root /var/www/blog/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        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.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

}

3、保存好配置后，重启nginx服务

sudo service nginx restart

这样就可以了：

（前端vue）

（后端laravel。注意，后端接口要放到web.php）