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的時候，我在網上看到一個小夥伴說要把下面紅色的文件