Vue+Django+Restframework+Nginx前后端分离项目部署

Vue+Django+Restframework+Nginx前后端分离项目部署

        

目录

先介绍技术栈：

1.安装python

2.安装nginx

3.安装uwsgi，直接使用pip安装。

4.上传写好的的代码包。

5.配置uwsgi文件

6.配置Nginx配置文件：

7.浏览器测试

---

        开门见山，前段时间实地部署了一个web项目，鉴于目前各种博客教程琳琅满目但不完整，本贴将记录一个完整的web前后端分离项目的部署流程，保姆级！！！！！！！！！

先介绍技术栈：

        前端：vue、bootstrap

        后端：python、django-restframework

        本地代理服务器：nginx、uwsgi （uwsgi加载动态资源 Nginx加载静态资源）

        云服务器：阿里云腾讯云这些都行（centos 7）

1.安装python

        我使用python3.6，版本自己选择就好，为了简洁，把python安装专门抽离出来， 请参考：python安装教程

2.安装nginx

        nginx的部署包括反向代理和负载均衡，由于只有一台服务器，请求量也不大，故我只使用了反向代理。安装教程见下面链接：

Nginx安装教程

3.安装uwsgi，直接使用pip安装。

pip3 install uwsgi

        建立软连接：

ln -s /usr/local/python3/bin/uwsgi /usr/bin/uwsgi

        为了保证端口全部开放，可关闭防火墙（慎重）或者指定端口：

systemctl stop firewalld.service     //关闭防火墙
systemctl status firewalld.service     //查看状态

        安装好uwsgi后，要先测试一下能不能用，测试通过后再将配置项写入配置文件，测试脚本test.py如下所示：

def application(env, start_response):
     start_response(‘200 OK’, [(‘Content-Type’,‘text/html’)])
     return [b"This is struggle uWSGI test "]

        测试命令如下，（ip默认为127.0.0.1（访问公网ip即可），端口随便指定，但要在服务器控制台查看指定端口是否已经开启！！！这里需要注意的是，如果使用阿里云，不止要在 *** 作系统开放指定端口，还要在用户控制台开放指定端口，这里就不演示了，就进入控制台后找到云服务器设置，然后点点点.....就好了）：

uwsgi --http :9090 --wsgi-file test.py

        执行测试脚本，在本地浏览器访问服务器的公网ip（不是内网）+端口号，例如：222.25.31.8:9090    如果浏览器正常显示“This is struggle uWSGI test ”，就说明测试成功，uwsgi和服务器都是好的。

4.上传写好的的代码包。

        整个Django项目，包括前端文件，前端文件建议放在templete目录下。

        上传可以使用rz命令，如果提示没有的话使用 yum install lrzsz 安装一下就行。

        上传后开始安装代码所需要的依赖包，安装完成后先本地执行一下，看看报不报错。然后使用下面命令测试，里边的路径和端口一定要改成自己的：

uwsgi --chdir /root/login  --http :8080 --module login.wsgi:application
如果使用的是虚拟环境添加 --home参数

查看打印的日志，没有报错的话就说明没问题。停掉将配置写入配置文件。

5.配置uwsgi文件

        新建一个uwsgi.ini文件，写下面的配置，具体每个表示什么意思就不解释了，可以自行百度。把对应的配置项改成自己的就行。

[uwsgi]
socket = 127.0.0.1:8080
chdir = /root/login
module = login.wsgi:application
master = True
processes = 4
vacuum = true 
daemonize = /root/login/uwsgi_log.log 
pidfile = /root/login/uwsgi_pid.pid

        启动uwsgi配置文件：

uwsgi --ini uwsgi.ini

         附上相关命令：

uwsgi --reload uwsgi/uwsgi.pid    //重启uwsgi
uwsgi --stop uwsgi/uwsgi.pid       //停止uwsgi

6.配置Nginx配置文件：

vim /usr/local/nginx/conf/conf.nginx

server {
        listen       80;
        server_name  www.xuptaiedu.xyz;       //改成自己的域名或者公网ip

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /root/login/templates;           //改成自己的静态资源路径
            index  index.html index.htm;
        }

        由于部署的是前后端分离的项目，故还需要添加一个前端向后端发请求的端口，在默认的server下新添加一个server：

 server{
        listen 8001;              //前端向后端请求的端口，如果有多个，在下面添加多个server
	    server_name www.xuptaiedu.xyz;     //自己的域名或公网ip

        location / {
        include uwsgi_params;

        uwsgi_pass 127.0.0.1:8080;      //这个端口一定要是uwsgi配置文件中写的端口
}

        配置好后，启动nginx，（如果按照我的nginx安装教程配置了软连接，不进入nginx目录也行）:

cd /usr/local/nginx/sbin
./nginx

        或者进入上述文件夹，使用重启命令：

nginx -s reload

7.浏览器测试

        最后一步，在浏览器输入公网ip，如果正常打开首页，则配置正常。