【Liunx】前后端项目分离部署

一、部署前端代码

部署前端代码,就是一些静态文件,丢给nginx去解析
前端node js + vue的部署 + nginx的部署

1、下载vue的代码

wget https://files.cnblogs.com/files/songzhixue/07-luffy_project_01.zip

2、编译vue的代码

编译vue的代码,生成dist静态文件夹,需要用到node js解释器环境

# 下载nodejs的源代码包
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

3、解压缩node的源码包

tar -zxvf node-v8.6.0-linux-x64.tar.gz

4、配置环境变量

进入源码包目录,直接配置环境变量即可,人家已经编译好了

找到node可执行程序

# 进入目录/opt/s20luff/node-v8.6.0-linux-x64/bin
# 将上面的路径加到/etc/profile中的PATH环境变量里
# 配置完需要执行下
source /etc/profile
node -v
npm -v

5、修改vue的请求发送路径

修改vue的请求发送路径,vue向服务器发起请求,修改127.0.0.1为linux的ip地址

# 进入前端页面(07-luffy_project_01 )找到src文件下的restful,修改ip
sed -i "s/127.0.0.1:8000/192.168.61.129:9000/g"  api.js 

修改api.js中的请求ip

6、开始编译vue的代码

# 由于网速问题,下载包可能超级慢
# 修改npm的下载源,如同pip 更改豆瓣源一样
# 进入/node-v8.6.0-linux-x64/bin/   将npm的路径添加到环境变量
# 修改安装源·
npm config set registry https://registry.npm.taobao.org

# 找到/opt/s20luff/07-luffy_project_01执行:
npm install  #找到package.json然后安装模块,如同pip install

npm run build   #这一步会生成dist静态文件夹,路飞首页在这index.html
# (如果修改了vue向向服务器发起请求的ip地址,那么我们修改后需要重新编译vue的代码,也就是重新执行第六步的操作)

在这里执行:

7、配置nginx.conf

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        # 只需要找到第一个虚拟主机,配置dist的静态文件夹即可
        # 第一个虚拟主机的配置
        location / {
            # 网站首页的静态文件路径
            root   /opt/s20luff/07-luffy_project_01/dist;
            index  index.html index.htm;
            # 确保刷新不出现404
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # 第二个虚拟主机的配置,用作反向代理
    server {
        listen 9000;
        server_name localhost;
        location / {
        include uwsgi_params;
        # django运行的ip端口
        uwsgi_pass 127.0.0.1:9999;
        }

        }
}


1

2

3

1、客户端访问默认是80端口,先走nginx

2、nginx配置文件中我们给80端口配置了,返回网站首页的静态文件

3、路飞学成除了首页以外的所有请求都是用的9000端口,这时候我们用到了反向代理

二、后端uwsgi+django的部署

1.激活虚拟环境

mkvirtualenv  s20luffy

workon  s20luffy

2.解决运行路飞所需的依赖环境

方式二选一

方式1:
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

方式2:手动解决依赖关系
    pip3 install -i https://pypi.douban.com/simple django==2.0
    pip3 install -i https://pypi.douban.com/simple django-rest-framework
    pip3 install -i https://pypi.douban.com/simple requests
    pip3 install -i https://pypi.douban.com/simple django-redis
    pip3 install -i https://pypi.douban.com/simple crypto==1.4.1
    pip3 install -i https://pypi.douban.com/simple pycrypto==2.6.1

3、下载uwsgi

下载uwsgi,编写uwsgi.ini配置文件,去运行路飞学城后端

 pip3 install -i https://pypi.douban.com/simple  uwsgi
【在任意位置创建uwsgi.ini文件】
【注意我们用uwsgi启动项目的时候也要在该目录下】
下载项目包wget https://files.cnblogs.com/files/songzhixue/luffy_boy.zip
uwsgi.ini内容如下

[uwsgi]
# Django-related settings
# the base directory (full path)
# 项目目录的绝对路径【第一层】
chdir           = /opt/s20luffy/luffy_boy/
# Django‘s wsgi file
# 项目目录的第二层目录【wsgi同级】
module          = luffy_boy.wsgi
# the virtualenv (full path)
# 虚拟环境路径【虚拟环境中执行cdvirtualenv,pwd查看路径】
home            = /root/Envs/s20luffy
# process-related settings
# master
master          = true
# maximum number of worker processes
# 开启的进程数
processes       = 4
# the socket (use the full path to be safe
socket          = 0.0.0.0:9999
# clear environment on exit
vacuum          = true

4.启动uwsgi后端

# 找到uwsgi.ini这个文件的目录下执行下面命令
uwsgi --ini uwsgi.ini
# 重启nginx
# 访问页面

5.还得启动redis,才能添加购物车

# 最省事的安装
yum install redis -y
systemctl start redis

6、将商品添加到购物车,查看redis中的数据

# 登录账户密码
alex
alex3714

原文地址:https://www.cnblogs.com/youxiu123/p/11624326.html

时间: 2024-10-04 07:56:26

【Liunx】前后端项目分离部署的相关文章

22.前后端项目部署实战

1.前后端分离项目介绍 1.什么是前后端项目? 简单来说,就是将前端项目和后端项目进行独立部署,互相之间通过token进行数据交互. 2.前后端分离与动静分离有什么区别? 动静分离,是将动态页面编译成静态,然后缓存到CDN上面. 前后端分离,前端项目被编译成HTML,但是JS会通过Ajax获取数据,所以前端页面内容依然是动态的. 3.前后端项目采用renren-fast来实现 4.前后端项目环境 服务 台数 地址 功能 MySQL 3台 10.0.0.51,10.0.0.52,10.0.0.53

vue发布中的前后端分离和前后端不分离

前后端分离 思路:前端和后台完全分离.前端提供静态的css和js,在运行时将css和js给后端,后端进行数据的请求(ajax) 前后端分离就是前端和后台在不同的服务器上.基本是前端一个nginx加css和js 后端nginx加index.html 当用户访问的时候,访问后端nginx的网址,执行后端的index.html,在运行到资源时,访问前端的nginx返回的css,js等 前后端不分离 思路:前端和后台不分离.前端是源代码build后的代码 后端进行数据的请求(ajax) 前后端不分离就是

前后端分离与前后端不分离

前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口. 请求的数据交互如下图: 前后端分离 在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果.至于

前后端分离与前后端不分离的区别

前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口. 请求的数据交互如下图: 前后端分离 在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果.至于

【转载】java前后端 动静分离,JavaWeb项目为什么我们要放弃jsp?

原文:http://blog.csdn.net/piantoutongyang/article/details/50878214 今天看到两篇文章,讲解 为什么web开发启用jsp,确实挺有道理,整理如下: 使用jsp的痛点: 1.jsp上动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种静态资源的http请求,动态代码的等等,除非你使用nginx. 万一你的java代码出现了bug,你的页面是显示不出来的,直接蹦到了5xx页面,用户体验极差. (现在javaWeb项目业界的标

.NET Core WebApi 前后端开发分离后的配置和部署

转自博客:https://www.cnblogs.com/Vam8023/p/10670741.html 背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离. B/S Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能) 前端:node.js + vue 后端:.NET Core WebApi 前端安装 node.js 跟创建vue项目这些不是这篇文章的重点,重点在于项目完成后的部署. .NET Core We

前后端不分离

今天找文件的时候突然发现了一枚总结文档,觉得有必要留存,以防下次找不着就一不小心发了这篇,哈哈哈 一直做后台管理系统,采用react前后端分离,以接口的形式相互交流,猝不及防得来了三个页面开发,然后: 项目概况:二月开始接手A项目,该项目由前端写静态页面,php开发嵌套数据的形式展现,为期一个月,给前端时间为两周,然后交付到数据嵌套的人员:三月中旬开始接手B项目,该项目有两个端,支付宝端C端以及后台管理平台,这两个项目统统由前端写静态页面,java来嵌套数据. 项目详情: 1.A项目:由于一直没

前后端的分离

对于大部分应用,已经不需要从后端读取HTML页面或者模板,前端完全可以根据数据自行渲染页面/模板,这样,前后台交互就可以简化为数据的增删改查.利用AJAX技术,实现页面局部刷新,促使了前后台分离的可能性. 那么,如何利用前后端分离开发模式,开始一个项目呢? 1. 产品文档 产品经理会先设计好整个产品的业务模块和流程,并给出产品文档,包括UI交互,流程图,模块划分等等.这个时候,产品,前端,后端,测试需要一起评审文档,可能需要多次评审才能确定设计方案. 2. 前端提供接口定义 第二个阶段是前后台同

什么是前后端分离与前后端不分离

我起初认为前后端分离是,在软件开发过程中前后端分工就叫做前后端分离,其实是前端所有用到的数据都是后端通过异步接口的方式提供的,前端只管页面的展示及效果. 前端和后端不分离的时候,前端的页面也是由后端控制渲染的,两者的耦合度非常高.在业务逻辑复杂的系统里,我们最怕维护前后端混杂在一起的代码,因为没有约束,M-V-C每一层都可能出现别的层的代码,日积月累,完全没有维护性可言.这个时候出现了前后端分离这种模式,虽然前后端分离没办法完全解决这种问题,但是可以大大缓解. 那该怎么做到前后端分离呢? 前端: