django项目、vue项目部署云服务器的详细过程


Posted in Servers onJuly 23, 2022

上线架构图

django项目、vue项目部署云服务器的详细过程

服务器购买与远程连接

服务器可以在阿里云控制台首页 (aliyun.com)、登录 - 腾讯云 (tencent.com)购买。

这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜像这里选择CentOS 7.9

django项目、vue项目部署云服务器的详细过程

购买完成后,会拿到一个公网ip

django项目、vue项目部署云服务器的详细过程

选择远程连接工具,有很多种,Xshell、FinalShell等。

这里选择FinalShell,下载:FinalShell (hostbuf.com)

打开,连接。

django项目、vue项目部署云服务器的详细过程

django项目、vue项目部署云服务器的详细过程

django项目、vue项目部署云服务器的详细过程

连接的密码如果不知道或忘记了

django项目、vue项目部署云服务器的详细过程

安装git

安装git可以方便我们从直接从远程仓库拉取项目,当然,也可以不安装。

安装git

yum install git  -y

创建文件夹放项目

mkdir /home/projectcd /home/project

克隆

git clone https://gitee.com/....

安装mysql

包含了很多开发的工具

yum -y groupinstall "Development tools"

各种依赖

yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel

1.前往用户根目录

cd ~

2.下载mysql57

wget http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

3.安装mysql57

yum -y install mysql57-community-release-el7-10.noarch.rpm
yum install mysql-community-server --nogpgcheck

4.启动mysql57并查看启动状态

systemctl start mysqld.service
systemctl status mysqld.service

5.查看默认密码并登录

grep "password" /var/log/mysqld.log

django项目、vue项目部署云服务器的详细过程

mysql -uroot -p

6.修改密码(密码强度有要求,需要大小写字母、数字、符号)

ALTER USER 'root'@'localhost' IDENTIFIED BY 'Qq332525..';

安装redis(源码安装)

1.前往用户根目录

cd ~

2.下载redis-5.0.5(源码包)

wget http://download.redis.io/releases/redis-5.0.5.tar.gz

3.解压安装包

tar -xf redis-5.0.5.tar.gz

4.进入目标文件

cd redis-5.0.5

5.编译环境

make

6.复制环境到指定路径完成安装

cp -r /root/redis-5.0.5 /usr/local/redis

7.配置redis可以后台启动:修改下方内容

vim /usr/local/redis/redis.conf

添加:

daemonize yes

8.建立软连接(环境变量)

ln -s /usr/local/redis/src/redis-server /usr/bin/redis-server
ln -s /usr/local/redis/src/redis-cli /usr/bin/redis-cli

9.后台运行redis

cd /usr/local/redisredis-server ./redis.conf &

10.测试redis环境

redis-cli
# 退出exit

11.如果想要关闭redis服务

# 方式一
客户端连进去,敲  shutdown
# 方式二
pkill -f redis -9

安装python3.8(源码安装)

阿里云的centos默认装了python3.6和2.7,如果没有硬性要求,可以直接跳过安装python3.8。

各种依赖

yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel zlib* libffi-devel  -y

1.前往用户根目录

cd ~

2.下载Python3.8.6

wget https://registry.npmmirror.com/-/binary/python/3.8.6/Python-3.8.6.tgz

3.解压安装包

tar -xf Python-3.8.6.tgz

4.进入目标文件

cd Python-3.8.6

5.把python3.8.6 编译安装到/usr/local/python38路径下

./configure --prefix=/usr/local/python38

6.编译并安装,如果报错,说明缺开头的哪些依赖

make &&  make install

7.建立软连接(环境变量)

ln -s /usr/local/python38/bin/python3 /usr/bin/python3.8
ln -s /usr/local/python38/bin/pip3 /usr/bin/pip3.8

目前云服务器各版本python环境

python      pip      2.7版本的命令
python3     pip3     3.6版本的命令
python3.8   pip3.8   3.8版本的命令

安装uwsgi

uwsgi是符合wsgi协议的web服务器,使用c写的性能高,上线要使用uwsgi。

安装uwsgi,注意用你后面要用的python版本安装

pip3.8 install uwsgi

建立软连接

ln -s /usr/local/python38/bin/uwsgi /usr/bin/uwsgi

安装虚拟环境

1.安装虚拟环境

pip3.8 install virtualenv

更新pip

python3.8 -m pip install --upgrade pip
python3.8 -m pip install --upgrade setuptools
pip3.8 install pbr
pip3.8 install virtualenvwrapper

2.建立虚拟环境软连接(环境变量)

ln -s /usr/local/python38/bin/virtualenv /usr/bin/virtualenv

3.配置虚拟环境:

vim ~/.bash_profile

填入下方内容,注意python版本用的是哪个

VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3.8
source /usr/local/python38/bin/virtualenvwrapper.sh

4.更新配置文件内容

source ~/.bash_profile

5.创建虚拟环境

mkvirtualenv -p python3.8 xx

退出

deactivate

安装nginx(源码安装)

1.前往用户根目录

cd ~

2.下载nginx1.13.7

wget http://nginx.org/download/nginx-1.13.7.tar.gz

3.解压安装包

tar -xf nginx-1.13.7.tar.gz

4.进入目标文件

cd nginx-1.13.7

5.配置安装路径:/usr/local/nginx

./configure --prefix=/usr/local/nginx

6.编译并安装

make && make install

7.建立软连接

ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

8.删除安装包与文件

cd ~
rm -rf nginx-1.13.7
rm -rf nginx-1.13.7.tar.xz

9.测试Nginx环境,服务器运行nginx,本地访问服务器ip

# 启动 
nginx
# 停止
nginx -s stop

这个命令查看nginx是否在运行着

netstat -nlp | grep 80

然后访问

服务器公网ip:80

如果无法访问,说明云服务器安全组中没有添加80端口

django项目、vue项目部署云服务器的详细过程

vue项目部署

1.修改前端向后端发ajax请求的地址,以前都是向127.0.0.1发送请求,现在可以改成服务器地址了

2.编译vue项目成html,css,js

npm run build

3.项目根路径下会生成dist文件夹(编译过后的文件),本地压缩成zip(不要压成rar)

4.在服务器安装软件

yum install lrzsz

5.云服务器敲 rz,选择dist.zip上传

6.安装解压软件,解压文件

yum install unzip
unzip dist.zip

7.移动解压后的dist.zip,并重命名

mv ~/dist /home/html

8.去到Nginx配置目录

cd /usr/local/nginx/conf

9.备份Nginx配置文件

mv nginx.conf nginx.conf.bak

10.打开配置文件,添加内容

vim nginx.conf

内容

events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    server {
        listen 80;
        server_name  127.0.0.1; # 可以改为自己的域名
        charset utf-8;
        location / {
            root /home/html; # html访问路径
            index index.html; # html文件名称
            try_files $uri $uri/ /index.html; # 解决单页面应用刷新404问题
        }
    }
}

11.重新加载配置文件(重启nginx)

nginx -s reload

12.访问服务器ip地址(不写端口默认访问80端口)

xx.xx.xx.xx

django项目部署

项目依赖安装

1.修改django的某些关于ip地址的配置(数据库等ip地址不用改,因为就是本地的ip地址,当在服务器上运行时,连接的就是服务器的数据库)

2.django项目生成所需依赖

pip freeze > requirements.txt

3.把django项目上传到服务器上,通过rz命令,或者git命令

# 这里我把项目放到这个目录下
/home/project/

4.创建线上项目虚拟环境

mkvirtualenv project

5.虚拟环境下也要装uwsgi

pip install uwsgi

6.cd到项目根路径下

/home/project/

7.安装依赖

pip install -r ./requirements.txt

8.如果出现报错,比如安装mysqlclient模块容易报错,那么我可以打开requirements.txt,将mysqlclient模块那一行注释掉(#)

9.最后单独安装mysqlclient

rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022
yum install mysql-devel
yum install python-devel
pip install mysqlclient

数据库配置

1.进入数据库

2.创建项目需要的数据库

create database project default charset=utf8;

3.设置权限账号密码:账号密码要与项目中配置的一致

grant all privileges on project.* to 'username'@'%' identified by 'password';
grant all privileges on project.* to 'username'@'localhost' identified by 'password';
flush privileges;

4.退出数据库

quit;

5.回到虚拟环境,到项目目录中

数据库迁移命令

python manage_pro.py makemigrations
python manage_pro.py migrate

6.录入数据

使用uwsgi启动django

1.项目目录下,新建uwsgi的配置文件

vim ./project.xml

添加

<uwsgi>    
   <socket>127.0.0.1:8000</socket> <!-- 内部端口,自定义 --> 
   <chdir>/home/project/</chdir> <!-- 项目路径 -->            
   <module>project.wsgi</module>  <!-- project为wsgi.py所在目录名--> 
   <processes>4</processes> <!-- 进程数 -->     
   <daemonize>uwsgi.log</daemonize> <!-- 日志文件 -->
</uwsgi>

2.启动uwsgi

uwsgi -x ./luffyapi.xml

3.查看uwsgi进程

ps aux |grep uwsgi

4.配置nginx,把8080端口的动态请求转发给uwsgi里配置的8000端口

vim /usr/local/nginx/conf/nginx.conf

内容:

events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    server {
        listen 80;
        server_name  127.0.0.1; # 可以改为自己的域名
        charset utf-8;
        location / {
            root /home/html; # html访问路径
            index index.html; # html文件名称
            try_files $uri $uri/ /index.html; # 解决单页面应用刷新404问题
        }
    }
    # 新增的server
    server {
        listen 8080;
        server_name  127.0.0.1; # 可以改为自己的域名
        charset utf-8;
        location / {
           include uwsgi_params;
           uwsgi_pass 127.0.0.1:8000;  # 端口要和uwsgi里配置的一样
           uwsgi_param UWSGI_SCRIPT project.wsgi;  #wsgi.py所在的目录名+.wsgi
           uwsgi_param UWSGI_CHDIR /home/project/; # 项目路径
        }
    }
}

5.重启nginx

nginx -s reload

6.这时候前端向服务器id:8080就等于向后端项目发送了请求。

后端样式处理

这时候访问后端的admin接口是没有样式的,还需要下列设置

1.编辑线上项目的配置文件

vim /home/project/../settings/pro.py

2.修改static配置,新增STATIC_ROOT、STATICFILES_DIRS

STATIC_URL = '/static/'
STATIC_ROOT = '/home/project/static'  
STATICFILES_DIRS = (os.path.join(BASE_DIR, "../static"),)

3.项目目录下没有 static 文件夹需要新建

mkdir /home/project/static

4.完成静态文件迁移

python /home/project/manage_pro.py collectstatic

5.修改nginx配置

vim /usr/local/nginx/conf/nginx.conf

内容

events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    server {
        listen 80;
        server_name  127.0.0.1; # 可以改为自己的域名
        charset utf-8;
        location / {
            root /home/html; # html访问路径
            index index.html; # html文件名称
            try_files $uri $uri/ /index.html; 
        }
    }
    server {
        listen 8080;
        server_name  127.0.0.1; # 可以改为自己的域名
        charset utf-8;
        location / {
           include uwsgi_params;
           uwsgi_pass 127.0.0.1:8000;  # 端口要和uwsgi里配置的一样
           uwsgi_param UWSGI_SCRIPT project.wsgi; 
           uwsgi_param UWSGI_CHDIR /home/project/; 
        }
    }
    location /static {
        alias /home/project/static;
    }
}

6.重启nginx

nginx -s reload

到此这篇关于django项目、vue项目部署云服务器的文章就介绍到这了,更多相关django vue项目部署云服务器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Servers 相关文章推荐
为什么 Nginx 比 Apache 更牛逼
Mar 31 Servers
nginx如何将http访问的网站改成https访问
Mar 31 Servers
如何利用map实现Nginx允许多个域名跨域
Mar 31 Servers
Nginx安装完成没有生成sbin目录的解决方法
Mar 31 Servers
扩展多台相同的Web服务器
Apr 01 Servers
利用Nginx代理如何解决前端跨域问题详析
Apr 02 Servers
CentOS7安装GlusterFS集群以及相关配置
Apr 12 Servers
nginx搭建NFS网络文件系统
Apr 14 Servers
微信告警的zabbix监控系统 监控整个NGINX集群
Apr 18 Servers
shell进度条追踪指令执行时间的场景分析
Jun 16 Servers
win sever 2022如何占用操作主机角色
Jun 25 Servers
Docker部署Mysql8的实现步骤
Jul 07 Servers
Nginx报错104:Connection reset by peer问题的解决及分析
Jul 23 #Servers
centos环境下nginx高可用集群的搭建指南
Nginx如何配置根据路径转发详解
Jul 23 #Servers
Linux中一对多配置日志服务器的详细步骤
Jul 23 #Servers
Nginx如何限制IP访问只允许特定域名访问
Jul 23 #Servers
nginx访问报403错误的几种情况详解
Jul 23 #Servers
在windows server 2012 r2中安装mysql的详细步骤
You might like
PHP4之真OO
2006/10/09 PHP
yii操作cookie实例简介
2014/07/09 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
python实现图书馆研习室自动预约功能
2018/04/27 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Django 再谈一谈json序列化
2020/03/16 Python
python Timer 类使用介绍
2020/12/28 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
华为慧通面试题
2012/09/11 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
情侣吵架检讨书
2014/02/05 职场文书
技校毕业生自荐信
2014/06/03 职场文书
个人贷款收入证明
2014/10/26 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
个人委托函范文
2015/01/29 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
见习期个人总结
2015/03/05 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
乔迁新居祝福语
2019/11/04 职场文书