前后端分离项目单机部署

6 阅读2分钟

一、打包前端代码

vue项目通过命令 npm run build 打包,打包后的文件保存在dist目录下:

image.png

image.png

二、后端打包

在idea右侧找到maven按钮,进入启动类所在模块-生命周期,先双击clean按钮,清理旧数据;再双击install按钮进行打包,打包完成后默认存在target目录下。

image.png

image.png

三、项目部署

创建文件夹用来存放前后端打包文件,把前端dist文件和后端jar包进行上传。

image.png

服务器内要安装与开发版本一致的jdk,和nginx(部署前端代码)。

安装jdk:可上官网下载二进制文件,上传到服务器后解压,配置。

安装nginx:通过命令yum install nginx 下载,下载位置默认在/etc/nginx目录下。

image.png

之后编辑nginx.conf文件配置nginx:

固定模版,单机项目可直接拿来使用,只需第一次安装时配置

只需关注server.listen 可修改端口号,默认80;server.root 前端打包后文件夹的存放路径

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /juncai/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

location /api {
        proxy_pass http://localhost:8888; 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        rewrite ^/api/(.*)$ /$1 break;
    }

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

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

最后重启nginx服务:service nginx restart

启动jar包:nohup java -jar employee_server.jar & ,即可完成部署。启动后日志信息会保存在nohup.out文件中,可查看报错信息等。

image.png

后续代码修改重新部署时:

后端: 通过 ps -ef | grep java 命令查看java相关进程

image.png

通过kill -9 17398 终止当前后端进程,再将旧的jar删除,把新的jar包上传后重新,启动jar包:nohup java -jar employee_server.jar &,最后通过noput.out文件查看启动进度。

前端:

把整个旧dist文件夹删除,再把新打包的dist文件上传到服务器同一个路径下,最后重启nginx服务 service nginx restart 即可完成部署。