在Ubuntu搭建一个flask+Vue的项目

ELIX2025-04-022025-04-02

说明

目标：获取一个资讯网站的新闻信息，并部署到远程服务器上，做一个简易的信息聚合平台。

准备：云服务器、域名（可选）

架构：前后端分离，前端使用Vue部署；后端使用python-flask，并使用Docker部署到服务器

服务器配置

本项目中，由于使用了Docker和Nginx，很大程度降低了对服务器环境的依赖。

服务器上也是只需要配置这两个环境即可。

Docker：apt install docker.io

Nginx: apt install nginx

Docker配置镜像源

（apt和docker的镜像源总得有一个好用的…）

sudo vim /etc/docker/daemon.json <<EOF
{
    "registry-mirrors": [
        "https://docker.1ms.run",
        "https://docker.xuanyuan.me"
    ]
}
EOF

项目部署

一、Docker部署flask项目

首先本地调试flask爬取网站信息，并调试通过，本文主要讨论项目部署，故不赘述。

#!/bin/sh
from flask import Flask, jsonify
from flask_cors import CORS
import requests
from bs4 import BeautifulSoup

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求

@app.route('/')
def index():
    url = 'https://website.com'
    response = requests.get(url)
    if response.status_code == 200:
        soup = BeautifulSoup(response.text, 'html.parser')
        message_grids = soup.find_all(class_='tgme_widget_message_text js-message_text')
        data = [{ "content": grid.get_text(strip=True)} for grid in message_grids]
    else:
        data = [{ "content": ""}]
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True,host='0.0.0.0')

运行后进入localhost:5000，能看到返回json信息即可。

要部署到服务器上，且考虑移植性和可用性，可选用Docker进行部署，排除对服务器环境的依赖。

安装好Docker环境后，在项目根目录编写Dockerfile

# 使用官方 Python 镜像作为基础镜像
FROM python:3.9
# 设置工作目录
WORKDIR /app
# 复制当前目录下的文件到工作目录下
COPY . /app
# 安装依赖
RUN pip install --no-cache-dir -r requirements.txt
# 暴露端口
EXPOSE 5000
# 启动应用程序
CMD ["python", "main.py"]

再执行docker build -t endapp . 构建镜像，docker run --privileged -p 5000:5000 endapp创建容器并运行。构建时可能遇到找不到依赖问题，考虑更新docker镜像源

此时可达到和上面运行flask项目相同的效果。

docker本地正常运行后，就要导出镜像并部署到服务器上，参考：

导出和导入镜像：https://www.hangge.com/blog/cache/detail_2411.html

注意：若跨平台部署镜像（如windows生成镜像到ubuntu部署，则部署时执行的是docker load -i your_images.tar）

导出镜像：docker save your_images_ID > your_images.tar

将生成的tar包上传到服务器，并找到tar包所在位置后，

在服务器导入镜像：docker load -i your_images.tar

导入完成后，可执行docker images查看是否有自己的镜像，执行docker run --privileged -d -p 5000:5000 IMAGE_ID即可后台运行Docker服务。

二、Nginx部署前段Vue静态页面

Nginx 是一个高性能的 HTTP 和反向代理 Web 服务器，很适合部署静态页面，能够满足Vue的需求。

同样，现在本地调试好前端页面

App.vue

<template>
  <div id="app">
    <a>sss</a>
    <MessageGrid :messages="messages" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import MessageGrid from './components/MessageGrid.vue';

export default {
  name: 'App',
  components: {
    MessageGrid
  },
  setup() {
    const messages = ref([]);

    onMounted(() => {
      fetchData();
    });

    const fetchData = async () => {
      try {
        const response = await axios.get('http://38.55.239.55:5000/'); // 替换为你的后端接口地址
        messages.value = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    return {
      messages
    };
  }
};
</script>

MessageGrid.vue

<template>
    <div>
      <el-card v-for="(item, index) in messages" :key="index" class="box-card">
        <div class="message-content">
          <h3>{{ item.title }}</h3>
          <p>{{ item.content }}</p>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      messages: Array
    }
  };
  </script>
  
  <style scoped>
  .box-card {
    margin-bottom: 20px;
  }
  .message-content {
    padding: 10px;
  }
  </style>

main.js

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

构建项目npm run build，这会生成一个 dist 文件夹，里面包含所有静态资源（HTML、CSS、JavaScript 等）

将dist文件上传到服务器

安装nginx：sudo apt-get install nginx

查看nginx版本：nginx -v

进入目录：cd /etc/nginx/sites-enabled

该目录下新建amedia.conf：

server {
   listen 8070 default_server; #可以把8070修改为你需要设置的端口号

   root /var/www/a-media/dist; #你的前端文件存放的路径地址

   index index.html;  #保证你的dist文件夹下面有个文件叫做index.html

   server_name xx.xx.xxx.xx;  #这里的localhost替换为你自己的ubuntu所在ip地址
   location / {
       try_files $uri $uri/ =404;
   }
}

将nginx添加到用户组：sudo usermod -a -G root www-data

查看是否添加成功：getent group ubuntu

检查Nginx配置是否有语法错误：sudo nginx -t

重启Nginx：sudo systemctl restart nginx

绑定域名

首先在域名网站进行绑定，指向服务器公网IP，类型为A。

在服务器Nginx进行修改，修改默认路径下的/etc/nginx/sites-enabled/default,按照如下规则修改：

server {
	listen 80 default_server;
	listen [::]:80 default_server;

        root /var/www/a-media/dist; #你的前端文件存放的路径地址

        index index.html;  #保证你的dist文件夹下面有个文件叫做index.html

        server_name xx.xx.xx.xx;  #这里的localhost替换为你自己的ubuntu所在ip地址

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}
}