Linux--前后端分离部署

时间：2022-08-28 12:10:45

项目部署 (vue + nginx + uwsgi + django + mysql + redis)

一 . 前端部署

　　1. 下载vue代码,解压缩

wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
# zip格式的用unzip解压
unzip 07-luffy_project_01.zip

　　2. 配置node环境,去打包编译vue代码

# 下载node的代码包
    wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
# 解压缩node代码包
    tar -zxvf node-v8.6.0-linux-x64.tar.gz
# 配置node环境,找到bin的路径添加到PATH里,然后source /etc/profile

　　3. 验证node是否正确配置(node就如同python的解释器, npm就是如同pip管理工具软件包

node  -v
npm -v

　　4.修改vue的代码文件

Linux--前后端分离部署 
因为vue需要向后台发起请求,找到uwsgi
# 我们的架构是将uwsgi隐藏在nginx后面
!!!所有 vue(端口80)首先找的是nginx(反向代理,端口是9000),然后nginx(反向代理,端口是9000)反向代理给uwsgi(后端地址,9001)
# 修改方式
找到/opt/s18luffy/07-luffy_project_01/src/restful 的 api.js 文件
#这里更改你自己的服务器ip地址
sed -i  "s/127.0.0.1:8000/192.168.226.132:9000/g"  api.js
    sed 是linux处理字符串的命令
    -i 是将结果替换到文件
    "s/127.0.0.1:8000/192.168.226.128:9000/g"   #解释  s是替换模式  /你想替换的内容/你想替换的结果/   g是全局替换 
    api.js  你想修改操作的文件
Linux--前后端分离部署

　　5.进行打包vue,生成静态文件夹 dist

# 要确保在vue文件夹下, 我直接在/luffy_project_01下安装的,然后cd到这里就可以,ls命令可以看到build就对了.
npm install  #解决vue代码所需的模块依赖  
npm run build    #进行编译打包

　　6.当vue打包正确完成后，ls指令就可以看到生成一个dist静态文件夹，此时就给丢给nginx去处理啦！！！

二 . 后端uwsgi部署

　　1.下载路飞代码

wget  https://files.cnblogs.com/files/pyyu/luffy_boy.zip

　　2.安装新的虚拟环境，解决环境依赖问题 ，可以用requirements.txt解决依赖问题

Linux--前后端分离部署 
mkvirtualenv  s18luffy
workon  s18luffy  # 进入到虚拟环境
vim 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
Linux--前后端分离部署

　　3.安装这个文件 requirements.txt(这些东西一定要在虚拟环境下安装)

pip3 install -i https://pypi.douban.com/simple -r requirements.txt

　　4.使用uwsgi去启动路飞学城后端

Linux--前后端分离部署 
# 这个uwsgi.ini文件一定要写到项目下,使用uwsgi.ini配置文件方式启动，内容如下:

[uwsgi]
# Django-related settings
# the base directory (full path)
#填写项目的绝对路径（第一层路径）
chdir           = /opt/s18luffy/luffy_boy
# Django's wsgi file
#填写crm第二层目录下的wsgi.py文件的路径
module          = luffy_boy.wsgi
# the virtualenv (full path)
#填写虚拟环境的绝对路径
home            = /root/Envs/s18luffy

# process-related settings
# master
master          = true
# maximum number of worker processes
#基于uwsgi的多进程，根据cpu来优化 
processes       = 4
# the socket (use the full path to be safe

#如果你用了nginx反向代理，就填写socket参数
#如果你用了nginx反向代理，就填写socket参数
#如果你用了nginx反向代理，就填写socket参数
socket          = 0.0.0.0:9001  

#如果你没用nginx，想直接通过浏览器测试后端，使用http 
#http = 0.0.0.0:9001

# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true
Linux--前后端分离部署

　　5.用supervisor也去管理路飞的后台

[program:s18luffy]
command=/root/Envs/s18luffy/bin/uwsgi  --ini  /opt/s18luffy/luffy_boy/uwsgi.ini
stopasgroup=true
killasgroup=true

三 . nginx反向代理转发

　　修改nginx.conf内容如下

Linux--前后端分离部署 
# 虚拟主机1
 server {
        #第一个虚拟主机，监听的80端口
        listen       80;
        server_name  192.168.226.128;
        location / {
                        try_files $uri $uri/ /index.html;    # 保证vue刷新不404
            root /opt/s18luffy/07-luffy_project_01/dist;
            index index.html;
        }
}

# 虚拟主机2

server {
    listen 9000;
    server_name  192.168.226.128;
    location  / {
        uwsgi_pass 0.0.0.0:9001;
        include uwsgi_params;
    }
}

重启nginx生效
Linux--前后端分离部署

四 . 启动redis，用的是sqllite，不需要mysql

Linux--前后端分离部署 
yum install redis -y  #安装命令
systemctl start redis  

# redis登录命令
redis-cli  
登录后输入 ping 返回一个pong代表正确启动
Linux--前后端分离部署
标签：

相关文章