vue+django_restframework+uwsgi+nginx+supervisor部署项目

一、前端 VUE

【1】，在打包之前，检查需要改动的地方。

• 将config\index.js里面的 assetsPublicPath: '/',改为assetsPublicPath: './',
• 一定要【将url写正确】，尤其注意api反向代理的 ip/域名
  比如：
        前端 --》 url:"http://10.0.0.11/api/login/",
      后端 --》 url(r"^api/login/$", LoginView.as_view()),

【2】，执行打包

D:\py文件\MyProject>npm run build

> [email protected] build D:\py文件\MyProject
> node build/build.js

Hash: 88dfe31557c79dd523bf
Version: webpack 3.12.0
Time: 34771ms
                                                  Asset       Size  Chunks                    Chunk Names
                     static/img/img6.d6973c6.png      37 kB          [emitted]
                    static/img/img12.66b0836.png    33.2 kB          [emitted]
                     static/img/img9.6bfc22b.png    30.2 kB          [emitted]
                    .......
                    static/img/home-banner3.d79a00d.png    97.3 kB          [emitted]
               static/js/vendor.6cc76b6429383b900273.js     753 kB       0  [emitted]  [big]  vendor
                  static/js/app.5353e9637d2157973819.js    25.3 kB       1  [emitted]         app
    static/css/app.53a3604eb4eb76032df4880b50e7b68f.css     191 kB       1  [emitted]         app
           static/js/vendor.6cc76b6429383b900273.js.map     2.9 MB       0  [emitted]         vendor
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html  607 bytes          [emitted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

【3】，注意：

如果执行打包命令没反应，将build/check-versions.js中的
// if (shell.which('npm')) {
// versionRequirements.push({
// name: 'npm',
// currentVersion: exec('npm --version'),
// versionRequirement: packageConfig.engines.npm
// })
// }
注释掉

【4】，npm run dev和 npm run build区别

• npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, build生成的代码用于线上部署。
• build之后会生成一个dist文件夹，所有的东西都将会打包进里面，部署时只需将dist文件夹部署线上。配置nginx时可指定路径。

【5】，迁移vue项目

• 从github上拉下来，或者↓
• 压缩dist，拖拽dist至Linux机，解压dist，所有静态资源都在dist下，包括图片，js，css，字体

二、后端django_restframework

【6】，搭建python环境 （之前的有写）

【7】，虚拟环境（之前的有写）

【8】，查看django项目，有什么需要修改的

• DEBUG = False
  ALLOWED_HOSTS = ["10.0.0.11"]

☝上面配置，指定了只允许本ip可访问，根据自己的业务自定义。

• 一定要【将日志加上】，后面出错时方便排查。
  （error.log位置：/project/django_server/log/error.log）

【9】，迁移django项目（推到github，从git上拉 / 压缩，拖拽，解压）

【10】，解决依赖包

pip freeze >requirements.txt
pip download -rrequirements.txt(不知为何不可行，执行后pip list查看没有，所以用了笨方法，挨个儿pip），
django==1.11.14
django-redis==4.9.0
django-redis-sessions==0.5.6
djangorestframework==3.8.2
redis==2.10.6
uwsgi

三、uwsgi配置

【11】，配置uwsgi（先新建一个project项目总目录，然后再创建ini文件，移进去）

【配置文件一定要写对，否则报错】
vim /project/django_server/uwsgi.ini

[uwsgi]
#使用nginx连接时使用
socket=0.0.0.0:9000
#不用nginx直接当做web服务器使用
#http=0.0.0.0:9000
#项目目录绝对路径
chdir=/project/django_server
#wsgi文件路径，在项目底下
wsgi-file=django_server/wsgi.py
#指定解释器目录
home=/root/Envs/vue
processes=4
threads=2
master=True
pidfile=uwsgi.pid

四、supervisor进程管理工具

【12】，下载、配置 进程管理工具（之前的有写）

• 查看所需配置路径
  /root/Envs/vue/bin/uwsgi
  /project/django_server/uwsgi.ini
• 配置vim /etc/supervisord.conf
  [program:vue]
  command=/root/Envs/vue/bin/uwsgi --ini /project/django_server/uwsgi.ini

五、配置nginx

【13】，配置nginx，location信息

vi /etc/nginx/nginx.conf

server {
        listen 80;
        server_name 10.0.0.11;
        root /project/dist;     # 打包后的dist目录
location / {
        try_files $uri $uri/ @router;    # 指向下面的 @router否则会出现 404
        index index.html;
        }
# 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
location @router {
        rewrite ^.*$ /index.html last;
        }
location /api {
        include /etc/nginx/uwsgi_params;
        uwsgi_pass 10.0.0.11:9000;
        }
}

六、启动服务

【14】，启动 nginx ，supervisord

• /usr/sbin/nginx -s reload（如果没有启动就启动，启动了就重启）

• supervisord -c /etc/supervisord.conf

• 确保 supervisor将 uwsgi 正常管理。

• 确保 nginx 配置正常，且正常开启。

• netstat -tunlp查看 80端口 和 9000端口 是否运行，如果9000没有运行，输入supervisorctl进入交互模式，查看为何没打开。

七、访问

【15】，输入10.0.0.11即可访问服务器。