Django + react + 阿里云ecs 先后端分离部署上线

时间 2019-11-29

标签 django react 阿里 ecs 后端分离部署上线栏目 Python 繁體版

原文原文链接

背景

由于以前一直在捣鼓Python，本人是前端菜鸟一枚~，一直想着作个小demo，把后端和前端给统一跑起来，正好也能够把掌握的知识梳理一遍，这样前端后端就可以打通，岂不快哉！平时上班你们都知道没时间干别的，乘着这两天周末，决定把以前搭好的开发环境，给弄到线上去，其实开发环境也搞了一两天，由于django的csrf的坑，还有就是由于先后端要分离吗，还要搭建前端开发环境。前端是webapck + react + react-router + mobx + axios + antd,后端是django + mysql + uwsgi + nginx,这是我第一次部署，因此踩了不少坑，包括阿里云也是第一次使用，但愿给别的小伙伴一个参考，要是能在这边文章中解决问题，那就开心了，废话很少说，开始正题。php

环境准备

首先你要有一台线上服务器，先配好服务端的环境，我用的是阿里云的ECS服务器，Linux Ubuntu16.04版本。系统不同可能下面须要安装的软件依赖也会不一样，不过大同小异。不是什么大不了的。登陆阿里云控制台，找到服务器实例html

点击远程连接,而后会跳到远程连接页面，页面会有一个弹框，输入远程连接密码，这个密码要记下来，后面登陆时会一直使用。登陆后的界面

强烈建议不要使用这个终端，由于太坑，你只能经过clear命令清屏，不能上下翻屏，也不能回滚。。。建议使用ssh命令在本地远程登陆: ssh 用户名@ip地址用户名是你服务器上的用户名，ip地址是你服务器上的公网ip，新买来的服务器默认只有root用户名(第一次使用一脸懵逼，就在想这TM用户名是啥我怎么驾驭它。。笨的要死)，建议不要用root帐户操做，useradd 用户名新建一个用户名，而后添加sudo权限，这个很重要哦，否则不少命令没有权限，关于Ubuntu命令自行百度啦。为服务器添加安全组，后面项目会用到端口号，添加2二、330六、8080等，用到什么端口加添加什么端口，这里也是一颗坑，否则项目根本没法访问。

安装依赖当添加好新的帐户后，后面全部的操做都将在这个帐户下操做了。安装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虚拟环境，这个虚拟环境不少人开发不必定能用到没有用到的请跳过吧，不过仍是建议使用，由于很方便管理维护项目，服务器自带的python版本有2.7和3.5，因此不用安装Pythonmysql

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包名
复制代码

虚拟环境主要是用于隔离项目依赖的版本，多个项目互相不影响react

如今进入你本地开发好的项目根目录，执行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的，中间若是有什么不对，缺什么下载什么.webpack

接着安装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就能够，这个坑踩了好长时间。。。都是泪，它们视乎都是用户虚拟环境的配置，有空在查下资料它们的区别。 ios

进行到这一步，上面我用的是socket的连接，这是和nginx配合使用的，这个不急一会再说，如今先把socket注释掉，把http打开，后面的端口号根据本身项目来定。而后保存退出编辑，经过命令，此时所在的目录是项目根目录， 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的加上：nginx

STATIC_ROOT = '/var/www/reactObject/static/'

复制代码

保存，提醒：这时候还要注意mysql的配置，由于如今是线上环境了，因此settings文件中的数据库的帐户也要记得修改。而后执行python manage.py collectstatic，就会把文件存放在STATIC_ROOT这个指定的目录下，而后在上面的nginx的目录中配置对应的路由。由于个人这个项目静态文件都在前端，因此我收集的时候，没有文件。也就没有配置对应的路由。web

另外在我配置nginx和uwsgi的时候，我在网上看到一个小伙伴说要把下面红色的文件

放在项目根目录的下面，我信你个鬼，你这糟老头子坏的很~ 我把它放在了项目目录的下面怎么都跑不起来，又是检查各类配置是否有误，检查log文件等。。。都是泪不说了，后来也看了别人的博客，发现根本没有这个文件，并且这个文件都是默认安装的，不须要动它。

到了这一步基本配置都差很少结束了。从新启动nginx 和uwsgi。这个时候你在浏览器中输入IP地址加端口号，没问题的话就能够出来页面了。

若是你有域名的话，能够把域名跟服务器绑定，经过域名解析就能够啦~个人小demo，当我看见页面完完整整出来的时候，内心真是太爽了！这里面其实有不少能够优化的地方，后面再说，先跑通才是最要紧，以为不错给个赞吧