nginx部署laravel和vue

本次的配置只使用一个域名的情况下来部署前后端分离的项目,后端采用的技术是laravel,前端采用的技术是vue。前提说明,下文涉及到的代码放置位置,应该根据你实际情况决定。首先,将laravel的代码上传至 /data/web/project/api,然后将vue进行打包,将打包的dist文件上传至/data/web/project/app-fe,最后修改nginx配置文件。

上传laravel代码

  • 修改.env文件中的配置项(数据库配置,redis配置…),确保与服务器的一致。
  • 如果你有上传的操作,请确保该文件有写入的权限。

打包vue并上传

  • 打包 npm run build,打包完成之后,在本项目会有一个dist的文件。
  • 将dist上传至服务器相应的位置

nginx配置

server {
  listen   80;                                             # 监听的端口
  server_name  xxx.com;                                    # 域名
  root     /data/web/project/app-fe/dist;                                 # dist文件位置
  index    index.html index.php;        

  location / {                                             # 匹配
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.(xlsx|csv) {                                # 下载路径
    root    /data/web/video-sms-api/api/public;
  }

  location ~ \.php$ {                                      # 匹配php进行处理
    root       /data/web/project/api/public;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index  index.php;
    include        fastcgi_params;
    #include        conf.d/fiery_fastcgi_params;
    fastcgi_split_path_info            ^(.+\.php)(/.+)$;
    #fastcgi_param  SCRIPT_FILENAME    $document_root$script;
    #fastcgi_param  SCRIPT_NAME        $script;
    #fastcgi_param  PATH_INFO          $path_info;
    fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
    fastcgi_read_timeout 1200;
  }
}

你可能感兴趣的:(nginx)