Linux--前后端分离部署
项目部署 (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--前后端分离部署的更多相关文章
- springboot+apache前后端分离部署https
目录 1. 引言 2. 了解https.证书.openssl及keytool 2.1 https 2.1.1 什么是https 2.1.2 https解决什么问题 2.2 证书 2.2.1 证书内容 ...
- VUE开发(二)nginx配合vue来实现前后端分离部署
一.引言 由于本地是采用vue+spring boot实现的前后端分离项目,本机启动的时候先启动后场服务,再单独启动vue工程,然后可以实现全流程贯穿,但是我们要部署到服务器上的时候,一般都是打一个j ...
- django前后端分离部署
部署静态文件: 静态文件有两种方式1:通过django路由访问2:通过nginx直接访问 方式1: 需要在根目录的URL文件中增加,作为入口 url(r'^$', TemplateView.as_vi ...
- 使用 Nginx 部署前后端分离项目,解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
- Django前后端分离项目部署
vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...
- 前后端分离项目采用Prerender的SEO优化流程
原文: https://blog.ccyws.cn/articles/4 一.概述 近年开发模式变化,新建Web站点采用前后端分离部署已经是大势所趋.但是,搜索引擎爬虫不会执行js脚本从后端加载数据, ...
- 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 两个开源的 Spring Boot + Vue 前后端分离项目
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- linux --- 部署前后端分离项目
vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...
- 【转】前后端分离的项目如何部署发布到Linux
前后端分离的项目如何部署发布到Linux 前期准备 1.服务器的基本配置信息2.本机远程连接服务器的工具(xshell.xftp或者mobaXterm等等,看你自己喜欢) 第一步:部署环境 1.安装j ...
随机推荐
- Oracle day05 索引_数据去重
索引 自动:当在表上定义一个primary key或者unique 约束条件时,oracle数据库自动创建一个对应的唯一索引. 手动:用户可以创建索引以加速查询 在一列或者多列上创建索引: creat ...
- Java开发笔记(七十九)利用反射技术操作私有属性
早在介绍多态的时候,曾经提到公鸡实例的性别属性可能被篡改为雌性,不过面向对象的三大特性包含了封装.继承和多态,只要把性别属性设置为private私有级别,也不提供setSex这样的性别修改方法,那么性 ...
- Android开发——打造简单的Viewpager指示器(小圆点指示器)
准备工作: 1.两张不同颜色的小圆点图片,可以去阿里巴巴矢量图网站搜索 我把我使用的图片贴出来 2.一个简单的Viewpager的实现 下面是简单的Viewpager实现步骤: 1.布局文件使用Vie ...
- 小tips:node起一个简单服务,打开本地项目或文件浏览
1.安装nodejs 2.在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 var http = require('http'); var fs = require( ...
- Dynamics 365中的常用Associate和Disassociate消息汇总
摘要: 微软动态CRM专家罗勇 ,回复301或者20190123可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 因为编程时候 ...
- 从.Net到Java学习第五篇——Spring Boot &&Profile &&Swagger2
从.Net到Java学习系列目录 刚学java不久,我有个疑问,为何用到的各种java开源jar包许多都是阿里巴巴的开源项目,为何几乎很少见百度和腾讯?不是说好的BAT吗? Spring Boot 的 ...
- iOS-----------进阶书籍收藏
1.编写高质量iOS与OS X代码的52个有效方法 (Effective Objective-C 2.0) 这本书介绍了一些OC的语法技巧,runtime,内存管理等方面的知识.书已买,准备入手. 2 ...
- gitbook 入门教程之实用插件(新增3个插件)
插件没有什么逻辑顺序,大家可以按照目录大纲直接定位到感兴趣的插件部分阅读即可. 更多插件正在陆续更新中,敬请期待... 最新更新插件 tbfed-pagefooter 版权页脚插件 gitalk 评论 ...
- Docker入门笔记
Docker入门笔记 随笔记录初学Docker遇到的问题, 以免下次再犯. 本机系统Ubuntu18.04 安装 Docker有2个版本 Community Edition (CE) 社区版(免费) ...
- Linux & Windows 环境下 RabbitMQ 安装与基本配置
索引: 目录索引 参看代码 GitHub: rabbitmq.txt 一.Linux (DeepinOS) 环境 .安装: sudo apt install rabbitmq-server .进入目录 ...