# 简单前后端分离项目部署

## 简介
我是部署我的简单动漫网站的时候碰到这方面的问题。
我的项目技术栈：
- 使用python flask 作为后端
- 使用vue编写前端

## 文件传输到服务器上
方法有很多，我直接将项目上传到github， 然后pull到云端。


## 将后端跑起来
我这里直接使用python命令行启动

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

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

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

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



然后就可以访问到了

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

我使用VUE，所以使用npm run build 进行打包
这时候，我们的前端就已经打包完毕了。

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

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://learnku.com/articles/34440)

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

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文件


具体配置

[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

#!/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 }'

然后就是一些命令了

#查看日志
$ 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 `