项目部署 (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的代码文件

因为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 你想修改操作的文件

  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解决依赖问题

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

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

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

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

# 这个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

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

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

三 . nginx反向代理转发

  修改nginx.conf内容如下

# 虚拟主机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生效

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

yum install redis -y  #安装命令
systemctl start redis # redis登录命令
redis-cli
登录后输入 ping 返回一个pong代表正确启动

Linux--前后端分离部署的更多相关文章

  1. springboot+apache前后端分离部署https

    目录 1. 引言 2. 了解https.证书.openssl及keytool 2.1 https 2.1.1 什么是https 2.1.2 https解决什么问题 2.2 证书 2.2.1 证书内容 ...

  2. VUE开发(二)nginx配合vue来实现前后端分离部署

    一.引言 由于本地是采用vue+spring boot实现的前后端分离项目,本机启动的时候先启动后场服务,再单独启动vue工程,然后可以实现全流程贯穿,但是我们要部署到服务器上的时候,一般都是打一个j ...

  3. django前后端分离部署

    部署静态文件: 静态文件有两种方式1:通过django路由访问2:通过nginx直接访问 方式1: 需要在根目录的URL文件中增加,作为入口 url(r'^$', TemplateView.as_vi ...

  4. 使用 Nginx 部署前后端分离项目,解决跨域问题

    前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...

  5. Django前后端分离项目部署

    vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...

  6. 前后端分离项目采用Prerender的SEO优化流程

    原文: https://blog.ccyws.cn/articles/4 一.概述 近年开发模式变化,新建Web站点采用前后端分离部署已经是大势所趋.但是,搜索引擎爬虫不会执行js脚本从后端加载数据, ...

  7. 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  8. 两个开源的 Spring Boot + Vue 前后端分离项目

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  9. linux --- 部署前后端分离项目

    vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...

  10. 【转】前后端分离的项目如何部署发布到Linux

    前后端分离的项目如何部署发布到Linux 前期准备 1.服务器的基本配置信息2.本机远程连接服务器的工具(xshell.xftp或者mobaXterm等等,看你自己喜欢) 第一步:部署环境 1.安装j ...

随机推荐

  1. TiDB

    由于目前的项目把mysql换成了TiDb,所以特意来了解下tidb.其实也不能说换,由于tidb和mysql几乎完全兼容,所以我们的程序没有任何改动就完成了数据库从mysql到TiDb的转换,TiDB ...

  2. mybatis基础(上)

    框架图 SqlSessionFactoryBuilder 通过SqlSessionFactoryBuilder创建会话工厂SqlSessionFactory 将SqlSessionFactoryBui ...

  3. HTML5移动端拖动惯性

    下面代码只是实现了上下滑动惯性,没有写水平滑动惯性.(临时代码笔记,可能会在以后的过程中不断更新优化代码) /** * 惯性原理: * 产生的速度 = 移动距离 / 移动时间 * 距离 = 松开的坐标 ...

  4. 使用 CODING 进行 Hexo 项目的持续集成

    本文作者:CODING 用户 - 廖石荣 关于持续集成的概念 持续集成指的是,频繁地(一天多次)将代码集成到主干. 持续集成的过程 如图所示: CI 过程:代码编写 -> 源代码库(GitHub ...

  5. java基础知识总结一:

      四种内部类 直接抛出异常 单例模式: 懒汉式单例.饿汉式单例.登记式单例     []关于内部类:  []关于异常: 直接捕捉并抛出异常:不需要给异常添加名字: if(i>10)throw ...

  6. (办公)plug-in org.eclipse.jdt.ui was unable to load class org.eclipse.jdt.internal

    今天上午开发环境遇到这个问题,解决方案如下,(解决了之后,项目并没有丢失.) 因为Eclipse的这个plug-in org.eclipse.jdt.ui was unable to load cla ...

  7. ASP.NET没有魔法——ASP.NET MVC IoC代码篇

    上一篇文章主要以文字的形式介绍了IoC及其在ASP.NET MVC中的使用,本章将从以下几点介绍如何使用代码在ASP.NET MVC中实现依赖注入: ● AutoFac及安装 ● 容器的创建 ● 创建 ...

  8. MySQL慢查询日志释疑总结

      之前写了一篇"MySQL慢查询日志总结",总结了一些MySQL慢查询日志常用的相关知识,这里总结一下在工作当中遇到关于MySQL慢查询日志的相关细节问题,有些是释疑或自己有疑惑 ...

  9. C#基础第五天

    public struct Person { public string _name; public Gender _sex; public int _age; } public enum Gende ...

  10. wxPython树控件

    1.树控件 树(tree)是一种通过层次结构展示信息的控件,如下图所示是树控件示例,左窗口中是树控件,在wxPython中树控件类是wx.TreeCtrl. wx.TreeCtrl中一个常用的方法有: ...