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下配置Https证书详细过程
Apr 01 Servers
nginx配置文件使用环境变量的操作方法
Jun 02 Servers
使用nginx配置访问wgcloud的方法
Jun 26 Servers
Nginx location 和 proxy_pass路径配置问题小结
Sep 04 Servers
Nginx内网单机反向代理的实现
Nov 07 Servers
苹果M1芯片安装nginx 并且部署vue项目步骤详解
Nov 20 Servers
CKAD认证中部署k8s并配置Calico插件
Mar 31 Servers
Windows和Linux上部署Golang并运行程序
Apr 22 Servers
WinServer2012搭建DNS服务器的方法步骤
Jun 10 Servers
kubernetes集群搭建Zabbix监控平台的详细过程
Jul 07 Servers
apache虚拟主机配置的三种方式(小结)
Jul 23 Servers
Linux在两个服务器直接传文件的操作方法
Aug 05 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
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
没有document.getElementByName方法
2013/08/19 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
tensorflow学习教程之文本分类详析
2018/08/07 Python
浅谈Python中的bs4基础
2018/10/21 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
python FTP编程基础入门
2021/02/27 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
银行工作检查书范文
2014/01/31 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
求职面试个人自我评价
2014/02/28 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
三严三实对照检查材料
2014/08/25 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
个人作风建设心得体会
2014/10/22 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书