前后端分离项目部署

前后端项目分别开发完成之后，我们可以选择两种部署方式，第一种就是将前端生成的文件放到后端中，由后端去部署，今天我们只讲第二种方式

前端部署

项目打包

npm run build

将生成的dist文件放到要部署的文件夹，我这里是www/wwwroot/fengfeng/下面

接下来做nginx的配置，这样我们就可以通过访问端口去访问前端项目了

nginx配置

server {
     listen       80;
     server_name  localhost;
        
     location /api/ {
        rewrite ^/(api/.*) /$1 break;
        proxy_pass http://192.168.227.130:8080/api/;  # 后端nginx的服务器地址
     }
     location / {
        try_files $uri $uri/ /index.html;  # 解决刷新404问题
        root   /www/wwwroot/index.com/dist/;
        index  index.html index.htm;
     }
        
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
        root   html;
     }
}

主要是有几个点要注意

• 路由刷新404问题，使用try_files
• 请求后端接口，使用proxy_pass

大家可参考我的代码示例

多域名部署

如果要做多域名代理，先去etc下面找到hosts文件，将你的域名做一个映射

127.0.0.1 www.fengfengzhidao.com
127.0.0.1 yyds.fengfengzhidao.com

nginx

server {
    listen       80;
    server_name  yyds.fengfengzhidao.com;  # 写你的域名
        
    location /api/ {
        rewrite ^/(api/.*) /$1 break;
        proxy_pass http://ip:port;  # 后端nginx的服务器地址
    }
    location / {
        try_files $uri $uri/ /index.html;  # 解决刷新404问题
        root   /www/wwwroot/fengfeng/dist/;
        index  index.html index.htm;
    }  
}

配置完成之后重启nginx服务器，去访问你的域名，应该是可以看到效果的，至少网页的标题是加载出来了，现在需要去部署后端，这样前端才能正常请求数据

后端配置

settings

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'feng_static')

收集静态资源

python manage.py collectstatic

如果你的项目完全没有使用静态文件，那么这一步你可以不用管

接下来导出所用第三方模块和数据库

# 导出第三方模块
pip freeze > requirements.txt

# 导出数据库
mysqldump -u root -p pro > pro.sql

那个第三方模块可能会有个别下载不成功，大家可以去那个模块那里看看有没有少了哪个模块

基本上到这一步就差不多了，接下来去配置nginx代理后端服务

nginx

server {
    listen   8080;  # 监听端口
    server_name _;  # 服务名字，多域名就写域名
    location / {
        uwsgi_pass   0.0.0.0:8080;  # django运行的端口
        include uwsgi_params;  # 固定搭配
    }
    location /static{
         alias  /www/wwwroot/blog_back/feng_static;  # 你收集的静态文件的位置
    }
}

这样你的项目就部署成功了！