JavaWeb_Cloud_Pro 【旗舰版】微服务平台

# 快速部署

# 依赖安装

  • Node 安装

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

  • yarn 安装

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

提示

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

  • VSCode安装

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

# 项目运行

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

mixureSecure

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

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

  • 打包命令为：npm run build，如果项目实现线上部署，可以使用打包命令打包，成功打包后项目根目录会自动生成dist目录文件夹，如果在线访问，配置nginx、apache指向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 目录，一个是图片域名指向附件目录的配置，实际部署配置时以你们自己的相关 域名参数 和 实际项目路径 进行正确部署，上述参数作为参考；

← 模板介绍 →