vue+uwsgi+nginx部署项目

首先先下载好前后端项目

先从前端vue搞起

要在服务器上，编译打包vue项目，必须得有node环境

下载node二进制包，此包已经包含node，不需要再编译
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
解压缩
tar -zxvf node-v8.6.0-linux-x64.tar.gz
进入node文件夹
[root@web02 opt]# cd node-v8.6.0-linux-x64/
[root@web02 node-v8.6.0-linux-x64]# ls
bin  CHANGELOG.md  etc  include  lib  LICENSE  README.md  share
[root@web02 node-v8.6.0-linux-x64]# ls bin
node  npm  npx
[root@web02 node-v8.6.0-linux-x64]# ./bin/node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# ./bin/npm -v
5.3.

将node命令，添加至linux环境变量,修改/etc/profile，写入

PATH=$PATH:/opt/node-v8.6.0-linux-x64/bin

读取文件，生效PATH

source /etc/profile

测试path

[root@web02 node-v8.6.0-linux-x64]# node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# npm -v
5.3.

node环境有了，安装node模块，以及打包node项目

进入vue源码目录
cd -luffy_project_01/
安装vue模块，默认去装package.json的模块内容，如果出现模块安装失败，手动再装
npm install 

此时注意，你本地写的vue代码，接口很可能连接的服务器地址有问题，注意Axios.POST提交的地址，一定得发送给django应用（如果用了nginx，就发送给nginx的入口端口）
超哥这里为了试验方便，将vue项目和django项目放在了一台服务器，通过nginx反向代理功能(8000端口)，转发vue请求给django()

准备编译打包vue项目，替换配置文件所有地址，改为服务器地址
sed -i 's/127.0.0.1/192.168.119.12/g' /opt/-luffy_project_01/src/restful/api.js
此时打包vue项目，生成一个dist静态文件夹
npm run build

检查dist文件夹
[root@web02 -luffy_project_01]# ls dist/
index.html static

至此vue代码就结束了，只需要让nginx配置，找到vue的index.html首页文件即可

nginx这里不做解释，编译安装好即可

server {
　　　　 #用户访问域名或者ip，默认是nginx的80端口

        listen       ;
        server_name  192.168.119.12;
　　　　 #url匹配  /   也就是请求地址是192.168.119.12时，进入此location，返回vue的dist下index.html你的项目首页
        location / {
        root /opt/-luffy_project_01/dist;
        index index.html;
        }
    }

三、配置后端代码，解决虚拟环境，保证项目干净隔离

激活虚拟环境venv1，在虚拟环境下，安装项目所需的依赖模块

pip3  install  -r   requirements.txt  

配置数据库前面博客有 如果是sqllite,就不需要配置数据库

　　　　安装及配置 　　mysql+centos7+主从复制 

redis数据库的配置, 

　　　　redis

通过uwsgi启动路飞项目

.创建一个uwsgi.ini配置文件，写入参数信息
                touch uwsgi.ini 

                    [uwsgi]
                    # Django-related settings
                    # the base directory (full path)
                    #指定项目的绝对路径的第一层路径！！！！！！！！！！！！！！！！！！！！！！！！
                    chdir           = /opt/s15vuedrf/luffy_boy/

                    # Django's wsgi file
                    #  指定项目的 wsgi.py文件！！！！！！！！！！！！
                    #  写入相对路径即可，这个参数是以  chdir参数为相对路径
                    module          = luffy_boy.wsgi

                    # the virtualenv (full path)
                    # 写入虚拟环境解释器的 绝对路径！！！！！！
                home            = /root/Envs/s15vuedrf
                    # process-related settings
                    # master
                    master          = true
                    # maximum number of worker processes
                    #指定uwsgi启动的进程个数
                    processes       = 1

                    #这个参数及其重要！！！！！！
                    #这个参数及其重要！！！！！！
                    #这个参数及其重要！！！！！！
                    #这个参数及其重要！！！！！！
                    # the socket (use the full path to be safe
                    #socket指的是，uwsgi启动一个socket连接，当你使用nginx+uwsgi的时候，使用socket参数
                    socket          = 0.0.0.0:8000

                    #这个参数是uwsgi启动一个http连接，当你不用nginx只用uwsgi的时候，使用这个参数
                    #这个参数是uwsgi启动一个http连接，当你不用nginx只用uwsgi的时候，使用这个参数
                    #这个参数是uwsgi启动一个http连接，当你不用nginx只用uwsgi的时候，使用这个参数
                    #这个参数是uwsgi启动一个http连接，当你不用nginx只用uwsgi的时候，使用这个参数
                    #这个参数是uwsgi启动一个http连接，当你不用nginx只用uwsgi的时候，使用这个参数
                    #http  =  0.0.0.0:8000

                    # ... with appropriate permissions - may be needed
                    # chmod-socket    =
                    # clear environment on exit
                    vacuum          = true

配置好文件, 启动项目

uwsgi --ini  uwsgi.ini 

四、配置nginx，此步重要

1.先编译安装nginx

　　　　nginx入门与实战  安装与编译

2.nginx.conf配置如下

#第一个server虚拟主机是为了找到vue的dist文件， 找到项目的index.html
server {
        listen       ;
        server_name  192.168.13.79;

        #当请求来自于 192.168.13.79/的时候，直接进入以下location，然后找到vue的dist/index.html
        location / {
            root   /opt/s15vuedrf/-luffy_project_01/dist;
            index  index.html;
        }

    }

#由于vue发送的接口数据地址是 192.168.13.79:  我们还得再准备一个入口server
server {
    listen ;
    server_name  192.168.13.79;

    #当接收到接口数据时，请求url是 192.168.13.79: 就进入如下location
    location /  {
        #这里是nginx将请求转发给  uwsgi启动的 9000端口
        uwsgi_pass  192.168.13.79:;
        # include  就是一个“引入的作用”，就是将外部一个文件的参数，导入到当前的nginx.conf中生效
        include /opt/nginx112/conf/uwsgi_params;
    }
}

3. 启动nginx

./sbin/nginx  直接启动 

此时到页面查看

原理图