# 快速部署

# 依赖安装

  • Node 安装

此项目为前后端分离项目,前端运行依赖Node进行依赖包管理,因此需要安装Node依赖包管理工具,官网下载地址https://nodejs.org/en/,下载后直接双击安装即可;

  • yarn 安装

前端项目使用yarn进行依赖管理,因为安装Node之后需进行yarn安装,全局安装命令为:npm install -g yarn;yarn安装之后需在前端项目跟目录进行依赖安装,安装命令为:yarn install

提示

安装需以 管理员权限 进行安装,否则会安装失败

  • VSCode安装

前端UI开发工具推微软的开源工具VSCode,官网下载地址https://code.visualstudio.com/,下载后自动双击安装即可;

# 项目运行

VSCode前端开发工具安装后即可打开前端项目,具体的前端UI代码在项目的 javaweb-ui 目录下,使用VSCode工具直接打开javaweb-ui目录即可,如下图所示:

mixureSecure

上述操作完毕后,我们即可使用命令运行前端项目:

  • 运行命令为:npm run dev,运行成功后会自动出现可访问地址,将地址拷贝值浏览器即可实现在线浏览;

  • 打包命令为:npm run build,如果项目实现线上部署,可以使用打包命令打包,成功打包后项目根目录会自动生成dist目录文件夹,如果在线访问,配置nginxapache指向dist目录下的index.html入口文件即可;

  • 后端服务成功启动之后,在命令行工具输入命令 npm run dev 启动前端后,如下图所示:

    mixureSecure

将浏览地址 http://localhost:8080/ 直接拷贝到浏览器中进行预览,如上述一切成功就绪之后,实际运行效果如下:

mixureSecure

mixureSecure

# 线上部署

项目开发完成之后,都会打包部署到服务器上去,因此需要对前端项目进行打包,打包命令如上所述 npm run build 打包成功后会自动生成 dist 目录,线上配置 Nginx 或者 Apache 访问dist目录即可,具体操作如下:

mixureSecure

下面我们详细说明 Nginx 或者 Apache 进行项目部署,这里我们以Nginx为例讲述详细的Nginx参数配置

server
{
    listen 80;
    server_name manage.cloud.pro.javaweb.vip;
    root /www/webroot/javaweb/javaweb_cloud_pro/javaweb_ui/dist;

    location /{
        try_files $uri $uri/ @router;
        index index.html;
    }

    location @router{
        rewrite ^.*$ /index.html last;
    }

    location /api {
        proxy_pass http://localhost:9100/api;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen       80;
    server_name  images.cloud.pro.javaweb.vip;
    root    /www/webroot/javaweb/javaweb_cloud_pro/javaweb_vue/uploads;
    index   index.php;
    charset utf-8;

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp)$
    {
            expires         365d;
            if ( !-e $request_filename ) {
                    rewrite ^/(.+)$ /cut.php?path=$1 last;
            }
    }

    # deny access to .htaccess files, if Apache's document root
    location ~ /\.ht {
        deny  all;
    }
}
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

如上述所示是配置了两个 Nginx 服务,一个是指向前端UI的 dist 目录,一个是图片域名指向附件目录的配置,实际部署配置时以你们自己的相关 域名参数实际项目路径 进行正确部署,上述参数作为参考;