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 ...
随机推荐
- 使用nssm部署windows服务启动应用
swoole和workerman他们都可以实现即时通信的功能,这里我简单的就workman作为windows服务器启动为例说哈吧.直接进入正题: 下载这个聊天室项目 workerman聊天室 http ...
- 数据结构(java版)学习笔记(三)——线性表之单链表
单链表的优点: 长度不固定,可以任意增删. 单链表的缺点: 存储密度小,因为每个数据元素,都需要额外存储一个指向下一元素的指针(双链表则需要两个指针). 要访问特定元素,只能从链表头开始,遍历到该元素 ...
- Java学习笔记之——TreeMap
TreeMap: 特点:存储时,按照键排序 底层使用一个红黑树,特殊的而二叉树 排序跟comparable,comparator有关系 如果需要在添加时进行排序,使用hashMap即可 构造方法: T ...
- vue element-ui 2.3.4版本 input number值为0时 显示不出来
解决:官方修复了这个bug.升级element-ui为2.3.5版本就好了
- python 练习 simple_server 判断路径及返回函数
函数 routers 返回一个 urlpatterns 元组,里面包含了路径名和函数名:在 函数 application 中遍历 urlpatterns 元组,路径存在则返回函数名,不存在则返回 40 ...
- jQuery 父iframe与子iframe 相互调用传值
来自:https://blog.csdn.net/wd4871/article/details/50517597 侵删 父页面中的iframe :如下 <iframe name="su ...
- Python枚举类
Enum可以把一组相关常量定义在一个class中,且class不可变,而且成员可以直接比较. 定义枚举类: from enum import Enum, unique @unique class We ...
- DVWA 黑客攻防演练(四)文件包含 File Inclusion
文件包含(file Inclusion)是一种很常见的攻击方式,主要是通过修改请求中变量从而访问了用户不应该访问的文件.还可以通过这个漏洞加载不属于本网站的文件等.下面一起来看看 DVWA 中的文件包 ...
- Ubuntu下面MySQL的参数文件my.cnf浅析
前几天刚接手一个MySQL数据,操作系统为Ubuntu 16.04.5 LTS, 数据库版本为5.7.23-0ubuntu0.16.04.1(APT方式安装的MySQL).这个操作系统下的MySQL ...
- LeetCode算法题-Base 7(Java实现)
这是悦乐书的第247次更新,第260篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第114题(顺位题号是504).给定一个整数,返回其基数为7的字符串表示.例如: 输入: ...