参考博客

技术栈

路飞学城部署 vue + nginx + uwsgi + django + mysql + redis(就是一个key - value型数据库,缓存型数据库,内存型数据库)

部署步骤如下(4步)

1.前端vue部署

1.下载vue代码,解压缩
wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip 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的PATH环境变量即可
修改PATH生效即可
vim /etc/profile
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) 修改方式如下
api.js路径如下/opt/s18luffy/07-luffy_project_01/src/restful
#这里更改你自己的服务器ip地址
sed -i "s/127.0.0.1:8000/192.168.226.128: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的代码文件夹
npm install #解决vue代码所需的模块依赖 npm run build #进行编译打包 6.当vue打包正确完成后,生成一个dist静态文件夹,此时就给丢给nginx去做反向代理处理!!!

2.后端uwsgi部署

    1.下载路飞代码
wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
2.安装新的虚拟环境,解决环境依赖问题 ,可以用requirements.txt解决依赖问题
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]
# 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参数
#如果你用了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

3.nginx反向代理转发

修改nginx.conf内容如下

虚拟主机1
server {
#第一个虚拟主机,监听的80端口
listen 80;
server_name 192.168.226.128;
location / {
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生效

4.启动redis,路飞学城用的是sqllite,不需要mysql

yum install redis -y  #安装命令
systemctl start redis redis登录命令
redis-cli 登录命令
登录后输入 ping 返回一个pong代表正确启动
5.windows访问路飞学城首页,查看课程列表 ,进行alex账户登录
账户: alex
密码: alex3714 登录后,添加django课程信息后,可以查看购物车信息,代表正确启动路飞学城

最后访问

1.路飞学城部署

2.先把vue静态文件和nginx部署起来,可以看到路飞首页
vue部署
1.下载vue代码
2.配置node环境
3.修改vue代码向后台发送数据接口的地址
4.代码确认无误后,进行编译安装
npm instlal
npm run build
5.以上4步,目的是为了,得到最后一步的 那个 dist文件夹
里面有我需要的index.html static静态文件夹 6.将这个dist丢给 nginx去返回页面即可 3.把后端uwsgi+django+mysql运行起来
备注,先别用supervisor了 使用 uwsgi --ini uwsgi.ini方式去启动 将uwsgi --ini uwsgi.ini 这个命令进程,运行在后台的方式
1. 第一种方式 、
uwsgi --ini uwsgi.ini &
2.第二种方式
在uwsgi.ini中写入 daemonize = uwsgi.log 就是将后台运行的日志写入到uwsgi.log 3.确保nginx,vue,uwsgi,redis都正常后,路飞即可访问

部署总结

linux部署项目(前后端分离项目)的更多相关文章

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

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

  2. 前后端分离项目部署到Linux虚拟机

    最近做了一个springboot+vue的前后端分离项目,把它部署到Linux虚拟机上.下面是我的步骤和遇到的问题,需要的朋友可以看下(看的时候注意要全部看完到底部,因为我习惯是把我遇到的问题放到最后 ...

  3. centos7部署前后端分离项目的过程

    概述 本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程. 前端项目名为:vue_project:后端项目名为:django_project. 将这两个项目放在/opt/wh ...

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

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

  5. docker-compose 部署 Vue+SpringBoot 前后端分离项目

    一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...

  6. Docker环境下的前后端分离项目部署与运维

    本教程将从零开始部署一个前后端分离的开源项目,利用docker虚拟机的容器技术,采用分布式集群部署,将项目转换成为高性能.高负载.高可用的部署方案.包括了MySQL集群.Redis集群.负载均衡.双机 ...

  7. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  8. 海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_179 随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依 ...

  9. 超简单!asp.net core前后端分离项目使用gitlab-ci持续集成到IIS

    现在好多使用gitlab-ci的持续集成的教程,大部分都是发布到linux系统上的,但是目前还是有很大一部分企业使用的都是windows系统使用IIS在部署.NET应用程序.这里写一下如何使用gitl ...

  10. 八个开源的 Spring Boot 前后端分离项目,一定要收藏!

    八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...

随机推荐

  1. java程序如何确保多线程的运行安全?

    线程的安全问题体现在: 原子性:一个或多个操作在CPU执行过程中不被中断的特性 可见性:一个线程对共享变量的修改,另一个线程能立刻看到 有序性:程序执行的顺序按照代码的先后顺序执行 导致线程存在安全问 ...

  2. 为什么 redis 需要把所有数据放到内存中?

    答Redis 为了达到最快的读写速度将数据都读到内存中,并通过异步的方式将数 据写入磁盘.所以 redis 具有快速和数据持久化的特征.如果不将数据放在内存中, 磁盘 I/O 速度为严重影响 redi ...

  3. 怎么创建maven项目

    1.Eclipse中用Maven创建项目 2.点击[next] 3.选maven-archetype-webapp后,next 4.填写相应的信息,Packaged是默认创建一个包,不写也可以 4右击 ...

  4. 模拟web服务器http请求应答

    我们在浏览器打开网页,其实是向远端服务器提出页面发送请求,远端服务器在接到请求后,就开始执行请求页面的程序文件,然后将执行结果通过html格式,发送到你的浏览器,再显示出来.以下用百度(www.bai ...

  5. C#复杂XML反序列化为实体对象两种方式

    前言 今天主要讲的是如何把通过接口获取到的Xml数据转换成(反序列化)我们想要的实体对象,当然Xml反序列化和Json反序列化的方式基本上都是大同小异.都是我们事先定义好对应的对应的Xml实体模型,不 ...

  6. MapReduce在集群执行任务时报错:Initialization of all the collectors failed. Error in last collector was:java.lang.ClassCastException

    报错信息详细: Error: java.io.IOException: Initialization of all the collectors failed. Error in last colle ...

  7. CSS简单样式练习(二)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  8. Uncaught TypeError: document.getElementsById is not a function

    今天博主终于开始攻关javascript(俗称js)了,不过要注意了,它和java可是一丁点关系都没有,就像老婆饼和老婆一样. 下面就让我们来讨论一下博主这次犯下的低级错误吧 一.背景(解决方法在文末 ...

  9. 实际业务处理 Kafka 消息丢失、重复消费和顺序消费的问题

    关于 Kafka 消息丢失.重复消费和顺序消费的问题 消息丢失,消息重复消费,消息顺序消费等问题是我们使用 MQ 时不得不考虑的一个问题,下面我结合实际的业务来和你分享一下解决方案. 消息丢失问题 比 ...

  10. 使用nmtui命令解决network-scripts目录下无网卡对应配置文件问题

    //网卡通过命令ifconfig可以识别到,但是在配置文件目录下,没有该文件,一旦重启等配置了该地址的应用则可能会出现问题所以需要重新生成对应配置文件,我首先想到的就是用 nmtui 这个程序来重新生 ...