目录

简单前后端分离项目部署

简单前后端分离项目部署

简介

我是部署我的简单动漫网站的时候碰到这方面的问题。 我的项目技术栈:

  • 使用python flask 作为后端
  • 使用vue编写前端

文件传输到服务器上

方法有很多,我直接将项目上传到github, 然后pull到云端。

https://raw.githubusercontent.com/kengerlwl/kengerlwl.github.io/refs/heads/master/image/094dfb8d4ef2f50f210c7d07055e80cd/837f2db56b54c5bbbed63b60b73ff264.png

将后端跑起来

我这里直接使用python命令行启动

1
python /root/lwl/code/python/deploy/flaskApi.py &  # 运行指定项目

虽然后端运行了起来,但是这时候我们还不能通过公网ip去进行访问。 要将防火墙打开。

1
firewall-cmd --zone=public --add-port=5000/tcp    &  #开启防火墙端口

同时腾讯这也要进行防火墙管理

https://raw.githubusercontent.com/kengerlwl/kengerlwl.github.io/refs/heads/master/image/094dfb8d4ef2f50f210c7d07055e80cd/5d1b0b0c26df6d3c72eae6d41609a231.png

https://raw.githubusercontent.com/kengerlwl/kengerlwl.github.io/refs/heads/master/image/094dfb8d4ef2f50f210c7d07055e80cd/c698b3e2fc66f323e24026c743470803.png

然后就可以访问到了 https://raw.githubusercontent.com/kengerlwl/kengerlwl.github.io/refs/heads/master/image/094dfb8d4ef2f50f210c7d07055e80cd/6ad55e8ba23f5b050167a37488cca457.png

前端部署

我这里的前端, 属于传统前端,主要有html,css,js等静态文件组成。

我使用VUE,所以使用npm run build 进行打包 https://raw.githubusercontent.com/kengerlwl/kengerlwl.github.io/refs/heads/master/image/094dfb8d4ef2f50f210c7d07055e80cd/0084e397e08735dda4e5ab322dc7dd23.png 这时候,我们的前端就已经打包完毕了。

重点来了 使用某个服务器对静态资源进行代理 我使用的是nginx。 以下是我的配置

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
user  root;  # 用户
worker_processes auto;
error_log  /www/wwwlogs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
                #include luawaf.conf;

                include proxy.conf;

        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;

        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
                fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
                limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;


# 访问日志配置在这

#自定义名为main得日志格式


log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

access_log /www/wwwlogs/access.log    main;  # 这里是具体路径

# 这里是我们需要注意的东西,也是配置主要需要修改的东西
   server {
   
   #我们访问119.29.143.49:88
        listen       80;               # 端口
        server_name  119.29.143.49;    # 服务器名, 要代理的服务器的名字


        #存放静态资源的文件路径
         root   /root/lwl/code/python/deploy/front/dist;

        
        #ngix的配置文件
        include /www/nginx/conf/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }



include /www/server/panel/vhost/nginx/*.conf;
}

我这里只对简单的静态资源代理进行举例,关于后端的代理可以自行浏览nginx的用例

Nginx下vue等打包静态资源的路由问题

因为vue打包后是单个html,url也是vue内部的。所以刷新页面会出现下面问题。 https://raw.githubusercontent.com/kengerlwl/kengerlwl.github.io/refs/heads/master/image/094dfb8d4ef2f50f210c7d07055e80cd/c36cf98ccd6ea5cb96b469912c76c1de.png

参考资料链接

解决问题 在服务端nginx配置里添加vue-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
server
{
    listen 80;
    server_name testwx.wangshibo.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/ssoShuang/dist;

    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

重启 nginx 后,问题就迎刃而解了。

最后讲解自动启动问题

使用ssh 连接后,终端退出那么任务也就没了 所以我使用自动启动 这里主要用systemctl

我的服务器使用centos7,他的systemctl自动启动项在目录 /usr/lib/systemd/system/ 新建service文件: 我新建了lwl.service文件

https://raw.githubusercontent.com/kengerlwl/kengerlwl.github.io/refs/heads/master/image/094dfb8d4ef2f50f210c7d07055e80cd/3344cb2cbd9040ada968c0055c3b321c.png

具体配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[Unit]
Description=lwl       #描述
After=network.target  #前置启动的程序

[Service]            #具体的命令了
Type=forking
ExecStart=/root/init.sh   # 开启该任务的命令
ExecReload=/root/init.sh  #重启
ExecStop=/root/init.sh    #关闭

[Install]  
WantedBy=multi-user.target

注意 systemctl执行脚本时需要知道脚本的解释器 解决方法: 在/root/init.sh脚本的开头加上#!/bin/sh

最后的init.sh

1
2
3
4
5
6
7
8
9
#!/bin/sh

firewall-cmd --zone=public --add-port=5000/tcp    &  #开启防火墙端口

python /root/lwl/code/python/deploy/flaskApi.py &  # 运行指定项目


#用来查找某个端口的进程pid
#netstat -nlp | grep 5000 | awk '{print $7}' | awk -F"/" '{ print $1 }'

然后就是一些命令了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

#查看日志
$ sudo journalctl -f -u nginx.service
 Logs begin at  2015-06-25 17:32:20 CST. 
6 25 10:28:24 Leco.lan systemd[1]: Starting nginx  high performance web server
  
启动一个服务:systemctl start nginx.service
关闭一个服务:systemctl stop postfix.service
重启一个服务:systemctl restart nginx.service
显示一个服务的状态:systemctl status postfix.service
在开机时启用一个服务:systemctl enable nginx.service
在开机时禁用一个服务:systemctl disable nginx.service
查看服务是否开机启动:systemctl is-enabled nginx.service
查看已启动的服务列表:systemctl list-unit-files|grep enabled


刚刚配置的服务需要让systemctl能识别,就必须刷新配置
$ systemctl daemon-reload

尽量将运行命令写的精确 比如我的python有多个版本,那么尽量写成 /usr/bin/python /root/lwl/code/python/deploy/flaskApi.py & # 运行指定项目

简单讲程序放入后台

nohup命令: 如果你正在运行一个进程,而且你觉得在退出帐户时该进程还不会结束,那么可以使用nohup命令。该命令可以在你退出帐户/关闭终端之后继续运行相应的进程。nohup就是不挂起的意思。

我们现在开始启动服务 python pyserver.py,并且希望在后台运行.我们就可以使用nohup,命令如下:

nohup python pyserver.py