linux部署项目(前后端分离项目)
技术栈
路飞学城部署 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部署项目(前后端分离项目)的更多相关文章
- linux --- 部署前后端分离项目
vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...
- 前后端分离项目部署到Linux虚拟机
最近做了一个springboot+vue的前后端分离项目,把它部署到Linux虚拟机上.下面是我的步骤和遇到的问题,需要的朋友可以看下(看的时候注意要全部看完到底部,因为我习惯是把我遇到的问题放到最后 ...
- centos7部署前后端分离项目的过程
概述 本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程. 前端项目名为:vue_project:后端项目名为:django_project. 将这两个项目放在/opt/wh ...
- 使用 Nginx 部署前后端分离项目,解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
- docker-compose 部署 Vue+SpringBoot 前后端分离项目
一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...
- Docker环境下的前后端分离项目部署与运维
本教程将从零开始部署一个前后端分离的开源项目,利用docker虚拟机的容器技术,采用分布式集群部署,将项目转换成为高性能.高负载.高可用的部署方案.包括了MySQL集群.Redis集群.负载均衡.双机 ...
- nginx+vue+uwsgi+django的前后端分离项目部署
Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...
- 海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_179 随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依 ...
- 超简单!asp.net core前后端分离项目使用gitlab-ci持续集成到IIS
现在好多使用gitlab-ci的持续集成的教程,大部分都是发布到linux系统上的,但是目前还是有很大一部分企业使用的都是windows系统使用IIS在部署.NET应用程序.这里写一下如何使用gitl ...
- 八个开源的 Spring Boot 前后端分离项目,一定要收藏!
八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...
随机推荐
- 学习Keepalived(一)
一.Keepalived 详解 1.Keepalived 定义 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以利用其来避免单点故障.一个LVS服务会有2台服务器运行Ke ...
- C#通过LDAP访问目录服务
C#通过LDAP访问目录服务 本文介绍如何编写C#程序通过LDAP协议访问微软目录服务获得用户在目录中的属性信息.在开始部分先简单句介绍LDAP协议,然后是技术比较及实现部分. 目录 什么是LDAP? ...
- 小程序输入框闪烁BUG解决方案
前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...
- 关于websocket制作聊天室的的一些总结
websocket的总结 在一个聊天室系统中,常常使用websocket作为通信的主要方式.参考地址:https://www.jianshu.com/p/00e... 关于自己的看法:websocke ...
- PAT B1081 检查密码
题目描述: 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母也有数字. 输入格式: ...
- 布局框架frameset
<!DOCTYPE html>//demo.html <html> <head> <meta charset="UTF-8"> &l ...
- Python实现简单用户注册信息管理系统
运行效果: 注意:运行前请在同一目录下创建一个userdata.bin用于保存用户数据 源代码: 1 # coding:utf-8 2 ''' 3 用户注册信息管理系统 4 功能包括: 5 1.查看全 ...
- Docker入门(windows版),利用Docker创建一个Hello World的web项目
Docker 当大家点开这篇博客的时候,相信大家对docker多多少少也有些认识了,最近学习docker这门技术,略微有些心得,写篇文章记录一下学习过程并帮大家跳过一些坑. docker的核心有两个, ...
- Spring的事务控制-基于xml方式
介绍:该程序模拟了转账操作,即Jone减少500元,tom增加500元 1.导入坐标 <dependency> <groupId>junit</groupId> & ...
- 帝国cms发布文章对哪些数据表做了操作
帝国cms 发布一篇文章会影响哪些数据表 insert into phome_enewsfile_1(pubid,filename,filesize,adduser,path,filetime,cla ...