参考博客

技术栈

路飞学城部署 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. 学习k8s(二)

    kubernetes-国内拉取gcr.io\quay.io镜像方法 方法1: https://hub.docker.com/r/ibmcom/ 例如: gcr.io/google_containers ...

  2. 关于 DispatcherServlet.properties 文件

    1.文件位置 2.文件内容 3.文件作用 前端控制器会从 DispatcherServlet.properties 文件中加载 HandlerMapping(处理器映射器).HandlerAdapte ...

  3. ubuntu中有关环境变量的问题

    ubuntu查看环境变量方法 在Ubuntu中,我们可以使用三个命令来查看当前环境变量的设置,以确定我们有没有把路径加载到环境变量中去.我们 可以使用env,export,或者echo  $path, ...

  4. html 5 读取本地文件API

    代码: <input type="file" name="uploadfile" class="J-upload"> <s ...

  5. Bootstrap 之 Metronic 模板的学习之路 - (1)总览

    写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板.Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者 ...

  6. 探讨:微信小程序应该如何设计

    微信小程序公测后,开发者非常热情,都有很高的期待,都想抓住这一波红利.但是热情背后需要冷静,我们需要搞清楚两个问题: 微信想要我们做什么?微信小程序可以做什么? 微信想要我们做什么? 首先来弄清楚微信 ...

  7. 前端面试题整理——webpack相关考点

    webpack是开发工具,面试考点重点在配置和使用,原理理解不需要太深. 一.基本配置 1.拆分配置和merge 将公共配置跟dev和prod的配置拆分,然后通过webpack-merge对配置进行整 ...

  8. java中finally有什么意义呢,在现实中?举例

    马克-to-win: finally有什么意义呢,在现实中?比如你开了一个流处理文件,可能没开成功,或开成功了,但后面的操作失败了,但不管你怎么样,你必须在一个地儿把它关闭,那就是finally块儿. ...

  9. 【Android开发】Coding + git命令行基本使用

    上传代码 进入本地仓库的目录. cd ... 查看仓库链接 : git remote -v 如果没有,则添加url链接 : git remote add testName https://git.co ...

  10. Dockerfile入门

    1.Dockerfile介绍 在之前Docker的使用中,我们直接从仓库下载需要的镜像到本地,然后稍加配置就可以应用了,通常从仓库下载下来的镜像都是通用的,无任何私有化的东西,我们拿过来就需要加很多的 ...