项目部署 (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--前后端分离部署的更多相关文章

  1. springboot+apache前后端分离部署https

    目录 1. 引言 2. 了解https.证书.openssl及keytool 2.1 https 2.1.1 什么是https 2.1.2 https解决什么问题 2.2 证书 2.2.1 证书内容 ...

  2. VUE开发(二)nginx配合vue来实现前后端分离部署

    一.引言 由于本地是采用vue+spring boot实现的前后端分离项目,本机启动的时候先启动后场服务,再单独启动vue工程,然后可以实现全流程贯穿,但是我们要部署到服务器上的时候,一般都是打一个j ...

  3. django前后端分离部署

    部署静态文件: 静态文件有两种方式1:通过django路由访问2:通过nginx直接访问 方式1: 需要在根目录的URL文件中增加,作为入口 url(r'^$', TemplateView.as_vi ...

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

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

  5. Django前后端分离项目部署

    vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...

  6. 前后端分离项目采用Prerender的SEO优化流程

    原文: https://blog.ccyws.cn/articles/4 一.概述 近年开发模式变化,新建Web站点采用前后端分离部署已经是大势所趋.但是,搜索引擎爬虫不会执行js脚本从后端加载数据, ...

  7. 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  8. 两个开源的 Spring Boot + Vue 前后端分离项目

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

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

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

  10. 【转】前后端分离的项目如何部署发布到Linux

    前后端分离的项目如何部署发布到Linux 前期准备 1.服务器的基本配置信息2.本机远程连接服务器的工具(xshell.xftp或者mobaXterm等等,看你自己喜欢) 第一步:部署环境 1.安装j ...

随机推荐

  1. 常用的Arrays类和二维数组以及二分法的介绍

    ---恢复内容开始--- 1.Array类 Array中包含了许多数组的常用操作,较为常见的有: (1)快速输出 import java.util.Arrays; public class Test{ ...

  2. MySQL主从复制配置指导及PHP读写分离源码分析

    开发环境 master环境:ubuntu16.04.5LTS/i5/8G/500G/64位/mysql5.7.23/php7/apache2 slave环境:kvm虚拟机/ubuntu14.04.01 ...

  3. Django学习之五:Django 之 注意事项及汇总

    目录 Django 之 注意事项及汇总 全局 settings model模块-模型模块 URLs模块 Templates System 模版模块 View/HttpRequest/HttpRespo ...

  4. 使用String. localeCompare比较字符串

    javascript提供stringA.localeCompare(stringB)方法,来判断一个字符串stringB是否排在stringA的前面. 返回值:    如果引用字符存在于比较字符之前则 ...

  5. eclipse配置freemarker,*.ftl文件

    亲测,提供2种方式,效果都不错: ----------------------------------------- 1.直接下载相应的插件.只需要下载FreeMarker的识别Jar包就可以:888 ...

  6. MyEclipse自动补全

    打开MyEclipse 6.5,然后"window"→"Preferences". 选择"java",展开,"Editor&quo ...

  7. Dynamics 365 Online-Security Updates On TLS 1.2

    不仅仅是Dynamics 365,现在MS许多产品都开始主推使用TLS1.2,所以在日常开发中,需要注意这部分的改动. 如果访问某个服务,出现错误信息类似于“Could not create SSL/ ...

  8. whistle

    whistle介绍 whistle是基于Node的跨平台web调试代理工具, 主要查看, 修改HTTP, HTTPS, Websocket的请求,响应, 也可以作为HTTP代理服务器使用 (文档)[h ...

  9. call、apply的作用和区别是什么?

    call().apply()的区别: 相同点: 1.call()和apply()都可以用来间接调用函数,都可以显式调用所需的this.即,任何函数可以作为任何对象的方法来调用. 2.两个方法都可以指定 ...

  10. python 3.7 安装mysqlclient 错误解决

    安装时出现的问题 >pip3.7 install mysqlclientCollecting mysqlclient  Using cached https://files.pythonhost ...