前后端分离 docker 部署 前后端分离部署服务器

最近做了一个项目，前端用vue写了一个网站，后端用flask，并连接训练好的Pytorch模型。第一次将项目部署到云服务器，在部署的过程中花了挺多功夫，在此记录一下。

具体配置

前端：vue3

后端：flask 2.2.2

服务器：阿里云服务器

服务器

在阿里云购买所需配置的服务器，可以查看对应的公网和私网IP，通过”远程连接“连接上这个云服务器，有许多文章对此有详细的使用说明，此处便不再赘述。

前端部署

安装前端环境

1. 首先通过”远程连接“连接上你的云服务器，我选择命令行的形式（默认），你可以新建一个用户，也可以直接用root
2. nginx下载：

wget https://nginx.org/download/nginx-1.20.2.tar.gz

3. 安装依赖：gcc、c++、gcre、openssl

sudo yum -y install gcc
sudo yum -y install gcc-c++
sudo yum -y install pcre*
sudo yum -y install openssl-devel

4. nginx安装：
5. 解压到当前目录的nginx-1.20.2文件夹：

tar -zxvf nginx-1.20.2.tar.gz

2. 在/usr/local 下创建一个nginx的目录：

sudo mkdir nginx

3. 修改nginx目录权限：

sudo chmod 777 nginx

4. 回到 nginx-1.20.2 目录，生成mekefile 文件

./configure --prefix=/usr/local/nginx

5. make：

sudo make && make install

6. 去到nginx里的sbin目录（即/usr/local/nginx/sbin），执行sbin中的nginx：

sudo ./nginx

5. 开启前端端口：

sudo firewall-cmd --zone=public --add-port=80/tcp --permanent

6. 更新防火墙：

sudo firewall-cmd --reload

部署

1. 我使用的vue3没有vue.config.js，需要在项目根目录下自己创建一个，如下图：

有关vue.config.js具体内容的帖子也有很多，这里我只写了一些最基本的：

const path = require('path')
module.exports = {
    publicPath: './',
    outputDir: 'dist',
    assetsDir: "./static", 
    indexPath: './index.html',
    lintOnSave: true,
    transpileDependencies: [], 
    productionSourceMap: false, 
    parallel: require('os').cpus().length > 1, 
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, './src/assets/less/global.less')]
        }
    },
    devServer: {
        // 跨域全局配置
        proxy: "http://xx.xxx.xxx.xxx:80"
    }
}

除此之外还要将在开发中用的localhost改成服务器公网IP

2. 打包得到dist文件夹：（这里有时候会因为版本报错，多查查资料换对版本就可以了）

npm run build

3. 将dist文件夹传到云服务器：

这里我使用的是windows自带的scpt，也可以使用第三方软件如xhell，winsp等。

root是服务器用户名，”a.b.c.d“是服务器的公网IP，”/usr/local/nginx/html/“是传送的具体目录

scp -r dist root@a.b.c.d:/usr/local/nginx/html/

4. 重启nginx：

sudo ./nginx -s reload

5. 检查服务器安全组有无将80端口添加进去，否则即便部署成功也访问不了：

6. 现在可以通过”http://公网IP：80“来访问前端页面了

补充

其实在前端部署过程中没有上述写得那么顺利，中间也遇到挺多问题，但当时并没有将问题记录下来，以后有时间整理一下。