vue+flask前后端分离项目（3）

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

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

nginx安装

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

cd nginx/
./sbin/nginx

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

ps -A | grep nginx
kill -9 pid

在浏览器输入 http://ip:port 地址，出现Welcome to nginx!即为安装成功。

nginx配置

接下来是修改端口，因为在服务器中我没有root权限，所以需要在nginx.conf中修改listen端口，并且端口号需要是大于1024的任何一个数字。

vi ~/nginx-1.17.0/nginx/conf/nginx.conf

nginx.conf中修改结果如下：

server {
    listen       1025;
    server_name  localhost;
}

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

 server {
     listen       1025;
     server_name  localhost;

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

nginx跨域访问配置

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

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

一般还需要在第一行添加：（没有root权限的用户这一行是不起作用的）

user root owner;

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

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