vue+uwsgi+nginx部署luffty项目

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在部署项目之前本人已经将前端代码和后端代码发布在了一个网站上，大家可自行下载，当然如果有Xftp工具也可以直接从本地导入。

django代码
https://files.cnblogs.com/files/pyyu/luffy_boy.zip

vue代码
https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

在linux上直接下载
wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

在window上下载，通过lrzsz，或者xftp传输到linux服务器上

解压缩：

unzip luffy_boy.zip 
unzip 07-luffy_project_01.zip

二、先从前端vue搞起

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

1、下载node二进制包，此包已经包含node，不需要再编译

wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

2、解压缩

tar -zxvf node-v8.6.0-linux-x64.tar.gz

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

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

4、读取文件，生效PATH

source /etc/profile

5、测试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.0

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

#进入vue源码目录
cd 07-luffy_project_01/
#安装vue模块，默认去装package.json的模块内容，如果出现模块安装失败，手动再装
npm install 
#此时注意，你本地写的vue代码，接口很可能连接的服务器地址有问题，注意Axios.POST提交的地址，一定得发送给django应用（如果用了nginx，就发送给nginx的入口端口）
#这里为了试验方便，将vue项目和django项目放在了一台服务器，通过nginx反向代理功能(8000端口)，转发vue请求给django(9000)
#准备编译打包vue项目，替换配置文件所有地址，改为服务器地址
sed -i 's/127.0.0.1/192.168.119.12/g' /opt/07-luffy_project_01/src/restful/api.js
#此时打包vue项目，生成一个dist静态文件夹
npm run build
#检查dist文件夹
[root@web02 07-luffy_project_01]# ls dist/
index.html static

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

编辑nginx.conf文件

server {
　　　　 #用户访问域名或者ip，默认是nginx的80端口
        listen       80;
        server_name  192.168.119.12;
　　　　 #url匹配  /   也就是请求地址是192.168.119.12时，进入此location，返回vue的dist下index.html路飞学城首页
        location / {
        root /opt/07-luffy_project_01/dist;
        index index.html;
        }
    }

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

（一）激活虚拟环境

workon s15vuedrf

（二）通过一条命令，导出本地的所有软件包依赖

pip3 freeze >  requirements.txt

（三）将这个requirements.txt 传至到服务器，在服务器的新虚拟环境中，安装这个文件，就能安装所有的软件包了

pip3 install -r  requirements.txt

这个文件内容如下：项目所需的软件包都在这里了

[root@web02 opt]# cat requirements.txt
    certifi==2018.11.29
    chardet==3.0.4
    crypto==1.4.1
    Django==2.1.4
    django-redis==4.10.0
    django-rest-framework==0.1.0
    djangorestframework==3.9.0
    idna==2.8
    Naked==0.1.31
    pycrypto==2.6.1
    pytz==2018.7
    PyYAML==3.13
    redis==3.0.1
    requests==2.21.0
    shellescape==3.4.1
    urllib3==1.24.1
    uWSGI==2.0.17.1

这个路飞代码数据库用的是sqllite，不需要配置数据库了

购物车用都的是redis，因此要启动服务器的redis-server服务端

redis-server /etc/redis.conf
ps -ef|grep redis
redis-server *:6379

（四）通过uwsgi启动路飞项目

准备uwsgi 支持高并发的启动python项目(注意uwsgi不支持静态文件的解析，必须用nginx去处理静态文件)

1.安装uwsgi

pip3 install -i https://pypi.douban.com/simple uwsgi

2、学习uwsgi的使用方法

#通过uwsgi启动一个python web文件
uwsgi --http :8000 --wsgi-file   s15testuwsgi.py
        --http 指定http协议 
        --wsgi-file  指定一个python文件
#通过uwsgi启动django项目，并且支持热加载项目，不重启项目，自动生效 新的 后端代码
uwsgi --http  :8000 --module s15drf.wsgi    --py-autoreload=1
        --module 指定找到django项目的wsgi.py文件

3、使用uwsgi的配置文件，启动项目

创建一个uwsgi.ini配置文件

touch uwsgi.ini

写入参数信息

[uwsgi]
# Django-related settings
# the base directory (full path)
#指定项目的绝对路径的第一层路径！！！！！！！！！！！！！！！！！！！！！！！！
chdir           = /opt/s15vuedrf/luffy_projec/
# Django's wsgi file
#  指定项目的 wsgi.py文件！！！！！！！！！！！！
#  写入相对路径即可，这个参数是以  chdir参数为相对路径
module          = luffy_projec.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    = 664
# clear environment on exit
vacuum          = true

（五）supervisor进程管理工具

1、将linux进程运行在后台的方法有哪些

　　第一个，命令后面加上 & 符号

python manage.py runserver &

　　第二个 使用nohup命令

　　第三个使用进程管理工具

2、安装supervisor，使用python2的包管理工具 easy_install ，注意，此时要退出虚拟环境！！！！

yum install python-setuptools
easy_install supervisor

3、

supervisord -c  /etc/supervisor.conf

通过命令，生成一个配置文件，这个文件就是写入你要管理的进程任务

echo_supervisord_conf > /etc/supervisor.conf

4、编辑这个配置文件，写入操作  django项目的 命令

vim /etc/supervisor.conf  
#直接到最底行，写入以下配置
[program:s15luffy]
command=/root/Envs/s15vuedrf/bin/uwsgi  --ini  /opt/s15vuedrf/luffy_projec/uwsgi.ini

5、启动supervisord服务端，指定配置文件启动

supervisord -c  /etc/supervisor.conf

6、通过supervisorctl管理任务

supervisorctl -c /etc/supervisor.conf

7、supervisor管理django进程的命令如下

#supervisorctl直接输入命令会进入交互式的操作界面
>  stop s15luffy 
>  start s15luffy 
>  status s15luffy

8、启动luffy的后端代码

四、配置nginx，此步重要

nginx.conf配置如下

#第一个server虚拟主机是为了找到vue的dist文件， 找到路飞的index.html
server {
        listen       80;
        server_name  192.168.13.79;
        #当请求来自于 192.168.13.79/的时候，直接进入以下location，然后找到vue的dist/index.html 
        location / {
            root   /opt/s15vuedrf/07-luffy_project_01/dist;
            index  index.html;
        }
    }
#由于vue发送的接口数据地址是 192.168.13.79:8000  我们还得再准备一个入口server
server {
    listen 8000;
    server_name  192.168.13.79;
    #当接收到接口数据时，请求url是 192.168.13.79:8000 就进入如下location
    location /  {
        #这里是nginx将请求转发给  uwsgi启动的 9000端口
        uwsgi_pass  192.168.13.79:9000;
        # include  就是一个“引入的作用”，就是将外部一个文件的参数，导入到当前的nginx.conf中生效
        include /opt/nginx112/conf/uwsgi_params;
    }
}

启动nginx

./sbin/nginx  #直接启动

以上是 vue+uwsgi+nginx部署luffty项目 的全部内容， 来源链接： utcz.com/z/378264.html

回到顶部