sanic后端与vue前端联合部署实例

2023年8月25日 07:59 by wst

服务部署

---

现代web项目都是前后分离开发，那么部署的时候怎么部署呢？

笔者就遇到这样一个问题，前端采用的是vue，后端采用的sanic框架。

目录结构

整体的项目目录结构如下：

.
├── backend
│   ├── apps
│   ├── requirements.txt
│   └── server.py
├── doc
│   ├── 02设计理念.md
│   ├── 03UI设计.md
│   ├── 待实现功能.md
│   ├── formv1.drawio
│   ├── login.drawio
│   ├── nologin.md
│   ├── pay.drawio
│   └── view_phone.drawio
├── frontend
│   ├── babel.config.js
│   ├── dist
│   ├── jsconfig.json
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   ├── README.md
│   ├── src
│   └── vue.config.js
├── management
├── README.md
└── vetur.config.js

1. backend 为后端目录，采用sanic框架。

2. frontend为前端目录，采用vue开发。

NGINX配置

最终的NGINX配置文件如下：

server {                                                                                                      
    listen 80;                                                                                                
    server_name huijiazhilu.com www.huijiazhilu.com;
    access_log /home/wst/workspace/huijiazhilu/logs/access.log;
    error_log /home/wst/workspace/huijiazhilu/logs/error.log;                                                    
    root /home/wst/workspace/huijiazhilu/frontend/dist;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
     }
    location /api/ {
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://127.0.0.1:8402/;
    }

        location  /static/ {
            #如果你的static目录不在root里，可以配置 alias /path/to/your/mysite/static;
            alias /home/wst/workspace/huijiazhilu/frontend/static/;
        }

}

 

记录经验从我做起，一个努力刻苦的码农！

 

---