部署指南：Flask + React 应用

Sky991
176 阅读2分钟

部署指南：Flask + React 应用

一、环境准备

macOS

  1. 安装 Homebrew：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 安装 Nginx：
brew install nginx

Windows WSL2

  1. 安装 Nginx：
sudo apt update
sudo apt install nginx

二、前端构建

  1. 修改 API 配置：
export const API_BASE_URL = '';
  1. 构建前端：
cd web/frontend/well-generator-frontend
npm install
npm run build

三、Nginx 配置

macOS

  1. 创建配置文件：
sudo mkdir -p /opt/homebrew/etc/nginx/servers
sudo nano /opt/homebrew/etc/nginx/servers/well-generator.conf
  1. 添加配置内容：
server {
    listen 3000;
    server_name localhost;

    location / {
        root path-to-project/web/frontend/well-generator-frontend/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:5001/api/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        proxy_read_timeout 300s;
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
        client_body_timeout 300s;

    }

    location /data/generated_wells/ {
        alias path-to-project/web/backend/data/generated_wells/;
        autoindex off;
    }
}

# 注意设置timeout时间，因为api运行时间比较长

Windows WSL2

  1. 创建配置文件：
sudo nano /etc/nginx/sites-available/well-generator
  1. 添加配置内容：
# /etc/nginx/sites-available/well-generator *                                                     server {
    listen 3000;
    server_name localhost;

    location / {
        root /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:5001/api/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        proxy_read_timeout 300s;
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
        client_body_timeout 300s;

    }

    location /data/generated_wells/ {
        alias /home/taorui/Wbi.Innovation.ResolutionAI/web/backend/data/generated_wells/;
        autoindex off;
    }
}

# 注意设置timeout时间，因为api运行时间比较长
  1. 创建符号链接（仅 WSL2）：
sudo ln -s /etc/nginx/sites-available/well-generator /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default

四、后端配置

  1. 安装 Gunicorn：
conda activate slb
pip install gunicorn
  1. 修改启动脚本 web/start_server.sh：
cd backend
gunicorn --bind 127.0.0.1:5001 --workers 4 app:app
brew services restart nginx

五、启动服务

macOS

# 启动 Nginx
brew services restart nginx

# 启动后端
cd web
sh start_server.sh

Windows WSL2

# 启动 Nginx
sudo systemctl restart nginx
# 或者sudo service nginx restart

# 启动后端
cd web
sh start_server.sh

六、访问应用

打开浏览器访问：http://localhost:8080

七、注意事项

  1. 确保替换配置文件中的路径为实际项目路径
  2. 确保数据目录具有正确的权限：
# macOS
sudo chown -R $(whoami) /Users/your-username/path-to-project/web/backend/data

# WSL2 (此方法无效)
sudo chown -R www-data:www-data /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build
sudo chown -R www-data:www-data /home/taorui/Wbi.Innovation.ResolutionAI/web/backend/data


# WSL 2
# 检查 Nginx 用户对index.html是否有权限
sudo -u www-data namei /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build/index.html

# 发现没有权限
# f: /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build/index.html
# d /
# d home
# d taorui
#   Wbi.Innovation.ResolutionAI - Permission denied

# 使用setfacl
# I'll fix this using setfacl, a way to give fine-grained ACL permissions without changing the user and group of a file.
sudo apt update
sudo apt install acl
sudo setfacl -m g:www-data:rx /home/taorui/

# 再次检查权限
sudo -u www-data namei /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build/index.html

# 发现有权限了
  1. 检查 Nginx 配置是否正确：
# macOS
nginx -t

# WSL2
sudo nginx -t
  1. 如果遇到权限问题，检查 Nginx 日志：
  • macOS: /opt/homebrew/var/log/nginx/error.log
  • WSL2: /var/log/nginx/error.log
  1. 如何nginx运行同时启动开发服务器
# 在package.json中设置  "proxy": "http://127.0.0.1:5001"
# 指定另一个端口启动
PORT=3001 npm start

Deployment Guide: Flask + React Application

1. Environment Preparation

Windows WSL2

  1. Install Nginx: 
    sudo apt update
sudo apt install nginx

2. Frontend Build

  1. Modify the API configuration:

    export const API_BASE_URL = '';

  2. Build the frontend:

    cd web/frontend/well-generator-frontend
npm install
npm run build

3. Nginx Configuration

  1. Create the configuration file:

    sudo nano /etc/nginx/sites-available/well-generator

  2. Add the following configuration:

    server {
    listen 3000;
    server_name localhost;

    location / {
        root /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:5001/api/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        proxy_read_timeout 300s;
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
        client_body_timeout 300s;
    }

    location /data/generated_wells/ {
        alias /home/taorui/Wbi.Innovation.ResolutionAI/web/backend/data/generated_wells/;
        autoindex off;
    }
}

# Note: Ensure to set the timeout values appropriately as API execution might take longer time.

  3. Create a symbolic link:

    sudo ln -s /etc/nginx/sites-available/well-generator /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default

4. Backend Configuration

  1. Install Gunicorn:

    conda activate slb
pip install gunicorn

  2. Modify the startup script web/start_server.sh:

    cd backend
gunicorn --bind 127.0.0.1:5001 --timeout 300 --workers 4 app:app
sudo systemctl restart nginx

5. Start the Services

# Start Nginx
sudo systemctl restart nginx

# Start the backend
cd web
sh start_server.sh

6. Access the Application

Open a browser and navigate to: http://localhost:3000

7. Notes

  1. Ensure to replace the paths in the configuration file with the actual project paths.

  2. Ensure the data directories have the correct permissions:

    # Check if Nginx user has permission to access index.html
sudo -u www-data namei /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build/index.html

# If permission is denied, use setfacl to grant access
sudo apt update
sudo apt install acl
sudo setfacl -m g:www-data:rx /home/taorui/

# Verify permissions again
sudo -u www-data namei /home/taorui/Wbi.Innovation.ResolutionAI/web/frontend/well-generator-frontend/build/index.html

  3. Check Nginx configuration:

    sudo nginx -t

  4. If you encounter permission issues, check the Nginx logs:

    • WSL2: /var/log/nginx/error.log

  5. How to run the development server simultaneously with Nginx:

    # Set "proxy": "http://127.0.0.1:5001" in package.json
# Start the development server on another port
PORT=3001 npm start
avatar
文章
阅读
粉丝