这几天想把本地写的vue+django前后端分离的项目部署到阿里云服务器上，百度搜索很多文章写的感觉都不是很清楚，最后踩坑多次终于部署完毕，记录一下部署过程。

1、环境准备

本次前端项目使用的vue，后端用的django，准备都用nginx作为代理进行部署，前端和后端项目都部署在一台机器上，前置环境配置不在赘述，参照我的另一篇文章阿里云部署flask项目

2、部署前端项目

把本地的前端项目上传到阿里云服务器，可以使用xshell，如果是mac可以使用scp命令进行拷贝

scp /Users/xxx/Desktop/aaa.zip root@x.x.x.x:/usr/local/soft 其中/Users/xxx/Desktop/aaa.zip文本地前端文件的位置，打包成zip文件，可以先在本地生成dist文件夹，然后打包成zip文件上传 ；/usr/local/soft是远端服务器存放文件的位置，root@x.x.x.x就是登录服务器的用户和服务器IP

上传完毕后解压，例如我解压后前端的文件的地址为：/usr/local/soft/diff_font/dist

编辑nginx的配置文件，添加前端代理配置，除了 server_name 和 root的值需要修改以外，其他的都不用动

server {
        listen       80;
        server_name  x.x.x.x;  # 此处为你的服务器ip地址


        location / {
                root /usr/local/soft/diff_font/dist;  # 此处为前端文件的路径
                try_files $uri $uri/ @router;
                index index.html index.htm;
        }

        location @router {
                rewrite ^.*$ /index.html last;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

   配置完毕后启动nginx，这样前端就部署完毕了

3、部署后端服务

同样把后端服务打包上传到服务器，新建虚拟环境，安装后端项目的依赖，然后进入项目文件夹

新建uwsgi.ini配置文件，内容如下

[uwsgi]

# nginx 

socket=0.0.0.0:8000

pythonpath=/usr/local/soft/django_venv/lib/python3.6/site-packages

# project path

chdir=/usr/local/soft/diff_backend

# wsgi  manage ru kou

module=diffProject.wsgi:application

# common

processes=2

threads=2

master=True

pidfile=uwsgi.pid

daemonize=uwsgi.log

参数解释：

socket表示与nginx通过socket与django服务进行通信，此配置可以照抄，不用修改

pythonpath 是为了解决启动uwsgi后找不到依赖的问题，指明寻找依赖的路径，这里要改成自己虚拟环境里的地址

chdir为项目路径，改成自己项目的路径

module为django应用wsgi入口的路径，改成自己实际项目的路径，

其他配置照抄就行，配置完毕启动uwsgi， 命令 uwsgi  uwsgi.ini  

然后再次编辑nginx配置文件，添加后端服务的代理配置（在前端的nginx配置文件中添加）

server {
        listen       80;
        server_name  114.215.40.248;


        location / {
                root /usr/local/soft/diff_font/dist;
                try_files $uri $uri/ @router;
                index index.html index.htm;
        }

        location @router {
                rewrite ^.*$ /index.html last;
        }


        location /api/ {
                include         uwsgi_params;
                uwsgi_pass      0.0.0.0:8000;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

location /api/ {

                include         uwsgi_params;

                uwsgi_pass      0.0.0.0:8000;

}

只用新增上面一段配置就行

uwsgi_pass的值要与uwsgi.ini中socket的值一样，其他的值照抄就行，/api/表示请求后端接口的前缀域名，需要在django后端的路由表中新增相应的前缀，根据你的喜好可以修改，不一定非要叫api

配置完毕后重启nginx，前端服务请求的后端地址也需要改成 http://x.x.x.x/api/    x.x.x.x为你服务器的地址