本次的配置只使用一个域名的情况下来部署前后端分离的项目,后端采用的技术是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/