背景
因为之前一直在捣鼓Python,本人是前端菜鸟一枚~,一直想着做个小demo,把后端和前端给统一跑起来,正好也可以把掌握的知识梳理一遍,这样前端后端就能够打通,岂不快哉!平时上班大家都知道没时间干别的,乘着这两天周末,决定把之前搭好的开发环境,给弄到线上去,其实开发环境也搞了一两天,因为django的csrf的坑,还有就是因为前后端要分离吗,还要搭建前端开发环境。前端是webapck + react + react-router + mobx + axios + antd,后端是django + mysql + uwsgi + nginx,这是我第一次部署,所以踩了很多坑,包括阿里云也是第一次使用,希望给别的小伙伴一个参考,要是能在这边文章中解决问题,那就开心了,废话不多说,开始正题。
环境准备
首先你要有一台线上服务器,先配好服务端的环境,我用的是阿里云的ECS服务器,Linux Ubuntu16.04版本。系统不一样可能下面需要安装的软件依赖也会不同,不过大同小异。不是什么大不了的。登录阿里云控制台,找到服务器实例
-
安装依赖 当添加好新的账户后,后面所有的操作都将在这个账户下操作了。安装nginx
sudo apt-get install nginx
这是我用的版本。可能会有别的提示,这是因为需要更新镜像,sudo apt-get update
然后在下载应该就可以了,nginx用于与uwsgi配合做请求转发。下载好的nginx的默认路径在 /etc/nginx 这个目录,网上有人说在/usr/local/nginx,这个看具体的环境吧,我觉得这种情况可能是因为安装的方式不同造成的,我是直接install的,网上有的是下载.tar压缩包然后在解压,这样可能就会造成nginx的安装路径不同。 -
然后启动nginx
sudo service nginx start
在浏览器中输入ip地址,如果显示wenlcome....证明nginx正常。如果nginx没有效果,使用此命令systemctl status nginx.service
,可以查看具体报错信息。接着安装mysql,sudo apt-get install mysql-server
启动服务sudo service mysql start
查看进程ps ajx|grep mysql
停止服务sudo service mysql stop
重启服务sudo service mysql restart
配置mysql进入/etc/mysql/mysql.cnf.d
sudo vim mysql.cnf
找到bind-address表示服务器绑定的ip,默认为127.0.0.1,把ip地址改为服务器的IP。安装过程中会让你输入密码这个设置下就好,一会用于登录,接着安装mysql客户端sudo apt-get install mysql-client
客户端安装完,就可以登录账户了,通过mysql -uroot -pxxxxxx
,默认只有root账户,登陆后添加mysql用户,并设置密码和权限如:grant select on 数据库.表 to 'laowang'@'localhost' identified by '123456';
具体自行百度吧,设置好后这是用于django项目在线上操作mysql数据库时要用的用户名和密码等,注意权限的问题,这里也是容易犯错的地方! -
安装python虚拟环境,这个虚拟环境很多人开发不一定能用到没有用到的请跳过吧,不过还是建议使用,因为很方便管理维护项目,服务器自带的python版本有2.7和3.5,所以不用安装Python
sudo pip install virtualenv #安装虚拟环境
sudo pip install virtualenvwrapper #安装虚拟环境扩展包
编辑家目录下面的.bashrc文件,添加下面两行。
export WORKON_HOME=$HOME/.virtualenvs
source /usr/local/bin/virtualenvwrapper.sh
使用source .bashrc使其生效一下。
创建虚拟环境命令:
mkvirtualenv 虚拟环境名
创建python3虚拟环境:
mkvirtualenv -p python3 name
进入虚拟环境工作:
workon 虚拟环境名
查看机器上有多少个虚拟环境:
workon 空格 + 两个tab键
退出虚拟环境:
deactivate
删除虚拟环境:
rmvirtualenv 虚拟环境名
虚拟环境下安装包的命令:
pip install 包名
注意:不能使用sudo pip install 包名,这个命令会把包安装到真实的主机环境上而不是安装到虚拟环境中。
apt-get install 软件
pip install python包名
复制代码
虚拟环境主要是用于隔离项目依赖的版本,多个项目互相不影响
现在进入你本地开发好的项目根目录,执行pip freeze > list.txt
这是导出你这个项目所依赖的全部包,一会要在服务器上的虚拟环境下载这些包,本地通过ssh 命令链接服务器,然后通过scr -r 命令把本地项目上传到服务器,上传前记得把项目的settings.py这个文件配置文件的ALLOWED_HOSTS = ['*',]或者写你的服务器ip, DEBUG = False
这个要新建一个文件夹。比如/home/abc/wwwroot/ abc是你服务器当前的账户名,切换到虚拟环境,进入项目然后pip install -r list.txt
下载依赖。这个时候你可以通过python3 manage.py runserver 跑起你的项目,看是否正常,如果一切正常,说明环境什么的都是OK的,中间如果有什么不对,缺什么下载什么.
- 接着安装uwsgi,切换虚拟环境,pip install uwsgi,在这个过程中可能会出错,这是因为系统缺少依赖,另外就是所用的python版本造成的,我用的是3.5的版本,然而系统好像默认是2.7。比如这些
libpcre3 libpcre3-dev zlib1g-dev openssl libssl-dev python3-dev python-dev
,缺什么下载什么,可以通过dpkg -l | grep zlib
这个命令查看系统是否有对应的依赖,然后通过sudo apt-get install 下载。 进入项目根目录,sudo vim uwsgi.ini 文件叫什么名字无所谓,然后加上下面内容
[uwsgi]
#使用nginx连接时使用
#socket=127.0.0.1:8080
#直接做web服务器使用
http=127.0.0.1:8080
#项目目录
chdir=xxxxxxx
#项目中wsgi.py文件的目录,相对于项目目录
wsgi-file=xxxxxx
processes=4
threads=2
master=True
pidfile=uwsgi.pid
daemonize=uwsgi.log
#virtualenv=xxxxx
复制代码
这是我的配置,可以看到下面有一个home和virtualenv配置它们的路径是一样的,效果却不一样如果我用virtualenv它就跑不起来,用home就可以,这个坑踩了好长时间。。。都是泪,它们视乎都是用户虚拟环境的配置,有空在查下资料它们的区别。
uwsgi --ini uwsgi.ini
启动uwsgi服务,这个时候就不用python3
manage.py runserver了,uwsgi就可以充当web服务器,这样是检验当前的配置依赖,一切是否都正常,启动后,可以在浏览器中输入IP地址加端口号以及你配置的urls的路径,看是否返回正常,注意这个时候是测试,所有请用get请求,不要用post 因为post有csrf的问题。或者直接在命令行中输入python3,进入python执行环境,
import requests
然后
requests.get('127.0.0.1:8888/xxxx')
查看返回状态。若是ok那么到目前一切正常,如果有错误 请查看项目根目录下面生成的uwsgi.log日志文件,查看日志文件,是解决问题的最好办法。如果没问题,就把socket打开,http注释掉,下面要把nginx和uwsgi结合起来。
- 再次之前把通过webapck打包好的前端dist文件夹上传到服务器,位置应该没有影响,我放在nginx的目录下面了。找到nginx目录,/etc/nginx/nginx.conf:
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#location / {
# root html;
# index index.html index.htm;
#}
# root /etc/nginx/dist;
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
root /etc/nginx/dist; #"这里就要指定你的前端目录文件了,也就是刚刚放进nginx根目录的文件夹"
index html index.html; #"build 目录下默认有index.html 指定默认文件"
try_files $uri /index.html; #"这块分重要,曾经不加尝试过,当我访问login路径时,他不会自动跳转,具体自行百度"
#error_page 405 =200 $uri;
}
location ~ /api/* {#这个是前端ajxa的请求地址,比如33.66.0.1:8888/api/register,都会转发给django后端,这个和开发环境还是有区别的,前端可以通过webpack的devserver做转发,所有后端的地址在上线时,要注意和这个设置的路由要匹配
include uwsgi_params;
uwsgi_pass 127.0.0.1:8888;
}
#这个是你通过webpack打包后的html页面加载的文件路径
location /static {
# 指定静态文件存放的目录
alias /etc/nginx/dist/;
# root /home/zjp/wwwroot/dist;
# index index.html index.html;
# try_files $uri /index.html;
}
#location = / {
# proxy_pass http://172.16.179.131;
#}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
复制代码
这里面一个坑就是要把#include /etc/nginx/conf.d/*.conf; #include /etc/nginx/sites-enabled/*;
注释掉,因为当访问80端口的时候,会默认把/var/www/html/下的文件给你返回,这样你自己的静态文件就无法显示,这是因为里面有默认的配置。更多nginx的配置自行百度。接下来就是收集django所依赖的静态文件了,因为是前后端分离的项目,所以django所需要的静态文件并不多,需要在服务器上新建一个文件夹,来存放所收集的静态文件,然后记住这个路径,在项目的settings.py的加上:
STATIC_ROOT = '/var/www/reactObject/static/'
复制代码
保存,提醒:这时候还要注意mysql的配置,因为现在是线上环境了,所以settings文件中的数据库的账户也要记得修改。然后执行python manage.py collectstatic
,就会把文件存放在STATIC_ROOT这个指定的目录下,然后在上面的nginx的目录中配置对应的路由。因为我的这个项目静态文件都在前端,所以我收集的时候,没有文件。也就没有配置对应的路由。
另外在我配置nginx和uwsgi的时候,我在网上看到一个小伙伴说要把下面红色的文件
到了这一步基本配置都差不多结束了。重新启动nginx 和uwsgi。这个时候你在浏览器中输入IP地址加端口号,没问题的话就可以出来页面了。
如果你有域名的话,可以把域名跟服务器绑定,通过域名解析就可以啦~我的小demo,当我看见页面完完整整出来的时候,心里真是太爽了!这里面其实有很多可以优化的地方,后面再说,先跑通才是最要紧,觉得不错给个赞吧