vue+flask前后端分离项目(3)
这是总结第三篇,包括linux服务器中nginx安装配置,使用nginx部署服务,以及允许跨域资源访问。
Linux
中安装nginx
网上很多文章都有写,附录链接中有我推荐的一篇。
简单的可以使用apt-get
安装,但因为我没有root权限,所以只能通过源码安装,幸好服务器中大佬已经安装好gcc环境了,我只需要下载好直接编译就行。
nginx安装
1 | wget http://nginx.org/download/nginx-1.17.0.tar.gz |
启动nginx
1 | cd nginx/ |
若遇到端口占用,可以先杀死进程再启动。
1 | ps -A | grep nginx |
在浏览器输入 http://ip:port 地址,出现Welcome to nginx!
即为安装成功。
nginx配置
接下来是修改端口,因为在服务器中我没有root权限,所以需要在nginx.conf
中修改listen
端口,并且端口号需要是大于1024的任何一个数字。
1 | vi ~/nginx-1.17.0/nginx/conf/nginx.conf |
nginx.conf
中修改结果如下:
1 | server { |
dist
文件夹是我的前端项目打包后生成的文件,存放于/home/myname
之中,作为静态文件的根目录,我希望在浏览器中输入 http://ip:port 可以直接访问到dist中首页,所以还要修改下配置。nginx.conf
中修改结果如下:
1 | server { |
nginx跨域访问配置
接下来在nginx
中添加允许跨域访问,设置所有带有api
的请求都可以绕过跨域限制。nginx.conf
中修改结果如下:
1 | location /api { |
一般还需要在第一行添加:(没有root权限的用户这一行是不起作用的)
1 | user root owner; |
保存修改后重启nginx
,用浏览器打开 http://ip:1025 ,就能直接访问到前端首页啦~也能顺利和服务端进行数据请求~愉快!
vue+flask前后端分离项目(3)
https://guoningyan.com/2019/06/20/vue-flask前后端分离项目(3)/