首先先下载好前后端项目

先从前端vue搞起

要在服务器上,编译打包vue项目,必须得有node环境

下载node二进制包,此包已经包含node,不需要再编译
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
解压缩
tar -zxvf node-v8.6.0-linux-x64.tar.gz
进入node文件夹
[root@web02 opt]# cd node-v8.6.0-linux-x64/
[root@web02 node-v8.6.0-linux-x64]# ls
bin CHANGELOG.md etc include lib LICENSE README.md share
[root@web02 node-v8.6.0-linux-x64]# ls bin
node npm npx
[root@web02 node-v8.6.0-linux-x64]# ./bin/node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# ./bin/npm -v
5.3.

将node命令,添加至linux环境变量,修改/etc/profile,写入

PATH=$PATH:/opt/node-v8.6.0-linux-x64/bin

读取文件,生效PATH

source /etc/profile

测试path

[root@web02 node-v8.6.0-linux-x64]# node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# npm -v
5.3.

node环境有了,安装node模块,以及打包node项目

进入vue源码目录
cd -luffy_project_01/
安装vue模块,默认去装package.json的模块内容,如果出现模块安装失败,手动再装
npm install 此时注意,你本地写的vue代码,接口很可能连接的服务器地址有问题,注意Axios.POST提交的地址,一定得发送给django应用(如果用了nginx,就发送给nginx的入口端口)
超哥这里为了试验方便,将vue项目和django项目放在了一台服务器,通过nginx反向代理功能(8000端口),转发vue请求给django() 准备编译打包vue项目,替换配置文件所有地址,改为服务器地址
sed -i 's/127.0.0.1/192.168.119.12/g' /opt/-luffy_project_01/src/restful/api.js
此时打包vue项目,生成一个dist静态文件夹
npm run build 检查dist文件夹
[root@web02 -luffy_project_01]# ls dist/
index.html static

至此vue代码就结束了,只需要让nginx配置,找到vue的index.html首页文件即可

nginx这里不做解释,编译安装好即可

server {
     #用户访问域名或者ip,默认是nginx的80端口 listen ;
server_name 192.168.119.12;
     #url匹配 / 也就是请求地址是192.168.119.12时,进入此location,返回vue的dist下index.html你的项目首页
location / {
root /opt/-luffy_project_01/dist;
index index.html;
}
}

三、配置后端代码,解决虚拟环境,保证项目干净隔离

激活虚拟环境venv1,在虚拟环境下,安装项目所需的依赖模块

pip3  install  -r   requirements.txt  

配置数据库前面博客有 如果是sqllite,就不需要配置数据库

    安装及配置   mysql+centos7+主从复制 

redis数据库的配置, 

    redis

通过uwsgi启动路飞项目

.创建一个uwsgi.ini配置文件,写入参数信息
touch uwsgi.ini
[uwsgi]
# Django-related settings
# the base directory (full path)
#指定项目的绝对路径的第一层路径!!!!!!!!!!!!!!!!!!!!!!!!
chdir = /opt/s15vuedrf/luffy_boy/ # Django's wsgi file
# 指定项目的 wsgi.py文件!!!!!!!!!!!!
# 写入相对路径即可,这个参数是以 chdir参数为相对路径
module = luffy_boy.wsgi # the virtualenv (full path)
# 写入虚拟环境解释器的 绝对路径!!!!!!
home = /root/Envs/s15vuedrf
# process-related settings
# master
master = true
# maximum number of worker processes
#指定uwsgi启动的进程个数
processes
= 1 #这个参数及其重要!!!!!!
#这个参数及其重要!!!!!!
#这个参数及其重要!!!!!!
#这个参数及其重要!!!!!!
# the socket (use the full path to be safe
#socket指的是,uwsgi启动一个socket连接,当你使用nginx+uwsgi的时候,使用socket参数
socket = 0.0.0.0:8000 #这个参数是uwsgi启动一个http连接,当你不用nginx只用uwsgi的时候,使用这个参数
#这个参数是uwsgi启动一个http连接,当你不用nginx只用uwsgi的时候,使用这个参数
#这个参数是uwsgi启动一个http连接,当你不用nginx只用uwsgi的时候,使用这个参数
#这个参数是uwsgi启动一个http连接,当你不用nginx只用uwsgi的时候,使用这个参数
#这个参数是uwsgi启动一个http连接,当你不用nginx只用uwsgi的时候,使用这个参数
#http = 0.0.0.0:8000
# ... with appropriate permissions - may be needed
# chmod-socket =
# clear environment on exit
vacuum = true

配置好文件, 启动项目

uwsgi --ini  uwsgi.ini 

四、配置nginx,此步重要

1.先编译安装nginx

    nginx入门与实战  安装与编译

2.nginx.conf配置如下

#第一个server虚拟主机是为了找到vue的dist文件, 找到项目的index.html
server {
listen ;
server_name 192.168.13.79; #当请求来自于 192.168.13.79/的时候,直接进入以下location,然后找到vue的dist/index.html
location / {
root /opt/s15vuedrf/-luffy_project_01/dist;
index index.html;
} } #由于vue发送的接口数据地址是 192.168.13.79: 我们还得再准备一个入口server
server {
listen ;
server_name 192.168.13.79; #当接收到接口数据时,请求url是 192.168.13.79: 就进入如下location
location / {
#这里是nginx将请求转发给 uwsgi启动的 9000端口
uwsgi_pass 192.168.13.79:;
# include 就是一个“引入的作用”,就是将外部一个文件的参数,导入到当前的nginx.conf中生效
include /opt/nginx112/conf/uwsgi_params;
}
}

3. 启动nginx

./sbin/nginx  直接启动 

此时到页面查看

原理图

vue+uwsgi+nginx部署项目的更多相关文章

  1. vue+uwsgi+nginx部署路飞学城

    vue+uwsgi+nginx部署路飞学城   有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码 ht ...

  2. linux vue uwsgi nginx 部署路飞学城 安装 vue

    vue+uwsgi+nginx部署路飞学城 有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码#这个代码 ...

  3. vue+uwsgi+nginx部署luffty项目

    在部署项目之前本人已经将前端代码和后端代码发布在了一个网站上,大家可自行下载,当然如果有Xftp工具也可以直接从本地导入. django代码 https://files.cnblogs.com/fil ...

  4. 14,vue+uwsgi+nginx部署路飞学城

    有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码 https://files.cnblogs.com/ ...

  5. 使用uwsgi+nginx部署项目

    Uwsgi:部署web应用程序 Nginx:反向代理,静态服务器 1.修改uwsgi配置文件>nginx反向代理[nginx接收请求->传递->[uwsgi] http=.. --& ...

  6. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  7. Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx)

    Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx) 一丶集群和Nginx反向代理 ...

  8. 使用uWSGI+nginx部署Django项目

    最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...

  9. virtualvenv+django+uWSGI+nginx 部署

    原创博文 转载请注明出处! 1. virtualvenv 2. django 3. uWSGI 4. nginx 5. 踩坑记录 1. virtualvenv virtualvenv install ...

随机推荐

  1. vue之全局守卫

    Vue的路由守卫是什么东西呢? 第一次接触很懵逼,知道自己遇到了这样一个需求, 在页面之间进行路由跳转时,需要进行一个判断,如果下一个页面是需要登录后才能进入的页面,那么就需要在点击进入该页面的时候进 ...

  2. nginx在使用proxy_pass的情况下开启error_page

    error_page用于指定特定错误发生时要显示的url,但是如果请求经proxy_pass处理后,如何使error_page对upstream产生的错误进行处理呢? 方法很简单. 保持之前的erro ...

  3. linux下导入、导出mysql 数据库命令

    一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1.导出数据和表结构:mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql#/usr/lo ...

  4. 兼容iOs7的自定义alertView

    转载请注明出处. 升级到ios7后,旧项目中使用的继承UIAlertView的自定义alertview无法正常显示了,无奈只好换思路去实现,改成从当前keywindow下创建要显示的alertview ...

  5. MySQL中大数字加减,不产生千位符和科学计数

    mysql数字加减科学计数法 这两天因为需求,需要获取一张表的流水号.规则是这样的.当前日期+8位流水号.比如:2015062400000001,2015062400000002,2015062400 ...

  6. memsql 基本安装试用

    备注:使用docker 进行安装 1. 基本准备 a. 环境检查(必须,不然会有服务启动异常的问题) docker run --rm memsql/quickstart check-system b. ...

  7. mui 拨打电话

    function callPhone() { let btnArray = ['拨打', '取消']; let Phone = "10086"; mui.confirm('是否拨打 ...

  8. [LeetCode系列]爬梯问题的递归解法转换为迭代解法

    有一个n阶的梯子, 你每次只能爬1阶或2阶, 请问共有多少种登顶的爬法?(正好爬完n阶, 不能多也不能少) 本题最优解是直接套用菲波那切数列即可(因为菲波那切数列的第n个元素正好等于第n-1个元素和第 ...

  9. java的时间

    先看例子: import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calendar; imp ...

  10. 【转】redis GEO地理位置

    redis目前已经到了3.2版本,3.2版本里面新增的一个功能就是对GEO(地理位置)的支持. 地理位置大概提供了6个命令,分别为: GEOADD GEODIST GEOHASH GEOPOS GEO ...