跳到主要内容

部署

前端代码开发完成后，我们会执行 npm build 命令进行项目构建。构建完成后，我们需要把 js/css/html 等静态资源部署到服务器或者发布到 CDN 上。

资源发布​

如果是博客、官网等静态应用，推荐使用以下的方式进行部署：

CDN 发布​

推荐通过 阿里云 OSS 服务进行非覆盖式发布，每个版本建一个 x.y.z 的文件夹，然后将整个 build 目录复制进去，接着就可以通过 url 访问这些 CDN 资源了。

Nginx​

把构建好的 build 资源复制到服务器对应目录下，添加以下的 Nginx 配置，然后就可以启动 Nginx 静态文件服务器。

location / {
  root   /www/build;
  # 访问 localhost:3000/a 依次查找 /www/build/a、/www/build/a/index.html、/www/build/404.html
  try_files $uri $uri/ 404.html;
}

静态资源托管服务​

我们以 surge 为例。

全局安装 surge​

npm install --global surge

运行 surge​

以 ice-demo 项目名，ice.js 项目默认构建目录 build 为例：

$ cd ice-demo/build
# 启动 surge 服务
$ surge

依次确认账户， projectPath， domain 等信息，等待上传生效即可，详见 surge 官方说明

其他同类产品有：

后端应用集成​

Node.js 应用​

初始化 Koa 应用​

新建项目名 ice-node-koa：

$ mkdir ice-node-koa && cd ice-node-koa
$ npm init
$ npm i ejs koa koa-logger koa-views --save

定义视图​

新建 views/index.ejs：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>ICE Design Lite</title>
    <link rel="shortcut icon" href="<%= publicPath %>/favicon.png" />
    <link href="<%= publicPath %>/css/index.css" rel="stylesheet" />
  </head>

  <body>
    <div id="ice-container"></div>
    <script type="text/javascript" src="<%= publicPath %>/js/index.js"></script>
  </body>
</html>

渲染视图​

新建 app.js：

const views = require('koa-views');
const path = require('path');
const Koa = require('koa');

const app = (module.exports = new Koa());

app.use(views(path.join(__dirname, '/views'), { extension: 'ejs' }));

app.use(async function (ctx) {
  await ctx.render('index', { publicPath: 'http://localhost:3000/' });
});

const port = 3000;
app.listen(port).then(() => console.log(`Listening on http:localhost:${port}`));

示例兼容单页应用的 HashRouter 和 BrowserRouter，如多页应用可参考 https://github.com/koajs/examples 中 blog 示例配置路由

运行示例​

$ node app.js
Listening on http:localhost:3000

浏览器中打开 http://localhost:3000

Java 应用​

resources​

新建 /velocity/layout/index.vm：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>ICE Design Lite</title>
    <link rel="shortcut icon" href="$!publicPath/favicon.png" />
    <link href="$!publicPath/css/index.css" rel="stylesheet" />
  </head>

  <body>
    <div id="ice-container"></div>
    <script type="text/javascript" src="$!publicPath/js/index.js"></script>
  </body>
</html>

Controller​

@GetMapping("/")
@VelocityLayout("/velocity/layout/index.vm")
public String index(Model model) {
  model.addAttribute(publicPath, jsConfig.get(publicPath));
  return "index";
}

示例展示的是 HashRouter 路由，如果为 BrowserRouter，建议改为 @GetMapping(value = { "/**" }) 实现前端 fallback

小程序发布​

执行 npm run build 命令完成构建后，按照命令行提示使用对应的小程序开发者工具打开产物目录。在小程序开发者工具项目页面找到『上传』按钮即可上传小程序。然后进入对应的小程序管理后台进行小程序的提交审核及发布即可。

参考文档：

FAQ​

静态资源在非根目录或 CDN​

如果你的 js、css、图片、字体等资源不在，这时需要配置 publicPath 的值为你的静态资源所在的路径。

部署的 HTML 在非根目录​

假设你本地开发的时候有一个路由是 /home，生产环境下你把应用部署到 /abc/ 下，然后访问 /abc/home，就会出现路由不匹配，显示空白页面的情况。

这时你需要配置 basename 解决。

./src/app.ts
import { defineAppConfig } from 'ice';

export default defineAppConfig(() => ({
  router: {
    basename: '/abc',
  },
}));