vue+flask前后端分离项目(3)

这是总结第三篇,包括linux服务器中nginx安装配置,使用nginx部署服务,以及允许跨域资源访问。

Linux中安装nginx网上很多文章都有写,附录链接中有我推荐的一篇。
简单的可以使用apt-get安装,但因为我没有root权限,所以只能通过源码安装,幸好服务器中大佬已经安装好gcc环境了,我只需要下载好直接编译就行。

nginx安装

1
2
3
4
5
wget http://nginx.org/download/nginx-1.17.0.tar.gz
tar -zxvf nginx-1.17.0.tar.gz
cd nginx-1.17.0/
./configure --prefix=nginx
make && make install

启动nginx

1
2
cd nginx/
./sbin/nginx

若遇到端口占用,可以先杀死进程再启动。

1
2
ps -A | grep nginx
kill -9 pid

在浏览器输入 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
2
3
4
server {
listen 1025;
server_name localhost;
}

dist文件夹是我的前端项目打包后生成的文件,存放于/home/myname之中,作为静态文件的根目录,我希望在浏览器中输入 http://ip:port 可以直接访问到dist中首页,所以还要修改下配置。
nginx.conf中修改结果如下:

1
2
3
4
5
6
7
8
9
 server {
listen 1025;
server_name localhost;

location / {
root root /home/myname/dist;
index index.html index.htm;
}
}

nginx跨域访问配置

接下来在nginx中添加允许跨域访问,设置所有带有api的请求都可以绕过跨域限制。
nginx.conf中修改结果如下:

1
2
3
4
location /api {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}

一般还需要在第一行添加:(没有root权限的用户这一行是不起作用的)

1
user root owner;

保存修改后重启nginx,用浏览器打开 http://ip:1025 ,就能直接访问到前端首页啦~也能顺利和服务端进行数据请求~愉快!

附录
Linux环境nginx配置
如何在没有root权限下安装Nginx