部署前后端分离项目

前端node js + vue的部署 + nginx的部署

服务器的端口规划
80是nginx的入口端口
9000是nginx的反向代理端口
9999是django的 运行端口
准备前端的vue代码,目的就是为了得到一个dist静态文件文件夹

第一步:部署前端代码,就是一些静态文件,丢给nginx去解析

部署过程

1.下载vue的代码

wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

2.下载nodejs的源代码包

编译vue的代码,生成dist静态文件夹,需要用到node js解释器环境

wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

3.解压缩node的源码包

tar -zxvf node-v8.6.0-linux-x64.tar.gz

4.进入源码包目录,直接配置环境变量即可,人家已经编译好了

node -v
npm -v

5.修改vue的请求发送路径,vue得像服务器发起请求,修改127.0.0.1为linux的ip地址

sed -i "s/127.0.0.1:8000/192.168.16.142:9000/g"  api.js

6.开始编译vue的代码

由于网速问题,下载包可能超级慢
#修改npm的下载源,如同pip 更改豆瓣源一样
npm config set registry https://registry.npm.taobao.org
npm install #找到package.json然后安装模块,如同pip install
npm run build #这一步会生成dist静态文件夹,路飞首页在这index.html

7.配置nginx.conf,内容如下

只需要找到第一个虚拟主机,配置dist的静态文件夹即可
第一个虚拟主机的配置

location / {
            root   /opt/s20luffy/07-luffy_project_01/dist;
            index  index.html index.htm;
			#确保刷新不出现404
			try_files $uri $uri/ /index.html;
        }


		#第二个虚拟主机的配置,用作反向代理
		server {
			listen 9000;
			server_name localhost;
			location / {
			include uwsgi_params;
			uwsgi_pass 127.0.0.1:9999;
		}

		}

后端uwsgi+django的部署

1.**虚拟环境

mkvirtualenv  s20luffy
workon  s20luffy

2.解决运行路飞所需的依赖环境

requirements.txt 
		certifi==2018.11.29
		chardet==3.0.4
		crypto==1.4.1
		Django==2.1.4
		django-redis==4.10.0
		django-rest-framework==0.1.0
		djangorestframework==3.9.0
		idna==2.8
		Naked==0.1.31
		pycrypto==2.6.1
		pytz==2018.7
		PyYAML==3.13
		redis==3.0.1
		requests==2.21.0
		shellescape==3.4.1
		urllib3==1.24.1
		uWSGI==2.0.17.1

3.下载uwsgi,编写uwsgi.ini配置文件,去运行路飞学城后端

pip3 install -i https://pypi.douban.com/simple  uwsgi

uwsgi.ini内容如下

[uwsgi]
	# Django-related settings
	# the base directory (full path)
	chdir           = /opt/s20luffy/luffy_boy/
	# Django's wsgi file
	module          = luffy_boy.wsgi
	# the virtualenv (full path)
	home            = /root/Envs/s20luffy
	# process-related settings
	# master
	master          = true
	# maximum number of worker processes
	processes       = 4
	# the socket (use the full path to be safe
	socket          = 0.0.0.0:9999
	# clear environment on exit
	vacuum          = true

4.启动uwsgi后端

uwsgi --ini uwsgi.ini

5.还得启动redis,才能添加购物车

yum install redis -y 
systemctl start redis

6.将商品添加到购物车,查看redis中的数据
登录账户密码
alex
alex3714

7.演示添加商品到购物车