MapGIS Pan-Spatial Map

# 构建和发布

# 构建

当项目开发完毕，只需在 MapGIS-Pan-Spatial-Map 源码根目录下运行一行命令就可以打包你的应用：

$ yarn build:backend
or
$ npm run build:backend

由于 MapGIS-Pan-Spatial-Map 使用的工具 Vue-cli3 (opens new window) 已经将复杂的流程封装完毕，构建打包文件只需要一个命令 yarn build:backend 或 npm run build:backend，构建打包成功之后，会在 MapGIS-Pan-Spatial-Map 源码根目录下生成 dist 文件夹，里面就是构建打包好的文件，通常是 *.js、*.css、index.html 等静态文件，也包括了项目根的 public/ 下的所有文件。

如果需要自定义构建，比如指定 dist 目录等，可以通过 /vue.config.js 进行配置，详情参看：Vue-cli3 配置 (opens new window)。

# 发布

如果你只是简单的部署，你只需要将整个 dist 文件夹复制到你的 CDN 或静态服务器。index.html 就是是服务器入口。

# 前端与服务端的结合

已现有全空间一张图系统为例。假设已有全空间一张图系统安装包。

1、更新前端内容

将 dist 文件夹里的内容复制到 mapgis-pan-spatial-map-win-x86_64\resource\static\web-ui 中，替换已有内容。

2、启动系统，以管理员身份运行 mapgis-pan-spatial-map-win-x86_64\bin\startup.bat。

# 部署到不同的平台

# 使用 nginx

nginx 作为最流行的 web 容器之一，配置和使用相当简单，只要简单的配置就能拥有高性能和高可用。推荐使用 nginx 托管。示例配置如下：

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    root /usr/share/nginx/html;
    location / {
        # 用于配合 browserHistory 使用
        try_files $uri $uri/ /index.html;
        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;
    }
    location /api {
        proxy_pass https://preview.pro.loacg.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}
server {
  # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
  listen 443 ssl http2 default_server;
  # 证书的公私钥
  ssl_certificate /path/to/public.crt;
  ssl_certificate_key /path/to/private.key;
  location / {
        # 用于配合 browserHistory 使用
        try_files $uri $uri/ /index.html;
  }
  location /api {
      proxy_pass https://preview.pro.loacg.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }
}

# 使用 spring boot

Spring Boot 是使用最多的 java 框架，只需要简单的几步就可以与 MapGIS-Pan-Spatial-Map 进行整合。

首先运行 build:backend

$ yarn build:backend or $ npm run build:backend

然后将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下。

重新启动项目，访问 http://localhost:8080/ 就可以看到效果。

为了方便做整合，最好使用 hash 路由。如果你想使用 history ，可以创建一个 controller ，并添加如下代码：

@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){
    return apiProxy.proxy(request, response);
}

@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
    return "index"
}

# 使用 express

express (opens new window) 的例子

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

# 使用 egg

egg (opens new window) 的例子

// controller
exports.index = function* () {
  yield this.render('App.jsx', {
    context: {
      user: this.session.user,
    },
  });
};

// router
app.get('home', '/*', 'home.index');

← 主题定制 →